Avatar

The avatar shows a user's image in a circle, falling back to initials when the image is missing or fails to load. Avatars stack into groups with an optional overflow count, and a badge can mark status.

<span class="avatar">
  <img
    class="avatar-image"
    src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
    alt="Leila Navarro"
  />
  <span class="avatar-fallback">LN</span>
</span>
 
<span class="avatar">
  <img
    class="avatar-image"
    src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&h=640&fit=facearea&facepad=3&auto=format&q=100&bg-remove=true&bg=e5e5e5"
    alt="Theo Marchetti"
  />
  <span class="avatar-fallback">TM</span>
  <span class="avatar-badge bg-green-600 dark:bg-green-800"></span>
</span>
 
<span class="avatar-group">
  <span class="avatar">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Leila Navarro"
    />
    <span class="avatar-fallback">LN</span>
  </span>
  <span class="avatar">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&h=640&fit=facearea&facepad=3&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Theo Marchetti"
    />
    <span class="avatar-fallback">TM</span>
  </span>
  <span class="avatar">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1573497019236-17f8177b81e8?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Camille Laurent"
    />
    <span class="avatar-fallback">CL</span>
  </span>
  <span class="avatar-group-count">+3</span>
</span>

Usage

Add the avatar class to a wrapper holding the image and the fallback initials. The image wins while it works; when it is missing or fails to load, the fallback shows instead. Give the <img> a meaningful alt, like the person's name.

Class	Description
`avatar`	Add to the wrapper `<span>`
`avatar-sm` `avatar-lg`	Add to `avatar` to change the size
`avatar-image`	Add to the `<img>` inside
`avatar-fallback`	Add to a `<span>` with initials, shown when the image can't be
`avatar-badge`	Add to a `<span>` inside for a status dot, optionally with an icon
`avatar-group`	Add to a wrapper stacking several avatars
`avatar-group-count`	Add to a `<span>` in a group showing the overflow count

<span class="avatar">
  <img class="avatar-image" src="/portrait.webp" alt="Leila Navarro" />
  <span class="avatar-fallback">LN</span>
</span>

Examples

Basic

An image with fallback initials behind it.

<span class="avatar">
  <img
    class="avatar-image"
    src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
    alt="Leila Navarro"
  />
  <span class="avatar-fallback">LN</span>
</span>

Size

Add avatar-sm or avatar-lg to change the size.

<div class="flex flex-wrap items-center gap-2">
  <span class="avatar avatar-sm">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Leila Navarro"
    />
    <span class="avatar-fallback">LN</span>
  </span>
  <span class="avatar">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Leila Navarro"
    />
    <span class="avatar-fallback">LN</span>
  </span>
  <span class="avatar avatar-lg">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Leila Navarro"
    />
    <span class="avatar-fallback">LN</span>
  </span>
</div>

Fallback

When the image is missing or fails to load, the initials take over.

<span class="avatar">
  <img class="avatar-image" src="/broken-link.webp" alt="Leila Navarro" />
  <span class="avatar-fallback">LN</span>
</span>
 
<span class="avatar">
  <span class="avatar-fallback">CL</span>
</span>

Badge

Mark status with an avatar-badge; color it with utilities.

<span class="avatar">
  <img
    class="avatar-image"
    src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
    alt="Leila Navarro"
  />
  <span class="avatar-fallback">LN</span>
  <span class="avatar-badge bg-green-600 dark:bg-green-800"></span>
</span>

Badge with icon

The badge fits a small icon at the default and large sizes.

<span class="avatar">
  <img
    class="avatar-image"
    src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&h=640&fit=facearea&facepad=3&auto=format&q=100&bg-remove=true&bg=e5e5e5"
    alt="Theo Marchetti"
  />
  <span class="avatar-fallback">TM</span>
  <span class="avatar-badge">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
  </span>
</span>

Group

Avatars stack into a group with a ring separating them.

