When to use
Use next to a name or as a compact identifier in a list of people.
Loading…
Find components, patterns, tokens, and docs
Documentation
Avatars make people and workspaces recognizable in dense lists.
Fall back to initials when there is no image. Always provide a text name nearby or as an accessible label.
Appearance is not enough. This is the contract for when the control earns a place in the product.
Use next to a name or as a compact identifier in a list of people.
Don't use an avatar as the only identifier for an account action.
Speeds recognition of people and workspaces in tools with many actors.
If the avatar is decorative next to a name, empty alt. If it is the only identifier, name it.
<Avatar
variant="initials"
size="medium"
>
Ada Lovelace
</Avatar>