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)

AvatarCNAvatarCNAvatarCNAvatarCNAvatarCN

Image + Status Badge (green dot)

CNCNCNCNCN

Image + Icon Badge

CNCNCNCNCN

Fallback — all sizes

CNCNCNCNCN

Fallback — shuffled card colors (background + text seeded by initials)

ALGHATKJLTMHDRBLKTRPTBHLGRABDKSGBSFA

Fallback — name prop (first letter of first + last word, uppercase)

ANÁALAN

Fallback — color is stable per initials across sizes

ALALALALAL

Avatar Group — xs

ALGHAT
+15

Avatar Group — fallback-only members (shuffled colors)

ALGHATKJLT
+13

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)

UserCN

Props

NameTypeDefaultDescription
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.