Avatar

Avatar is used to represent a user or group of users using an image. It can also convey additional information about the user like login status, busy, away etc. The avatar can also be used as a link to a profile page.

Design Hints

Avatars are a great way to personalize the user experience. Avatars can be used to convey states of the user (available, busy, away, logged out, etc.) . A common use pattern for avatar is that it acts as a link to a profile page, but new users may not be aware of this and may need hints.

Accessiblity Hints

Ensure that the avatar image has an alternative text which describes the user. If using an avatar as a link, ensure that the link has a descriptive text which can be read only by screen readers or using proper aria-label. If user state is conveyed using the avatar, ensure that the state is also conveyed in a way that can be read by screen readers .

Simple Avatar

A set of default avatars which can be used. The first one is a default avatar, the second one is a placeholder avatar, the third one is an avatar with name. The second row has the same types of avatars but with links.

<div class="mb-6 flex space-x-4">
  <div class="h-10 w-10 overflow-hidden rounded-full">
    <img width="40" height="40" src="/avatar.jpg" alt="Display" />
  </div>

  <div
    role="img"
    aria-label="Display Placeholder"
    class="h-10 w-10 overflow-hidden rounded-full bg-gray-300 dark:bg-gray-800"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="40"
      height="40"
      viewBox="0 0 24 24"
      class="text-indigo-700 dark:text-indigo-300"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
      ></path>
    </svg>
  </div>

  <div
    role="img"
    aria-label="Display Initials RX"
    class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 dark:bg-gray-800"
  >
    <span
      class="text-xl font-semibold leading-none text-indigo-700 dark:text-indigo-300"
      >RX</span
    >
  </div>
</div>
<div class="flex space-x-4">
  <a
    href="#"
    aria-label="To Profile Page"
    title="To Profile Page"
    class="relative h-10 w-10 cursor-pointer overflow-hidden rounded-full outline-offset-2 outline-gray-800 focus:outline-2 dark:outline-zinc-500"
  >
    <img
      class="inline-block overflow-hidden rounded-full"
      src="/avatar.jpg"
      alt="Profile"
      width="40"
      height="40"
    />
  </a>
  <a
    href="#"
    aria-label="To Profile Page With The User Display Image Placeholder"
    title="To Profile Page"
    class="relative h-10 w-10 cursor-pointer overflow-hidden rounded-full bg-gray-300 outline-offset-2 outline-gray-800 focus:outline-2 dark:bg-gray-800 dark:outline-zinc-500"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="40"
      height="40"
      viewBox="0 0 24 24"
      class="text-indigo-700 dark:text-indigo-300"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
      ></path>
    </svg>
  </a>
  <a
    href="#"
    aria-label="To Profile Page With The User Initials RX"
    title="To Profile Page"
    class="relative inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-gray-300 outline-offset-2 outline-gray-800 focus:outline-2 dark:bg-gray-800 dark:outline-zinc-500"
  >
    <span
      aria-hidden="true"
      class="text-xl font-semibold leading-none text-indigo-700 dark:text-indigo-300"
      >RX</span
    >
  </a>
</div>

<div class="mb-6 flex space-x-4">
  <div class="h-10 w-10 overflow-hidden rounded-full">
    <img width="40" height="40" src="/avatar.jpg" alt="Display" />
  </div>

  <div
    role="img"
    aria-label="Display Placeholder"
    class="h-10 w-10 overflow-hidden rounded-full bg-gray-300 dark:bg-gray-800"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="40"
      height="40"
      viewBox="0 0 24 24"
      class="text-indigo-700 dark:text-indigo-300"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
      ></path>
    </svg>
  </div>

  <div
    role="img"
    aria-label="Display Initials RX"
    class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 dark:bg-gray-800"
  >
    <span
      class="text-xl font-semibold leading-none text-indigo-700 dark:text-indigo-300"
      >RX</span
    >
  </div>
