Avatar

An image element with a fallback for representing the user. Four published components, thirty-nine variants plus a standalone form field.

Four components, thirty-nine variants

Using the Avatar

What is the difference between Fallback and Icon?
Both are what you show when there is no photograph. Fallback is initials on the muted fill, the shadcn/ui default. Icon is a Tabler person mark at the same muted-foreground colour, for when you have no name either - a pending invite, a deleted account, an anonymous author.
Why is Badge an axis on Avatar and also its own component?
Because it has to be both. On Avatar it is an axis: the dot changes the bounding box, so a copy has to be able to switch it on without detaching. Published separately it can also sit on something that is not an avatar, and it carries its own two axes there.
Which badge size goes with which avatar?
It is not a ratio, so the table above is the answer: 8px for xs and sm, 10px for default, 12px for lg and xl. The initials step once too, from 14px down to 12px at sm. Both are drawn that way in the file rather than computed.
Why does the group stop at five?
Because past five the row stops reading as people and starts reading as a texture, and the honest answer at that point is a count - "+12" - which is a different component. Three, four and five cover the cases where the faces still carry meaning.