Avatar

Circular (or rounded) user image with a text fallback when the image fails or hasn't loaded. Use it to represent a person, team, or product wherever identity matters — comment authors, members lists, account menus, row owners. For non-identity visuals use an Icon; for short status or count labels use a Badge. shape="circle" (default) reads as a person; shape="rounded" suits product, team, or brand avatars where a soft square reads better. Size by context: xs/sm for dense inline and table rows, md (default) for standalone use and list items, lg and up for profile headers and presence.

With image + fallback

SCDZ

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>SC</AvatarFallback>
</Avatar>

Sizes

DZDZDZDZDZDZ

<Avatar size="xs"><AvatarFallback>DZ</AvatarFallback></Avatar>
<Avatar size="sm"><AvatarFallback>DZ</AvatarFallback></Avatar>
<Avatar size="md"><AvatarFallback>DZ</AvatarFallback></Avatar>
<Avatar size="lg"><AvatarFallback>DZ</AvatarFallback></Avatar>
<Avatar size="xl"><AvatarFallback>DZ</AvatarFallback></Avatar>
<Avatar size="2xl"><AvatarFallback>DZ</AvatarFallback></Avatar>

Rounded shape

SCSCSCSC

<Avatar shape="rounded">
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback shape="rounded">SC</AvatarFallback>
</Avatar>

Props

Component	Notable props
Avatar	size: xs \| sm \| md \| lg \| xl \| 2xl (default md). shape: circle \| rounded (default circle).
AvatarImage	src, alt, onLoadingStatusChange, shape
AvatarFallback	delayMs, size, shape — text size scales with avatar size

Source

packages/react/src/components/avatar.tsx · Figma node 2814:11241 · built on @radix-ui/react-avatar