</div>
<div class="flex space-x-4">
  <a
    href="#"
    aria-label="To Profile Page"
    title="To Profile Page"
    class="relative h-10 w-10 cursor-pointer overflow-hidden rounded-full outline-offset-2 outline-gray-800 focus:outline-2 dark:outline-zinc-500"
  >
    <img
      class="inline-block overflow-hidden rounded-full"
      src="/avatar.jpg"
      alt="Profile"
      width="40"
      height="40"
    />
  </a>
  <a
    href="#"
    aria-label="To Profile Page With The User Display Image Placeholder"
    title="To Profile Page"
    class="relative h-10 w-10 cursor-pointer overflow-hidden rounded-full bg-gray-300 outline-offset-2 outline-gray-800 focus:outline-2 dark:bg-gray-800 dark:outline-zinc-500"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="40"
      height="40"
      viewBox="0 0 24 24"
      class="text-indigo-700 dark:text-indigo-300"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
      ></path>
    </svg>
  </a>
  <a
    href="#"
    aria-label="To Profile Page With The User Initials RX"
    title="To Profile Page"
    class="relative inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-gray-300 outline-offset-2 outline-gray-800 focus:outline-2 dark:bg-gray-800 dark:outline-zinc-500"
  >
    <span
      aria-hidden="true"
      class="text-xl font-semibold leading-none text-indigo-700 dark:text-indigo-300"
      >RX</span
    >
  </a>
</div>

Avatar with State

The simple avatar but with extra state information. The states available out of the box are

Available - green
Busy - red
Away - yellow

<div class="mb-6 flex space-x-4">
  <div
    role="img"
    class="relative"
    aria-label="State Available and the User Display"
  >
    <img
      class="h-10 w-10 overflow-hidden rounded-full"
      width="40"
      height="40"
      src="/avatar.jpg"
      aria-hidden="true"
      alt="Display"
    />
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-green-600 dark:bg-green-400"
      aria-hidden="true"></span>
  </div>

  <div
    role="img"
    aria-label="State Busy and The User Placeholder"
    class="relative"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="40"
      height="40"
      viewBox="0 0 24 24"
      class="h-10 w-10 overflow-hidden rounded-full bg-gray-300 text-indigo-700 dark:bg-gray-800 dark:text-indigo-300"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
      ></path>
    </svg>
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-red-600 dark:bg-red-500"
      aria-hidden="true"></span>
  </div>

  <div
    role="img"
    aria-label="State Away and The User Initials RX"
    class="relative inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 dark:bg-gray-800"
  >
    <span
      aria-hidden="true"
      class="text-xl font-semibold leading-none text-indigo-700 dark:text-indigo-300"
      >RX</span
    >
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-yellow-500 dark:bg-yellow-400"
      aria-hidden="true"></span>
  </div>
</div>
<div class="flex space-x-4">
  <a
    href="#"
    aria-label="To Profile Page With State Available and The User Display Image"
    title="To Profile Page"
    class="relative h-10 w-10 cursor-pointer rounded-full outline-offset-2 outline-gray-800 focus:outline-2 dark:outline-zinc-500"
  >
    <img
      class="inline-block overflow-hidden rounded-full"
      src="/avatar.jpg"
      aria-hidden="true"
      alt="To Profile Page"
      title="To Profile Page"
      width="40"
      height="40"
    />
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-green-600 dark:bg-green-400"
      aria-hidden="true"></span>
  </a>
  <a
    href="#"
    aria-label="To Profile Page With State Busy and The User Display Image Placeholder"
    title="To Profile Page"
    class="relative h-10 w-10 cursor-pointer rounded-full bg-gray-300 outline-offset-2 outline-gray-800 focus:outline-2 dark:bg-gray-800 dark:outline-zinc-500"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="40"
      height="40"
      viewBox="0 0 24 24"
      class="text-indigo-700 dark:text-indigo-300"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
      ></path>
    </svg>
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-red-600 dark:bg-red-500"
      aria-hidden="true"></span>
  </a>
  <a
    href="#"
    aria-label="To Profile Page With State Away and The User Initials RX Image"
    title="To Profile Page"
    class="relative flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-gray-300 outline-offset-2 outline-gray-800 focus:outline-2 dark:bg-gray-800 dark:outline-zinc-500"
  >
    <span
      aria-hidden="true"
      class="text-xl font-semibold leading-none text-indigo-700 dark:text-indigo-300"
      >RX</span
    >
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-yellow-500 dark:bg-yellow-400"
      aria-hidden="true"></span>
  </a>
