Elements

Avatars

User identity primitives — single avatars, status indicators, and grouped layouts.

Looking for every Avatar prop? See Components › Data.

Simple

A range of avatar sizes with letter fallbacks.

Open

With status

Avatars with a status indicator pinned top-right.

Open

With status bottom

Bottom-right status indicator placement.

Open

Rounded

Squared avatars with progressive corner radii.

Open

With initials

Color-coded initial fallbacks for users without photos.

Open

Group stacked

Overlapping avatar group with shared ring.

Open

Group grid

Avatars laid out in a uniform grid.

Open

Group with counter

Stacked group with an overflow counter.

Open

With name

Avatar paired with a name label.

Open

With name and email

List-row layout with avatar, name, and email.

Open

Large with actions

Profile card with a large avatar and primary actions.

Open