Avatar
A face or a mark. People are circles. Orgs are 8px rounded squares.
Spec
object-fit: coveron images.- Fallback chain: image → initials (2 letters,
fg-inverseon a hashed inset that still contrasts) → icon. - Sizes: 24, 32, 40, 64.
- Groups overlap 8px. Max 4 faces, then an overflow count.
aria-labelwith the name, oraria-hiddenwhen decorative beside visible text.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Sizes 24 / 32 / 40 / 64
' width='80' height='80'/><circle cx='40' cy='30' r='14' fill='#F6F3EE'/><ellipse cx='40' cy='70' rx='24' ry='18' fill='#F6F3EE'/></svg>)
Org, broken image → initials, no name → icon
Group, overlap 8px, max 4 + overflow
' width='80' height='80'/><circle cx='40' cy='30' r='14' fill='#F6F3EE'/><ellipse cx='40' cy='70' rx='24' ry='18' fill='#F6F3EE'/></svg>)
' width='80' height='80'/><circle cx='40' cy='30' r='14' fill='#F6F3EE'/><ellipse cx='40' cy='70' rx='24' ry='18' fill='#F6F3EE'/></svg>)
' width='80' height='80'/><circle cx='40' cy='30' r='14' fill='#F6F3EE'/><ellipse cx='40' cy='70' rx='24' ry='18' fill='#F6F3EE'/></svg>)
+3Do / Don't
| Do | Don't |
|---|---|
| Circle for a person, 8px square for an org. | Mix radii in one group. |
| Two-letter initials from the name. | A single letter, or a full name inside the disc. |
| Cap a group at 4 + overflow. | Stack 12 faces. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
| overflow opacity | 120ms --dur-fast | --ease-out | :hover | instant |
Accessibility
- Contrast: initials use
fg-inverseon a hashed inset checked against 4.5:1. - Decorative avatars next to a name are
aria-hidden. Standalone avatars are labelled with the name. - Overflow control is named, e.g. “3 more”.
- These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.