</div>

<div class="mb-6 flex space-x-4">
  <div
    role="img"
    class="relative"
    aria-label="State Available and the User Display"
  >
    <img
      class="h-10 w-10 overflow-hidden rounded-full"
      width="40"
      height="40"
      src="/avatar.jpg"
      aria-hidden="true"
      alt="Display"
    />
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-green-600 dark:bg-green-400"
      aria-hidden="true"></span>
  </div>

  <div
    role="img"
    aria-label="State Busy and The User Placeholder"
    class="relative"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="40"
      height="40"
      viewBox="0 0 24 24"
      class="h-10 w-10 overflow-hidden rounded-full bg-gray-300 text-indigo-700 dark:bg-gray-800 dark:text-indigo-300"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
      ></path>
    </svg>
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-red-600 dark:bg-red-500"
      aria-hidden="true"></span>
  </div>

  <div
    role="img"
    aria-label="State Away and The User Initials RX"
    class="relative inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 dark:bg-gray-800"
  >
    <span
      aria-hidden="true"
      class="text-xl font-semibold leading-none text-indigo-700 dark:text-indigo-300"
      >RX</span
    >
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-yellow-500 dark:bg-yellow-400"
      aria-hidden="true"></span>
  </div>
</div>
<div class="flex space-x-4">
  <a
    href="#"
    aria-label="To Profile Page With State Available and The User Display Image"
    title="To Profile Page"
    class="relative h-10 w-10 cursor-pointer rounded-full outline-offset-2 outline-gray-800 focus:outline-2 dark:outline-zinc-500"
  >
    <img
      class="inline-block overflow-hidden rounded-full"
      src="/avatar.jpg"
      aria-hidden="true"
      alt="To Profile Page"
      title="To Profile Page"
      width="40"
      height="40"
    />
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-green-600 dark:bg-green-400"
      aria-hidden="true"></span>
  </a>
  <a
    href="#"
    aria-label="To Profile Page With State Busy and The User Display Image Placeholder"
    title="To Profile Page"
    class="relative h-10 w-10 cursor-pointer rounded-full bg-gray-300 outline-offset-2 outline-gray-800 focus:outline-2 dark:bg-gray-800 dark:outline-zinc-500"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="40"
      height="40"
      viewBox="0 0 24 24"
      class="text-indigo-700 dark:text-indigo-300"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
      ></path>
    </svg>
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-red-600 dark:bg-red-500"
      aria-hidden="true"></span>
  </a>
  <a
    href="#"
    aria-label="To Profile Page With State Away and The User Initials RX Image"
    title="To Profile Page"
    class="relative flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-gray-300 outline-offset-2 outline-gray-800 focus:outline-2 dark:bg-gray-800 dark:outline-zinc-500"
  >
    <span
      aria-hidden="true"
      class="text-xl font-semibold leading-none text-indigo-700 dark:text-indigo-300"
      >RX</span
    >
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-yellow-500 dark:bg-yellow-400"
      aria-hidden="true"></span>
  </a>
</div>

Avatar with State And Ring

These avatars are similar to the previous one, but an additional ring is added to the avatar.

