Navigation
Overlays
Avatar
Avatar component with 5 sizes (xs/sm/default/lg/xl), image/fallback/icon types, AvatarBadge for status dots or icons, and AvatarGroup with AvatarGroupCount for displaying multiple avatars.
Figma: DS-001 Foundations · 17100:29935
Import
Live Demo
Avatar sizes, badge states, and group compositions.
Image — all sizes (xs / sm / default / lg / xl)
CNCNCNCNCN
Image + Status Badge (green dot)
CNCNCNCNCN
Image + Icon Badge
CNCNCNCNCN
Fallback — all sizes
CNCNCNCNCN
Icon Fallback — all sizes
Avatar Group (3 avatars)
CNVCSD
Avatar Group + Count (+3)
CNVCSD
+3
Avatar Group + Add Icon
CNVCSD
Avatar Form Field (avatar + change photo)
CN
Props
| Name | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "default" | "lg" | "xl" | "default" | The size of the avatar |
Examples
With Image
Fallback Only
Shown when the image fails to load or isn't provided.
With Status Badge
Add a status indicator or custom icon badge.
Avatar Group
Display multiple avatars with overflow count.