Avatar — Cider UI

Selectors

.avatar: Circular container for initials or image (40px default).
.avatar-sm: Small avatar (28px). Best for images or single-character initials — two-letter monograms are too cramped at this size.
.avatar-lg: Large avatar (64px).
.avatar-xl: Extra-large avatar (80px).
.avatar-group: Overlapping stack of avatars with ring spacing.

Default

HTML

<div class="flex items-center gap-4">
  <img class="avatar" src="https://i.pravatar.cc/40" alt="Avatar" />
  <div class="avatar">JD</div>
  <div class="avatar">
    <svg class="size-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/></svg>
  </div>
</div>

Sizes

HTML

<div class="flex flex-wrap items-center gap-4">
  <img class="avatar avatar-sm" src="https://i.pravatar.cc/28" alt="Avatar" />
  <img class="avatar" src="https://i.pravatar.cc/40" alt="Avatar" />
  <img class="avatar avatar-lg" src="https://i.pravatar.cc/64" alt="Avatar" />
  <img class="avatar avatar-xl" src="https://i.pravatar.cc/80" alt="Avatar" />
  <div class="avatar avatar-sm">S</div>
  <div class="avatar">MD</div>
  <div class="avatar avatar-lg">LG</div>
  <div class="avatar avatar-xl">XL</div>
</div>

With Status

HTML

<div class="flex items-center gap-6">
  <div class="relative inline-block">
    <div class="avatar">EF</div>
    <span class="absolute bottom-0 right-0 size-3 rounded-full border-2 border-background bg-green-500" role="img" aria-label="Online"></span>
  </div>
  <div class="relative inline-block">
    <img class="avatar" src="https://i.pravatar.cc/40?img=5" alt="Avatar" />
    <span class="absolute bottom-0 right-0 size-3 rounded-full border-2 border-background bg-amber-500" role="img" aria-label="Away"></span>
  </div>
  <div class="relative inline-block">
    <div class="avatar">GH</div>
    <span class="absolute bottom-0 right-0 size-3 rounded-full border-2 border-background bg-tertiary-foreground" role="img" aria-label="Offline"></span>
  </div>
</div>

Interactive

HTML

<div class="flex items-center gap-4">
  <button class="avatar">JD</button>
  <a href="#" class="avatar">
    <img src="https://i.pravatar.cc/40?img=3" alt="User profile" />
  </a>
</div>

Group

HTML

<div class="avatar-group">
  <div class="avatar avatar-sm">A</div>
  <div class="avatar avatar-sm">B</div>
  <div class="avatar avatar-sm">C</div>
  <div class="avatar avatar-sm text-tertiary-foreground">+3</div>
</div>