<div class="mb-6 flex space-x-4">
  <div
    role="img"
    class="relative"
    aria-label="State Available and  the User Display"
  >
    <img
      class="h-10 w-10 overflow-hidden rounded-full ring-2 ring-green-600 dark:ring-green-400"
      width="40"
      height="40"
      src="/avatar.jpg"
      aria-hidden="true"
      alt="Display"
    />
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-green-600 dark:bg-green-400"
      aria-hidden="true"></span>
  </div>

  <div
    role="img"
    aria-label="State Busy and The User Placeholder"
    class="relative"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="40"
      height="40"
      viewBox="0 0 24 24"
      class="h-10 w-10 overflow-hidden rounded-full bg-gray-300 text-indigo-700 ring-2 ring-red-600 dark:bg-gray-800 dark:text-indigo-300 dark:ring-red-500"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
      ></path>
    </svg>
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-red-600 dark:bg-red-500"
      aria-hidden="true"></span>
  </div>

  <div
    role="img"
    aria-label="State Away and The User Initials RX"
    class="relative inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 ring-2 ring-yellow-500 dark:bg-gray-800 dark:ring-yellow-400"
  >
    <span
      aria-hidden="true"
      class="text-xl font-semibold leading-none text-indigo-700 dark:text-indigo-300"
      >RX</span
    >
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-yellow-500 dark:bg-yellow-400"
      aria-hidden="true"></span>
  </div>
</div>
<div class="flex space-x-4">
  <a
    href="#"
    aria-label="To Profile Page With State Available and The User Display Image"
    title="To Profile Page"
    class="relative h-10 w-10 cursor-pointer rounded-full outline-offset-2 outline-gray-800 ring-2 ring-green-600 focus:outline-2 dark:outline-zinc-500 dark:ring-green-400"
  >
    <img
      class="inline-block overflow-hidden rounded-full"
      src="/avatar.jpg"
      aria-hidden="true"
      alt="To Profile Page"
      title="To Profile Page"
      width="40"
      height="40"
    />
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-green-600 dark:bg-green-400"
      aria-hidden="true"></span>
  </a>
  <a
    href="#"
    aria-label="To Profile Page With State Busy and The User Display Image Placeholder"
    title="To Profile Page"
    class="relative h-10 w-10 cursor-pointer rounded-full bg-gray-300 outline-offset-2 outline-gray-800 ring-2 ring-red-600 focus:outline-2 dark:bg-gray-800 dark:outline-zinc-500 dark:ring-red-500"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="40"
      height="40"
      viewBox="0 0 24 24"
      class="text-indigo-700 dark:text-indigo-300"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
      ></path>
    </svg>
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-red-600 dark:bg-red-500"
      aria-hidden="true"></span>
  </a>
  <a
    href="#"
    aria-label="To Profile Page With State Away and The User Initials RX"
    title="To Profile Page"
    class="relative inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-gray-300 outline-offset-2 outline-gray-800 ring-2 ring-yellow-500 focus:outline-2 dark:bg-gray-800 dark:outline-zinc-500 dark:ring-yellow-400"
  >
    <span
      aria-hidden="true"
      class="text-xl font-semibold leading-none text-indigo-700 dark:text-indigo-300"
      >RX</span
    >
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-yellow-500 dark:bg-yellow-400"
      aria-hidden="true"></span>
  </a>
</div>

<div class="mb-6 flex space-x-4">
  <div
    role="img"
    class="relative"
    aria-label="State Available and  the User Display"
  >
    <img
      class="h-10 w-10 overflow-hidden rounded-full ring-2 ring-green-600 dark:ring-green-400"
      width="40"
      height="40"
      src="/avatar.jpg"
      aria-hidden="true"
      alt="Display"
    />
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-green-600 dark:bg-green-400"
      aria-hidden="true"></span>
  </div>

  <div
    role="img"
    aria-label="State Busy and The User Placeholder"
    class="relative"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="40"
      height="40"
      viewBox="0 0 24 24"
      class="h-10 w-10 overflow-hidden rounded-full bg-gray-300 text-indigo-700 ring-2 ring-red-600 dark:bg-gray-800 dark:text-indigo-300 dark:ring-red-500"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
      ></path>
    </svg>
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-red-600 dark:bg-red-500"
      aria-hidden="true"></span>
  </div>

  <div
    role="img"
    aria-label="State Away and The User Initials RX"
    class="relative inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-300 ring-2 ring-yellow-500 dark:bg-gray-800 dark:ring-yellow-400"
  >
    <span
      aria-hidden="true"
      class="text-xl font-semibold leading-none text-indigo-700 dark:text-indigo-300"
      >RX</span
    >
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-yellow-500 dark:bg-yellow-400"
      aria-hidden="true"></span>
  </div>
