Component

Avatar

Circular user profile image with an initials fallback when the image is unavailable.

Usage

Use avatars to represent users in comments, lists, and navigation. Always provide an alt text or initials fallback.

Playground

Preview
User avatarJD

Configure

Code

<Avatar>
  <AvatarImage src="/user.jpg" alt="User avatar" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Do

  • Always provide a fallback with 1–2 initials
  • Use consistent sizing within a single list or row

Don't

  • Don't use avatars without an accessible label or alt text
  • Don't stack more than 5 overlapping avatars without a count badge