display

Avatar

A visual representation of a user, team, or entity.

Avatars humanise the interface and help users quickly identify people. The key design challenge is the fallback state — what shows when no image is available — and maintaining consistency.

Anatomy

  • Image (primary)
  • Initials fallback
  • Background colour (generated)
  • Status indicator (optional dot)
  • White ring (when stacked)

Variants

Circle (users)Square with radius (teams/brands)Size: 24/32/40/48/64/80pxStacked groupWith status dot

States

With imageInitials fallbackLoading (skeleton)

Rules

✓ Do

  • •Consistent generated background colour per user
  • •object-fit: cover for images
  • •White ring via box-shadow when stacking
  • •2-letter max for initials

✗ Don't

  • ×Don't use a generic silhouette as fallback — use initials
  • ×Don't randomise the fallback colour — it should be consistent per user
  • ×Don't use non-circular avatars for people

AI Prompt

Paste into Claude, Cursor, Bolt, or v0.

Circular avatars (border-radius: 50%), standard 40px. Image: object-fit cover. Fallback: 2-letter initials, 600 weight, generated background derived from user ID. Status dot: 10px, absolute bottom-right.