Corepanel – Avatar

Shape

An avatar can be a circle, rounded or square — swap the radius utility.

<span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full h-9 w-9 text-sm bg-subtle text-text-secondary" aria-hidden="true">
  <i class="ph ph-user text-base"></i>
</span>
<span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-lg h-9 w-9 text-sm bg-subtle text-text-secondary" aria-hidden="true">
  <i class="ph ph-user text-base"></i>
</span>
<span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-none h-9 w-9 text-sm bg-subtle text-text-secondary" aria-hidden="true">
  <i class="ph ph-user text-base"></i>
</span>

Size

Four sizes ship by default — sm, md, lg and xl. Any height/width pair works for a custom size.

<span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-lg h-7 w-7 text-xs bg-subtle text-text-secondary" aria-hidden="true">
  <i class="ph ph-user text-sm"></i>
</span>
<span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-lg h-9 w-9 text-sm bg-subtle text-text-secondary" aria-hidden="true">
  <i class="ph ph-user text-base"></i>
</span>
<span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-lg h-11 w-11 text-base bg-subtle text-text-secondary" aria-hidden="true">
  <i class="ph ph-user text-lg"></i>
</span>
<span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-lg h-14 w-14 text-lg bg-subtle text-text-secondary" aria-hidden="true">
  <i class="ph ph-user text-xl"></i>
</span>

Type

An avatar can display initials, an icon, or an image.

AT

<span
  class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-lg h-9 w-9 text-sm font-semibold bg-subtle text-text-secondary"
  aria-label="Amelia Thorne"
>AT</span>
<span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-lg h-9 w-9 text-sm bg-subtle text-text-secondary" aria-hidden="true">
  <i class="ph ph-user text-base"></i>
</span>
<span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-lg h-9 w-9 text-sm bg-subtle text-text-secondary">
  <img src="./assets/images/user1.png" alt="Angelina Gotelli" class="h-full w-full object-cover" />
</span>

Color

Background and text colours come from the design tokens, so both themes stay legible.

A KW

<span
  class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-lg h-9 w-9 text-sm font-semibold bg-primary-soft text-primary"
  aria-label="Ada Lovelace"
>A</span>
<span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-lg h-9 w-9 text-sm bg-[#7c3aed] text-white dark:bg-chart-4 dark:text-slate-900" aria-hidden="true">
  <i class="ph ph-user text-base"></i>
</span>
<span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-lg h-9 w-9 text-sm bg-primary text-on-primary" aria-hidden="true">
  <i class="ph ph-user text-base"></i>
</span>
<span
  class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full h-9 w-9 text-sm font-semibold bg-[#047857] text-white dark:bg-chart-3 dark:text-slate-900"
  aria-label="Kaitlin Winters"
>KW</span>

Status

Pair an avatar with a status dot or a count badge. The state is also written for screen readers, so colour is never the only cue.

99

<span class="relative inline-flex">
  <span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-lg h-9 w-9 text-sm bg-subtle text-text-secondary" aria-hidden="true">
    <i class="ph ph-user text-base"></i>
  </span>
  <span
    class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-danger ring-2 ring-surface"
  ></span>
  <span class="sr-only">Busy</span>
</span>
<span class="relative inline-flex">
  <span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-lg h-9 w-9 text-sm bg-subtle text-text-secondary" aria-hidden="true">
    <i class="ph ph-user text-base"></i>
  </span>
  <span
    class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-warning-on-soft dark:bg-warning ring-2 ring-surface"
  ></span>
  <span class="sr-only">Away</span>
</span>
<span class="relative inline-flex">
  <span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-lg h-9 w-9 text-sm bg-subtle text-text-secondary" aria-hidden="true">
    <i class="ph ph-user text-base"></i>
  </span>
  <span
    class="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-success ring-2 ring-surface"
  ></span>
  <span class="sr-only">Online</span>
</span>
<span class="relative inline-flex">
  <span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-lg h-9 w-9 text-sm bg-subtle text-text-secondary" aria-hidden="true">
    <i class="ph ph-user text-base"></i>
  </span>
  <span
    class="absolute -right-1.5 -top-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-danger px-1 text-[10px] font-semibold text-white ring-2 ring-surface dark:text-slate-900"
  >99</span>
  <span class="sr-only">99 unread notifications</span>
</span>

Avatar Group

Chain avatars in a row with -space-x-2; a trailing tile carries the overflow count.

+2

<div class="flex -space-x-2">
  <span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full h-9 w-9 text-sm bg-subtle text-text-secondary ring-2 ring-surface">
    <img src="./assets/images/user1.png" alt="Team member 1" class="h-full w-full object-cover" />
  </span>
  <span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full h-9 w-9 text-sm bg-subtle text-text-secondary ring-2 ring-surface">
    <img src="./assets/images/user2.png" alt="Team member 2" class="h-full w-full object-cover" />
  </span>
  <span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full h-9 w-9 text-sm bg-subtle text-text-secondary ring-2 ring-surface">
    <img src="./assets/images/user3.png" alt="Team member 3" class="h-full w-full object-cover" />
  </span>
  <span class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full h-9 w-9 text-sm bg-subtle text-text-secondary ring-2 ring-surface">
    <img src="./assets/images/user4.png" alt="Team member 4" class="h-full w-full object-cover" />
  </span>
  <span
    class="inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full h-9 w-9 text-sm border border-border bg-surface text-xs font-semibold text-text-secondary ring-2 ring-surface"
    >+2</span
  >
</div>