Skip to content
Wave 2

Avatar

A person or organization picture, with initials as a fallback.

  • Decorative illustrations.

Install

Terminal
pnpm dlx shadcn@latest add @acme/avatar

Or import from the package: import { Avatar } from '@acme/react'

Examples

Basic

ALGH
KJKatherine Johnson
avatar-basic.tsx
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

// An inline SVG data URI keeps the example self-contained (no network image).
const photo =
  'data:image/svg+xml;utf8,' +
  encodeURIComponent(
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><rect width="40" height="40" fill="#8792ff"/><circle cx="20" cy="16" r="7" fill="#e4e9ff"/><rect x="8" y="26" width="24" height="14" rx="7" fill="#e4e9ff"/></svg>',
  )

export default function AvatarBasic() {
  return (
    <div className="flex items-center gap-4">
      <Avatar>
        <AvatarImage src={photo} alt="Ada Lovelace" />
        <AvatarFallback>AL</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="/missing.png" alt="Grace Hopper" />
        <AvatarFallback>GH</AvatarFallback>
      </Avatar>
      <div className="flex items-center gap-2 text-body-sm">
        <Avatar className="size-8">
          <AvatarFallback>KJ</AvatarFallback>
        </Avatar>
        Katherine Johnson
      </div>
    </div>
  )
}

Props

Avatar props
PropTypeDefaultDescription
AvatarImage.alt (required)string—The person's name, or "" when the name is already shown next to it.
AvatarImage.srcstring—Image URL.

Accessibility

Role
img (when alt is set)
You provide
  • alt on AvatarImage (enforced by TypeScript).
Built in
  • Fallback initials show while the image loads or if it fails.
WCAG 2.2 criteria
1.1.1

Don’t

  • Use initials as the only identification without the name nearby or in alt.

Tokens

  • color.muted
  • color.muted-foreground