</div>
<div class="flex space-x-4">
  <a
    href="#"
    aria-label="To Profile Page With State Available and The User Display Image"
    title="To Profile Page"
    class="relative h-10 w-10 cursor-pointer rounded-full outline-offset-2 outline-gray-800 ring-2 ring-green-600 focus:outline-2 dark:outline-zinc-500 dark:ring-green-400"
  >
    <img
      class="inline-block overflow-hidden rounded-full"
      src="/avatar.jpg"
      aria-hidden="true"
      alt="To Profile Page"
      title="To Profile Page"
      width="40"
      height="40"
    />
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-green-600 dark:bg-green-400"
      aria-hidden="true"></span>
  </a>
  <a
    href="#"
    aria-label="To Profile Page With State Busy and The User Display Image Placeholder"
    title="To Profile Page"
    class="relative h-10 w-10 cursor-pointer rounded-full bg-gray-300 outline-offset-2 outline-gray-800 ring-2 ring-red-600 focus:outline-2 dark:bg-gray-800 dark:outline-zinc-500 dark:ring-red-500"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="40"
      height="40"
      viewBox="0 0 24 24"
      class="text-indigo-700 dark:text-indigo-300"
      aria-hidden="true"
    >
      <path
        fill="currentColor"
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
      ></path>
    </svg>
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-red-600 dark:bg-red-500"
      aria-hidden="true"></span>
  </a>
  <a
    href="#"
    aria-label="To Profile Page With State Away and The User Initials RX"
    title="To Profile Page"
    class="relative inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-gray-300 outline-offset-2 outline-gray-800 ring-2 ring-yellow-500 focus:outline-2 dark:bg-gray-800 dark:outline-zinc-500 dark:ring-yellow-400"
  >
    <span
      aria-hidden="true"
      class="text-xl font-semibold leading-none text-indigo-700 dark:text-indigo-300"
      >RX</span
    >
    <span
      class="absolute left-7 top-0 h-3 w-3 rounded-full bg-yellow-500 dark:bg-yellow-400"
      aria-hidden="true"></span>
  </a>
</div>

Avatar Groups

The avatar group allows you to show multiple avatars stacked together in a group. Using every avatar in the avatar group as a link is not recommended since the clickable area is limited. The recommended approach is to show the list of people when the link/button ( the +22 link in the example below) on the avatar group is clicked from which further actions can be taken.

+22

