Default
Represent one identity consistently
Use a clear Image when available and keep the visible name beside the Avatar in identity rows.
Sizes
Use size to match context
Small fits dense lists, Medium is the default, Large supports prominent rows, and Extra Large suits profile summaries.
Small · 32pxMedium · 40pxLarge · 48pxExtra Large · 64pxFallbacks
Remain recognizable without an image
Use one or two initials when a stable name exists. Use the generic icon only when identity information is unavailable.
Presence
Keep availability secondary
The colored indicator supplements a visible text status. Color alone does not communicate availability.
Avatar Group
Summarize a small set of people
Show a few recognizable members and collapse the remainder into a count. Provide the complete member list elsewhere.
Interactive
Wrap the Avatar in a real control
Use Avatar Button for an account menu or profile action. Its accessible name describes the action, and its target remains at least 44px.
Usage guidance
Pair identity with a visible name.
Avatar supports recognition but should rarely carry the full identity alone. Use initials generated from a stable display name when an Image is unavailable.
Next component: Spinner