Avatar
Avatar represents a person or an entity as a photo, initials or an icon.
Preview
A user or an entity, always circular. Type Photo at 6xl with a presence dot. The file ships twelve named portraits; the docs run one picture across every Photo specimen.
Size
Nine sizes and the disc is the only thing the axis sets. The acronym ramp follows it, and so does the badge box, which is why the two smallest sizes have almost no room left for one.
Badge box per size: 32, 28, 28, 24, 20, 18, 16, 12, 12. Two initials survive down to xl, then the file drops to one, because 14 over a 32 disc is all that fits. Ramp 30/36 and 24/32 at minus 0.4, then 18/28 and 16/24, then 14/20 and 12/16 at 0.1.
Type
Three ways to fill the disc. Photo takes an image. Symbol and Acronym are the fallbacks, and both sit on the same gray/200 disc, so a list of users never breaks its rhythm when one of them has no picture.
The symbol is two white ellipses clipped by the disc, not an icon: head 40 percent of the disc, body 80 by 60, which is the 32 and the 64 by 48 the file draws inside its 80 frame. Both scale with the circle rather than sitting at a fixed icon size. The photo is cropped the same way, by percentage, so one rule serves all nine sizes.
Status
Two independent booleans, one badge each. Top carries an action or a verification, bottom reports presence. Both wear a ring in the card colour so they read against any photo.
Only Verified breaks the circle. The file draws it as an eight point seal, one rounded square over the same square turned 45, and the ring behind it follows the same outline. The presence row runs on the photo, which is where the ring earns its keep: a green dot on a light shoulder needs the card colour behind it to stay a dot.
Properties
Three variant axes and two booleans. The name axis is twelve people, which is what makes the set 324 variants wide.
The badges are their own sets: _Avatar Status - Top carries Verified, Add, Check and Delete, _Avatar Status - Bottom carries Online, Offline, Busy and Away. Avatar group is a third set with three variants and is not on this page yet.
Tokens
Every value the component reads, resolved through its aliases to the primitive underneath.
The disc and its label are primitives, not semantic tokens, so they hold the same two values in dark as in light. Everything else on the component switches. Radius is dimensions/radius/full on the disc and on every badge.
Guidelines
One badge at a time, and give it the corner that fits its job. Presence belongs at the bottom, an action or a mark belongs at the top.
Do not hang badges on the small sizes. At 20 the badge box is 12, more than half the disc, and two of them leave nothing of the avatar to read.
With no image the component falls back to initials, which is why Symbol and Acronym share the disc a photo would fill.