Avatar

<div>

Represents a user or entity. Falls back to initials when no image is available.

Overview

Preview

JD

AB

TS

KO

MR

A

B

C

+4

Initials avatar

Preview

JD

<div class="flex h-10 w-10 items-center justify-center rounded-full bg-[#D40C37]/20 ring-1 ring-inset ring-[#D40C37]/30 text-sm font-semibold text-[#D40C37]">
  JD
</div>

Sizes

Preview

AB

AB

AB

AB

AB

<div class="flex h-6  w-6  ... text-[9px]">AB</div>  <!-- xs -->
<div class="flex h-8  w-8  ... text-xs">AB</div>     <!-- sm -->
<div class="flex h-10 w-10 ... text-sm">AB</div>     <!-- md (default) -->
<div class="flex h-12 w-12 ... text-base">AB</div>   <!-- lg -->
<div class="flex h-16 w-16 ... text-xl">AB</div>     <!-- xl -->

With status dot

Preview

MR

<div class="relative inline-flex">
  <div class="flex h-10 w-10 items-center justify-center rounded-full bg-zinc-800 ...">MR</div>
  <!-- Online -->
  <span class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-emerald-400 ring-2 ring-zinc-950" />
  <!-- Busy -->
  <span class="... bg-amber-400" />
  <!-- Offline -->
  <span class="... bg-zinc-600" />
</div>

Avatar group (stack)

Preview

A

B

C

+4

<div class="flex -space-x-2">
  <div class="... ring-2 ring-zinc-950">A</div>
  <div class="... ring-2 ring-zinc-950">B</div>
  <div class="... ring-2 ring-zinc-950">C</div>
  <!-- Overflow count -->
  <div class="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-800 ring-2 ring-zinc-950 text-xs font-medium text-zinc-400">+4</div>
</div>

With image

<div class="relative h-10 w-10 overflow-hidden rounded-full ring-2 ring-zinc-700">
  <img src="/avatar.jpg" alt="Jane Doe" class="h-full w-full object-cover" />
</div>

Accessibility notes

• Use alt text on <img> avatars describing the person
• Decorative avatars where the name is nearby can use alt=""
• Avatar groups should have a collective aria-label on the wrapper: aria-label="5 team members"