Geist Design System

Avatar

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

Group
Avatar for evilrabbitAvatar for leerobAvatar for rauchg
Avatar for sambeckerAvatar for raunoAvatar for shudingAvatar for skllcrn+2

Git
Avatar for leerob
Avatar for evilrabbit

With custom icon

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.