avatar component

Drop-in semantic component. See examples, sizes, variants, and source.

User profile image with initial / icon / image fallback. Apply size (xs, sm, xl, lg) and shape (rounded, square) modifiers to avatar. Add status for a presence dot, badge with data-badge for a count, or verified / vip for trust badges. Group multiples with the avatars wrapper. Pure CSS — no JS.

Avatar System

Avatar Sizes

<div class="row wrap">
  <div class="avatar xs">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar sm">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar xl">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar lg">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
</div>

Avatar with Initials

<div class="row wrap">
  <div class="avatar xs">JD</div>
  <div class="avatar sm">AB</div>
  <div class="avatar">MK</div>
  <div class="avatar xl">PS</div>
  <div class="avatar lg">WB</div>
</div>

Avatar Colors

<div class="flex gap-3 flex-wrap items-center">
  <div class="avatar">DG</div>
  <div class="avatar grey">GR</div>
  <div class="avatar red">RD</div>
  <div class="avatar orange">OR</div>
  <div class="avatar yellow">YL</div>
  <div class="avatar green">GN</div>
  <div class="avatar teal">TL</div>
  <div class="avatar blue">BL</div>
  <div class="avatar violet">VT</div>
  <div class="avatar purple">PR</div>
  <div class="avatar pink">PK</div>
  <div class="avatar brown">BR</div>
  <div class="avatar olive">OL</div>
  <div class="avatar black">BK</div>
</div>

Default Avatar Icons

<div class="flex gap-3 flex-wrap items-center">
  <div class="avatar">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
      <circle cx="50" cy="50" r="50" class="avatar-bg" />
      <g class="avatar-person" fill="currentColor" opacity="0.6">
        <circle cx="50" cy="35" r="12" />
        <path
          d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"
        />
      </g>
    </svg>
  </div>
  <div class="avatar grey">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
      <circle cx="50" cy="50" r="50" class="avatar-bg" />
      <g class="avatar-person" fill="currentColor" opacity="0.6">
        <circle cx="50" cy="35" r="12" />
        <path
          d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"
        />
      </g>
    </svg>
  </div>
  <div class="avatar red">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
      <circle cx="50" cy="50" r="50" class="avatar-bg" />
      <g class="avatar-person" fill="currentColor" opacity="0.6">
        <circle cx="50" cy="35" r="12" />
        <path
          d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"
        />
      </g>
    </svg>
  </div>
  <div class="avatar blue">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
      <circle cx="50" cy="50" r="50" class="avatar-bg" />
      <g class="avatar-person" fill="currentColor" opacity="0.6">
        <circle cx="50" cy="35" r="12" />
        <path
          d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"
        />
      </g>
    </svg>
  </div>
  <div class="avatar green">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
      <circle cx="50" cy="50" r="50" class="avatar-bg" />
      <g class="avatar-person" fill="currentColor" opacity="0.6">
        <circle cx="50" cy="35" r="12" />
        <path
          d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"
        />
      </g>
    </svg>
  </div>
  <div class="avatar purple">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
      <circle cx="50" cy="50" r="50" class="avatar-bg" />
      <g class="avatar-person" fill="currentColor" opacity="0.6">
        <circle cx="50" cy="35" r="12" />
        <path
          d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"
        />
      </g>
    </svg>
  </div>
</div>

Avatar Shapes

<div class="row wrap">
  <div class="avatar">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar rounded">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar square">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
</div>

Avatar with Status Indicators

Default Shape (Round)

Rounded Shape

Square Shape

Status with Initials (All Shapes)

<div class="space-y-6">
  <!-- Default Shape (Round) -->
  <div>
    <h4 class="subhead text-gray-700 mb-3">Default Shape (Round)</h4>
    <div class="row wrap">
      <div class="avatar xs status positive">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar sm status negative">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar status green">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar xl status warning">
        <img
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar lg status teal">
        <img
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
    </div>
  </div>

  <!-- Rounded Shape -->
  <div>
    <h4 class="subhead text-gray-700 mb-3">Rounded Shape</h4>
    <div class="row wrap">
      <div class="avatar rounded xs status positive">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar rounded sm status negative">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar rounded status green">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar rounded xl status warning">
        <img
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar rounded lg status teal">
        <img
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
    </div>
  </div>

  <!-- Square Shape -->
  <div>
    <h4 class="subhead text-gray-700 mb-3">Square Shape</h4>
    <div class="row wrap">
      <div class="avatar square xs status positive">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar square sm status negative">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar square status green">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar square xl status warning">
        <img
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar square lg status teal">
        <img
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
    </div>
  </div>

  <!-- With Initials -->
  <div>
    <h4 class="subhead text-gray-700 mb-3">Status with Initials (All Shapes)</h4>
    <div class="row wrap">
      <!-- Round -->
      <div class="avatar status positive">JD</div>
      <div class="avatar status negative">AB</div>
      <!-- Rounded -->
      <div class="avatar rounded status warning">MK</div>
      <div class="avatar rounded status info">PS</div>
      <!-- Square -->
      <div class="avatar square status green">WB</div>
      <div class="avatar square status purple">TG</div>
    </div>
  </div>
