# Avatar · MIAN An image, initials or icon representing a person or entity. Sizes, shapes, presence and stacked groups. - Id: `avatar` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use) - Docs: https://mian.ro/components/avatar - Use for: user picture, initials, profile image, avatar group, presence dot. Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate. ## Install ```html ``` ## Classes - `mn-avatar`: Base. - `mn-avatar-xs · sm · lg · xl`: Sizes. - `mn-avatar-square`: Rounded square. - `mn-avatar-group`: Overlapping stack. - `mn-avatar-wrap + mn-presence`: 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 ### Images and initials ```html

LT RB ``` ### Sizes ```html XS SM MD LG XL ``` ### Presence and group ```html

``` ## Source Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/avatar/source