{
"$schema": "https://mian.ro/schema/v2/registry.json",
"schemaVersion": "2.0.0",
"generatedAt": "2026-10-02T13:14:06.957Z",
"id": "avatar",
"name": "Avatar",
"category": "Data display",
"description": "An image, initials or icon representing a person or entity. Sizes, shapes, presence and stacked groups.",
"tags": [
"avatar",
"profile",
"user",
"initials",
"presence",
"group"
],
"requiresJs": false,
"license": "LicenseRef-MIAN-1.0",
"composition": {
"role": null,
"intents": [
"user picture",
"initials",
"profile image",
"avatar group",
"presence dot"
],
"prominence": null,
"density": null,
"worksAfter": [],
"worksBefore": [],
"alternatives": [],
"avoid": null
},
"url": "https://mian.ro/components/avatar",
"markdownUrl": "https://mian.ro/ai/components/avatar.md",
"classes": [
{
"name": "mn-avatar",
"description": "Base."
},
{
"name": "mn-avatar-xs · sm · lg · xl",
"description": "Sizes."
},
{
"name": "mn-avatar-square",
"description": "Rounded square."
},
{
"name": "mn-avatar-group",
"description": "Overlapping stack."
},
{
"name": "mn-avatar-wrap + mn-presence",
"description": "Status dot: mn-online, mn-busy, mn-away."
}
],
"accessibility": [
"Give images meaningful alt text, or alt=\"\" when the name is printed next to it.",
"Presence dots are visual: include the status in text or a label."
],
"examples": [
{
"title": "Images and initials",
"description": null,
"html": "![\"Ana](\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Crect%20width%3D'64'%20height%3D'64'%20fill%3D'hsl(330%2055%25%2078%25)'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'26'%20r%3D'12'%20fill%3D'hsl(330%2035%25%2042%25)'%2F%3E%3Cpath%20d%3D'M10%2064c2-14%2011-21%2022-21s20%207%2022%2021z'%20fill%3D'hsl(330%2035%25%2042%25)'%2F%3E%3C%2Fsvg%3E\")
\n![\"Kenji](\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Crect%20width%3D'64'%20height%3D'64'%20fill%3D'hsl(200%2055%25%2078%25)'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'26'%20r%3D'12'%20fill%3D'hsl(200%2035%25%2042%25)'%2F%3E%3Cpath%20d%3D'M10%2064c2-14%2011-21%2022-21s20%207%2022%2021z'%20fill%3D'hsl(200%2035%25%2042%25)'%2F%3E%3C%2Fsvg%3E\")
\nLT\nRB\n"
},
{
"title": "Sizes",
"description": null,
"html": "XS\nSM\nMD\nLG\nXL"
},
{
"title": "Presence and group",
"description": null,
"html": "![\"Mira\"](\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Crect%20width%3D'64'%20height%3D'64'%20fill%3D'hsl(40%2055%25%2078%25)'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'26'%20r%3D'12'%20fill%3D'hsl(40%2035%25%2042%25)'%2F%3E%3Cpath%20d%3D'M10%2064c2-14%2011-21%2022-21s20%207%2022%2021z'%20fill%3D'hsl(40%2035%25%2042%25)'%2F%3E%3C%2Fsvg%3E\")
\n![\"Ion\"](\"data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Crect%20width%3D'64'%20height%3D'64'%20fill%3D'hsl(18%2055%25%2078%25)'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'26'%20r%3D'12'%20fill%3D'hsl(18%2035%25%2042%25)'%2F%3E%3Cpath%20d%3D'M10%2064c2-14%2011-21%2022-21s20%207%2022%2021z'%20fill%3D'hsl(18%2035%25%2042%25)'%2F%3E%3C%2Fsvg%3E\")
\n"
}
],
"css": ".mn-avatar {\n --_s: 2.5rem;\n position: relative; display: inline-grid; place-items: center; flex: none;\n width: var(--_s); height: var(--_s);\n border-radius: 50%; overflow: hidden;\n background: var(--mn-surface-2); color: var(--mn-muted);\n font: 600 calc(var(--_s) * .38)/1 var(--mn-font); text-transform: uppercase; user-select: none;\n vertical-align: middle;\n}\n.mn-avatar > img { width: 100%; height: 100%; object-fit: cover; }\n.mn-avatar-xs { --_s: 1.5rem; } .mn-avatar-sm { --_s: 2rem; } .mn-avatar-lg { --_s: 3.25rem; } .mn-avatar-xl { --_s: 4.5rem; }\n.mn-avatar-square { border-radius: var(--mn-radius-field); }\n.mn-avatar:is(.mn-primary, .mn-accent, .mn-success, .mn-warning, .mn-danger, .mn-info) { background: var(--_c); color: var(--_cf); }\n.mn-avatar-wrap { position: relative; display: inline-flex; }\n.mn-presence {\n position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; min-width: 8px; min-height: 8px;\n border-radius: 50%; border: 2px solid var(--mn-bg); background: var(--mn-muted);\n}\n.mn-presence.mn-online { background: var(--mn-success); }\n.mn-presence.mn-busy { background: var(--mn-danger); }\n.mn-presence.mn-away { background: var(--mn-warning); }\n.mn-avatar-group { display: inline-flex; flex-direction: row; }\n.mn-avatar-group > .mn-avatar { box-shadow: 0 0 0 2px var(--mn-bg); }\n.mn-avatar-group > .mn-avatar + .mn-avatar { margin-inline-start: calc(var(--_s) * -.3); }",
"js": null,
"install": {
"css": "https://mian.ro/dist/mian.css",
"js": null,
"registryItem": "https://mian.ro/r/avatar.json"
}
}