</div>

<div class="space-y-6">
  
  <div>
    <h4 class="subhead text-gray-700 mb-3">Default Shape (Round)</h4>
    <div class="row wrap">
      <div class="avatar xs status positive">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar sm status negative">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar status green">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar xl status warning">
        <img
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar lg status teal">
        <img
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
    </div>
  </div>

<div>
    <h4 class="subhead text-gray-700 mb-3">Rounded Shape</h4>
    <div class="row wrap">
      <div class="avatar rounded xs status positive">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar rounded sm status negative">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar rounded status green">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar rounded xl status warning">
        <img
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar rounded lg status teal">
        <img
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
    </div>
  </div>

<div>
    <h4 class="subhead text-gray-700 mb-3">Square Shape</h4>
    <div class="row wrap">
      <div class="avatar square xs status positive">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar square sm status negative">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar square status green">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar square xl status warning">
        <img
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar square lg status teal">
        <img
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
    </div>
  </div>

<div>
    <h4 class="subhead text-gray-700 mb-3">Status with Initials (All Shapes)</h4>
    <div class="row wrap">
      
      <div class="avatar status positive">JD</div>
      <div class="avatar status negative">AB</div>
      
      <div class="avatar rounded status warning">MK</div>
      <div class="avatar rounded status info">PS</div>
      
      <div class="avatar square status green">WB</div>
      <div class="avatar square status purple">TG</div>
    </div>
  </div>
</div>

Status Positions

All Status Positions

<div class="space-y-6">
  <div>
    <h4 class="subhead text-gray-700 mb-3">All Status Positions</h4>
    <div class="row wrap">
      <div class="avatar xl status positive">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar xl status negative top right">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar xl status warning bottom left">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar xl status info top left">
        <img
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
    </div>
  </div>
</div>

<div class="space-y-6">
  <div>
    <h4 class="subhead text-gray-700 mb-3">All Status Positions</h4>
    <div class="row wrap">
      <div class="avatar xl status positive">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar xl status negative top right">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar xl status warning bottom left">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar xl status info top left">
        <img
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
    </div>
  </div>
</div>

Avatar with Badge

<div class="row wrap">
  <div class="avatar badge" data-badge="5">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar badge" data-badge="99+">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar xl badge" data-badge="NEW">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
</div>

Verified Avatars

<div class="row wrap">
  <div class="avatar verified">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar xl verified blue">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar xl verified gold">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
</div>

VIP Avatars

<div class="row wrap">
  <div class="avatar vip">
    <img
      src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
      alt="VIP User avatar"
    />
  </div>
  <div class="avatar xl vip gold">
    <img
      src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
      alt="VIP User avatar"
    />
  </div>
  <div class="avatar xl vip purple">
    <img
      src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
      alt="VIP User avatar"
    />
  </div>
  <div class="avatar xl vip primary">
    <img
      src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
      alt="VIP User avatar"
    />
  </div>
</div>

Avatar Collections

Basic Collection (.avatars)

+12

Stacked Modifier (.avatars.stacked) - Hover to animate

Tight Modifier (.avatars.tight) - Tighter spacing

Combined Modifiers (.avatars.stacked.tight)

