Avatar

Thumbnail representation of a user or entity. Supports images and initials fallback with multiple sizes.

XS SM TB LG XL

Open Avatar Playground

Anatomy

1 TB
  1. 1 Container — circular shape with image or initials

Options

Sizes

XS
XS (24px)
SM
SM (32px)
MD
MD (40px)
LG
LG (48px)
XL
XL (64px)

Content types

TB
Initials
User photo
Image

Table of options

PropertyValuesDefault
srcimage URL—
alttext—
initials1–2 characters—
sizexs / sm / md / lg / xlmd

Accessibility

  • Uses role="img" with aria-label for the accessible name.
  • Image avatars include alt text on the <img> element.
  • Initials are decorative — the aria-label on the container provides the accessible name.

Design checklist

✓
All color themesWorks across light and dark modes.
✓
Defined optionsSizes and content types documented.
✓
Design tokensComponent-scoped tokens (--avatar-*).