<div class="my-6 flex -space-x-3">
  <div
    role="img"
    class="relative flex hover:z-20 hover:scale-110 motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out"
    aria-label="State Available for User Jane"
    title="Jane"
  >
    <img
      class="h-10 w-10 overflow-hidden rounded-full ring-2 ring-green-600 dark:ring-green-400"
      width="40"
      height="40"
      src="/avatar.jpg"
      aria-hidden="true"
      alt="Jane"
    />
  </div>
  <div
    role="img"
    class="relative flex hover:z-20 hover:scale-110 motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out"
    aria-label="State Busy for User Hari"
    title="Hari"
  >
    <img
      class="h-10 w-10 overflow-hidden rounded-full ring-2 ring-red-600 dark:ring-red-500"
      width="40"
      height="40"
      src="/avatar2.jpg"
      aria-hidden="true"
      alt="Hari"
    />
  </div>
  <div
    role="img"
    class="relative flex hover:z-20 hover:scale-110 motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out"
    aria-label="State Away for User John"
    title="John"
  >
    <img
      class="h-10 w-10 overflow-hidden rounded-full ring-2 ring-yellow-500 dark:ring-yellow-400"
      width="40"
      height="40"
      src="/avatar3.jpg"
      aria-hidden="true"
      alt="John"
    />
  </div>

  <div
    role="img"
    class="relative flex hover:z-20 hover:scale-110 motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out"
    aria-label="State Available for User Emily"
    title="Emily"
  >
    <img
      class="h-10 w-10 overflow-hidden rounded-full ring-2 ring-green-600 dark:ring-green-400"
      width="40"
      height="40"
      src="/avatar4.jpg"
      aria-hidden="true"
      alt="Emily"
    />
  </div>

  <a
    href="#"
    title="22 more users available"
    class="z-[1] flex h-[42px] w-[42px] items-center justify-center rounded-full bg-gray-400 text-black outline-offset-2 outline-gray-800 hover:z-20 hover:scale-110 focus:outline-2 motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out dark:bg-gray-800 dark:text-white dark:outline-zinc-500"
  >
    +22 <span class="sr-only">more users</span>
  </a>
</div>

<div class="my-6 flex -space-x-3">
  <div
    role="img"
    class="relative flex hover:z-20 hover:scale-110 motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out"
    aria-label="State Available for User Jane"
    title="Jane"
  >
    <img
      class="h-10 w-10 overflow-hidden rounded-full ring-2 ring-green-600 dark:ring-green-400"
      width="40"
      height="40"
      src="/avatar.jpg"
      aria-hidden="true"
      alt="Jane"
    />
  </div>
  <div
    role="img"
    class="relative flex hover:z-20 hover:scale-110 motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out"
    aria-label="State Busy for User Hari"
    title="Hari"
  >
    <img
      class="h-10 w-10 overflow-hidden rounded-full ring-2 ring-red-600 dark:ring-red-500"
      width="40"
      height="40"
      src="/avatar2.jpg"
      aria-hidden="true"
      alt="Hari"
    />
  </div>
  <div
    role="img"
    class="relative flex hover:z-20 hover:scale-110 motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out"
    aria-label="State Away for User John"
    title="John"
  >
    <img
      class="h-10 w-10 overflow-hidden rounded-full ring-2 ring-yellow-500 dark:ring-yellow-400"
      width="40"
      height="40"
      src="/avatar3.jpg"
      aria-hidden="true"
      alt="John"
    />
  </div>

  <div
    role="img"
    class="relative flex hover:z-20 hover:scale-110 motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out"
    aria-label="State Available for User Emily"
    title="Emily"
  >
    <img
      class="h-10 w-10 overflow-hidden rounded-full ring-2 ring-green-600 dark:ring-green-400"
      width="40"
      height="40"
      src="/avatar4.jpg"
      aria-hidden="true"
      alt="Emily"
    />
  </div>

  <a
    href="#"
    title="22 more users available"
    class="z-[1] flex h-[42px] w-[42px] items-center justify-center rounded-full bg-gray-400 text-black outline-offset-2 outline-gray-800 hover:z-20 hover:scale-110 focus:outline-2 motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out dark:bg-gray-800 dark:text-white dark:outline-zinc-500"
  >
    +22 <span class="sr-only">more users</span>
  </a>
</div>

Accessibility Testing Status

Component	NVDA	Windows Narrator	WAVE	Axe	IBM Equal Access
Simple Avatar	Yes	Yes	Yes	Yes	Yes
Avatar with State	Yes	Yes	Yes	Yes	Yes
Avatar with State And Ring	Yes	Yes	Yes	Yes	Yes
Avatar Groups	Yes	Yes	Yes	Yes	Yes

Note that there are no defined accessibility guidelines for the avatar pattern described by WAI-ARIA APG, so ravixUI implements accessbility for avatars keeping in mind the patterns for the role=img and the accessbility patterns for <a> tag where appropriate.