<div class="stack spacious">
  <!-- Basic Avatar Collection -->
  <div class="mb-6">
    <p class="subhead text-gray-600 mb-3">Basic Collection (.avatars)</p>
    <div class="avatars">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User 1"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User 2"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User 3"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
          alt="User 4"
        />
      </div>
      <div class="count">+12</div>
    </div>
  </div>

  <!-- Stacked Modifier -->
  <div class="mb-6">
    <p class="subhead text-gray-600 mb-3">Stacked Modifier (.avatars.stacked) - Hover to animate</p>
    <div class="avatars stacked">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User 1"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User 2"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User 3"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
          alt="User 4"
        />
      </div>
    </div>
  </div>

  <!-- Tight Modifier -->
  <div class="mb-6">
    <p class="subhead text-gray-600 mb-3">Tight Modifier (.avatars.tight) - Tighter spacing</p>
    <div class="avatars tight">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User 1"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User 2"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User 3"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
          alt="User 4"
        />
      </div>
      <div class="count">+5</div>
    </div>
  </div>

  <!-- Combined Modifiers -->
  <div class="mb-6">
    <p class="subhead text-gray-600 mb-3">Combined Modifiers (.avatars.stacked.tight)</p>
    <div class="avatars stacked tight">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User 1"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User 2"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User 3"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
          alt="User 4"
        />
      </div>
      <div class="count">+8</div>
    </div>
  </div>
</div>

<div class="stack spacious">
  
  <div class="mb-6">
    <p class="subhead text-gray-600 mb-3">Basic Collection (.avatars)</p>
    <div class="avatars">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User 1"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User 2"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User 3"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
          alt="User 4"
        />
      </div>
      <div class="count">+12</div>
    </div>
  </div>

<div class="mb-6">
    <p class="subhead text-gray-600 mb-3">Stacked Modifier (.avatars.stacked) - Hover to animate</p>
    <div class="avatars stacked">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User 1"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User 2"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User 3"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
          alt="User 4"
        />
      </div>
    </div>
  </div>

<div class="mb-6">
    <p class="subhead text-gray-600 mb-3">Tight Modifier (.avatars.tight) - Tighter spacing</p>
    <div class="avatars tight">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User 1"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User 2"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User 3"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
          alt="User 4"
        />
      </div>
      <div class="count">+5</div>
    </div>
  </div>

<div class="mb-6">
    <p class="subhead text-gray-600 mb-3">Combined Modifiers (.avatars.stacked.tight)</p>
    <div class="avatars stacked tight">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User 1"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User 2"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User 3"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
          alt="User 4"
        />
      </div>
      <div class="count">+8</div>
    </div>
  </div>
</div>

Avatar with Actions

<div class="row wrap">
  <div class="avatar action">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
    <button class="action">
      <i class="icon camera w-4 h-4"></i>
    </button>
  </div>
  <div class="avatar xl action">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
    <button class="action">
      <i class="icon pencil w-4 h-4"></i>
    </button>
  </div>
  <div class="avatar lg action">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
    <button class="action">
      <i class="icon plus w-8 h-8"></i>
    </button>
  </div>
</div>

Avatar with Ring

<div class="row wrap">
  <div class="avatar ring">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar ring primary">
    <img
      src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar ring positive">
    <img
      src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar ring negative">
    <img
      src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
</div>

Class API Reference

Type	Class	Usage	Notes
Base	`avatar`	Required base class	Always required
Base	`avatars`	Group container — overlapping by default	Add `.count` child for "+N"
Sizes	`xs`	Tiny — 24px	Modifier on `avatar`
	`sm`	Small — 32px	Modifier on `avatar`
	(default)	Medium — 40px	No size class needed
	`xl`	Large — 48px	Modifier on `avatar`
	`lg`	Big — 80px	Modifier on `avatar`
Shape	(default)	Circle	No shape class needed
	`rounded`	8px corner radius	Modifier on `avatar`
	`square`	No corner radius	Modifier on `avatar`
Colors	`primary`, `positive`, `negative`, `warning`, `info`, `red`, `orange`, `yellow`, `olive`, `green`, `teal`, `blue`, `violet`, `purple`, `pink`, `brown`, `grey`, `black`	Tinted background + matching text for initials	Modifier on `avatar`
Decorations	`status`	Presence dot — combine with intent for color	Reposition with `top` / `bottom` / `left` / `right`
	`badge`	Counter pill — value from `data-badge`	e.g. `data-badge="99+"`
	`verified`	Blue check trust badge	Add `blue` or `gold` to recolor
	`vip`	Gold star trust badge	Add `gold`, `purple`, or `primary` to recolor
	`ring`	Outer focus ring — accepts intent for color	Animates on hover
Group Modifiers	`stacked`	Hover spreads avatars apart	Modifier on `avatars`
	`tight`	Tighter overlap spacing	Modifier on `avatars`
	`compact`	Pill-shaped white container with inset avatars	Modifier on `avatars`
Action	`action`	Hover overlay button — wraps a child `.action` button	Modifier on `avatar`