Geist Design System

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.

Overlap

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

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.

Size

Git

With custom icon

Letter

SLEKCK

Placeholder

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). Geist 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–24px next to text-label-14, 32px next to text-label-16, 48–64px in headers and onboarding states.

Was this helpful?