avatar

Avatars represent a user or a team. Stacked avatars represent a group of people.

By default the first member sits on top of the stack, so the first credited author stays the most prominent. Set reverse to flip the order so the last member sits on top instead. The visual left-to-right order is unchanged.

Show code

By default overlap="auto" scales the spacing with size, keeping a generous, evenly-spaced cluster at any size.

Show code

Pass a number to set the overlap in pixels instead. Lower values give more generous spacing; higher values pack tighter for dense, space-constrained UI.

Show code

Best Practices

• Use a single Avatar for one person, team, or organization. For two or more stacked avatars, use AvatarGroup so the cluster gets correct overlap, sizing, and a single accessible label.
• Pass src first and fall back to letter (1–2 uppercase chars) when the image is missing. Reserve placeholder for the loading shell, never as a permanent fallback.
• title is the literal entity name (Acme Inc., Jane Doe). The component already prefixes letter avatars with "Avatar with initials:" for screen readers, so don't hand-write Avatar of ….
• Keep letter uppercase and derived from the entity name. No emoji, no punctuation, no ?.
• Pick a size that matches adjacent type: 20–24 px next to small text, 32 px next to body text, 48–64 px in headers and onboarding states.