Avatar
An image element with a fallback for representing the user. Four published components, thirty-nine variants plus a standalone form field.
What changes with the size
Three things move together, and none of them scale evenly. The badge steps through three values across five sizes, and the initials only drop once, at sm - which is why the table exists rather than a multiplier.
Avatar Badge, six variants
The dot is published separately, on its own two axes: Type is Default or Icon, Size is named for the Tailwind step rather than the pixel count - 3, 2.5 and 2, which land at 12, 10 and 8.
Both types carry a 2px outer stroke bound to base.background. That ring is what keeps the dot readable when it sits on a photograph rather than on the muted fill.
Three, four or five, overlapping by eight
Count is a real axis rather than a hidden layer, because adding a face changes the width of everything around it. Each avatar is the default 32 and sits 8px over the one before, so the three variants come out at 80, 104 and 128 wide.
Avatar Form Field
The one place on this page where the avatar is doing a job rather than being catalogued: an xl avatar next to an outline button, 16px apart. It has no variants, so it counts as a standalone component rather than a variant set - which is why the page adds up to 39 variants plus one.
Four components, thirty-nine variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Avatar
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.
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.
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.
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.