<span class="avatar-group">
  <span class="avatar">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Leila Navarro"
    />
    <span class="avatar-fallback">LN</span>
  </span>
  <span class="avatar">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&h=640&fit=facearea&facepad=3&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Theo Marchetti"
    />
    <span class="avatar-fallback">TM</span>
  </span>
  <span class="avatar">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1573497019236-17f8177b81e8?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Camille Laurent"
    />
    <span class="avatar-fallback">CL</span>
  </span>
</span>

Group count

End the stack with an overflow count.

<span class="avatar-group">
  <span class="avatar">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Leila Navarro"
    />
    <span class="avatar-fallback">LN</span>
  </span>
  <span class="avatar">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&h=640&fit=facearea&facepad=3&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Theo Marchetti"
    />
    <span class="avatar-fallback">TM</span>
  </span>
  <span class="avatar">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1573497019236-17f8177b81e8?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Camille Laurent"
    />
    <span class="avatar-fallback">CL</span>
  </span>
  <span class="avatar-group-count">+3</span>
</span>

Group count with icon

The count slot fits an icon too.

<span class="avatar-group">
  <span class="avatar">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Leila Navarro"
    />
    <span class="avatar-fallback">LN</span>
  </span>
  <span class="avatar">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&h=640&fit=facearea&facepad=3&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Theo Marchetti"
    />
    <span class="avatar-fallback">TM</span>
  </span>
  <span class="avatar">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1573497019236-17f8177b81e8?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Camille Laurent"
    />
    <span class="avatar-fallback">CL</span>
  </span>
  <span class="avatar-group-count">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
  </span>
</span>

RTL

Add dir="rtl" to any parent element, typically <html>, to render right-to-left. See the RTL guide for details.

<div id="avatar-rtl-demo" dir="rtl" class="flex flex-wrap items-center gap-8">
  <span class="avatar">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Leila Navarro"
    />
    <span class="avatar-fallback">LN</span>
  </span>
 
  <span class="avatar">
    <img
      class="avatar-image"
      src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&h=640&fit=facearea&facepad=3&auto=format&q=100&bg-remove=true&bg=e5e5e5"
      alt="Theo Marchetti"
    />
    <span class="avatar-fallback">TM</span>
    <span class="avatar-badge bg-green-600 dark:bg-green-800"></span>
  </span>
 
  <span class="avatar-group">
    <span class="avatar">
      <img
        class="avatar-image"
        src="https://images.unsplash.com/photo-1750390200282-bf7f669a9946?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
        alt="Leila Navarro"
      />
      <span class="avatar-fallback">LN</span>
    </span>
    <span class="avatar">
      <img
        class="avatar-image"
        src="https://images.unsplash.com/photo-1750390200293-92d5a788d3a2?w=640&h=640&fit=facearea&facepad=3&auto=format&q=100&bg-remove=true&bg=e5e5e5"
        alt="Theo Marchetti"
      />
      <span class="avatar-fallback">TM</span>
    </span>
    <span class="avatar">
      <img
        class="avatar-image"
        src="https://images.unsplash.com/photo-1573497019236-17f8177b81e8?w=640&h=640&fit=facearea&facepad=3.2&auto=format&q=100&bg-remove=true&bg=e5e5e5"
        alt="Maya Santoso"
      />
      <span class="avatar-fallback">MS</span>
    </span>
    <span class="avatar-group-count" data-i18n="moreUsers">+٣</span>
  </span>
</div>
 
<script>
  const translations = {
    ar: { dir: "rtl", moreUsers: "+٣" },
    he: { dir: "rtl", moreUsers: "+3" },
    en: { dir: "ltr", moreUsers: "+3" },
  };
  window.addEventListener("message", (e) => {
    const t = translations[e.data?.lang];
    if (e.data?.type !== "sp-language" || !t) return;
    document.getElementById("avatar-rtl-demo").dir = t.dir;
    document.querySelectorAll("[data-i18n]").forEach((el) => {
      el.textContent = t[el.dataset.i18n];
    });
  });
</script>