Avatar

A person or organization. The neutral placeholder uses Colors/avatar; photos and logos sit inside AvatarImage.

Figma: 10 / Components / Avatar

Usage

Source: src/components/ui/avatar.tsx

import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from '@/components/ui/avatar'

<Avatar>
    <AvatarImage src={person.photo} alt={person.name} />
    <AvatarFallback />
</Avatar>

xs 20px, sm 24px, default 32px, lg 36px and xl 40px.

When there is no photo, initials can replace the person icon.

Overlapping placeholders for a set of people, as on metric cards.

When to reach for it, and when to use something else.

Use it for

People in tables, drawers and kanban cards.

Organization logos in kanban organization headers.

AvatarGroup to show who is behind a metric.

Avoid

Avatars as the only label for a person; keep the name next to it.

Square avatars; GoodUnited avatars are always round.

Prop	Type	Default	Description
size	'xs' \| 'sm' \| 'default' \| 'lg' \| 'xl'	'default'	Diameter from 20px to 40px.

Prop	Type	Default	Description
count	number	5	How many placeholders to show when no children are passed.
size	AvatarSize	'default'	Size of every avatar in the group.
label	string	–	Accessible name for the group.