Components

Avatar

A picture of a person or an account: their photo, their initials or an icon, with optional status and notification marks.

DesignerDeveloper

Playground

ContentSizeStateName Status Notification

Figma variant

💅 Style=Image
👕 Size=Medium
🕹 State=Default
🟢 Status=False
🔔 Notification=False

The content picks the style: an image, initials from the name, or an icon. Initials and icons sit on primary soft.

XLarge and Medium have the card radius; Small, Tiny and Micro are round. Tiny and Micro show one initial.

Size	Box	Radius	Initials	Icon	Status	Notification
xlarge	72px	--radius-card	ui/text lead/bold	36px	12px	20px
medium	48px	--radius-card	ui/text/bold	24px	8px	20px
small	32px	--radius-full	ui/text/bold	16px	8px	16px
tiny	24px	--radius-full	ui/text small/bold	12px	4px	—
micro	16px	--radius-full	ui/footnote/bold	8px	—	—

The status dot sits in the bottom end corner (not in Micro); the notification bubble overlaps the top end corner (XLarge, Medium and Small).

Overlap steps each avatar 8px back; Spaced keeps the 8px in-group gap. A trailing button can add people.

Part	Token
Initials / icon background	`--color-primary-soft`
Initials / icon	`--color-foreground-high-emphasis`
Ring (1px outside)	`--color-surface-level-1`
Status	`--color-success, 2px --color-surface-level-1 ring`
Notification	`--color-primary / --color-on-primary, 2px --color-surface-level-1 ring`
Hover	`--shadow-focus-primary`
Group gap	`--space-form-ingroup-gutter`

XLarge Name Surname has a 24px radius while the XLarge image and icon use 16px; code uses the card radius (16px) for all XLarge.
The hover state is the primary focus shadow; code shows it when the avatar is inside a hovered or focused link or button.
The Small notification sits at x 24 in Name Surname and Icon and x 26 in Image, and at y −4 in one Small variant; code places it 8px over the corner in every size.
Avatars in the group have a 1px stroke with a raw color; code uses surface/level-1.
The icon color is not bound in Figma; code uses foreground/high-emphasis, like the initials.

Figma	React
💅 Style = Image / Name Surname / Icon	`src="…" / name="…" / icon={<Icon… />}`
👕 Size = XLarge / Medium / Small / Tiny / Micro	`size='xlarge' / 'medium' / 'small' / 'tiny' / 'micro'`
🕹 State = Hover	`inside a hovered link or button (data-state="hover" in docs)`
🟢 Status = True	`status`
🔔 Notification = True	`notification={2}`
Avatar Group / Property 1 = Overlap / Spaced	`<AvatarGroup layout='overlap' \| 'spaced'>`