Application toolkit - Avatar

Examples for opting different size of image sizes.

Circular avatars

Use the .rounded-full utility class to make avatars circular.

Open this circular avatar example in new window
Copy circular avatar code 
<div class="flex flex-wrap gap-2 items-center">
  <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
  <img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
  <img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
  <img class="inline-block h-[3.875rem] w-[3.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
</div>
Close circular avatar code

Rounded avatars

Use the border radius utility classes to make avatars more rounded.

Open this rounded avatar example in new window
Copy rounded avatar code 
<div class="flex flex-wrap gap-2 items-center">
  <img class="inline-block h-8 w-8 rounded-md ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
  <img class="inline-block h-[2.375rem] w-[2.375rem] rounded-md ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
  <img class="inline-block h-[2.875rem] w-[2.875rem] rounded-md ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
  <img class="inline-block h-[3.875rem] w-[3.875rem] rounded-md ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
</div>
Close rounded avatar code

Circular avatars with top status

Circular avatars with all kinds of status indicators.

Open this circular with top status avatar example in new window
Copy circular with top status avatar code 
<div class="flex flex-wrap gap-2 items-center">
  <div class="relative inline-block">
    <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute top-0 right-0 block h-1.5 w-1.5 rounded-full ring-2 ring-white bg-gray-400"></span>
  </div>
  <div class="relative inline-block">
    <img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white bg-red-400"></span>
  </div>
  <div class="relative inline-block">
    <img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute top-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white bg-green-400"></span>
  </div>
  <div class="relative inline-block">
    <img class="inline-block h-[3.875rem] w-[3.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute top-0 right-0 block h-3.5 w-3.5 rounded-full ring-2 ring-white bg-orange-400"></span>
  </div>
</div>
Close circular with top status avatar code

Rounded avatars with top status

Rounded avatars with all kinds of status indicators.

Open this rounded with top status avatar example in new window
Copy rounded with top status avatar code 
<div class="flex flex-wrap gap-2 items-center">
  <div class="relative inline-block">
    <img class="inline-block h-8 w-8 rounded-md ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute top-0 right-0 block h-1.5 w-1.5 rounded-full transform -translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-gray-400"></span>
  </div>
  <div class="relative inline-block">
    <img class="inline-block h-[2.375rem] w-[2.375rem] rounded-md ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute top-0 right-0 block h-2.5 w-2.5 rounded-full transform -translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-red-400"></span>
  </div>
  <div class="relative inline-block">
    <img class="inline-block h-[2.875rem] w-[2.875rem] rounded-md ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute top-0 right-0 block h-3 w-3 rounded-full transform -translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-green-400"></span>
  </div>
  <div class="relative inline-block">
    <img class="inline-block h-[3.875rem] w-[3.875rem] rounded-md ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute top-0 right-0 block h-3.5 w-3.5 rounded-full transform -translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-orange-400"></span>
  </div>
</div>
Close rounded with top status avatar code

Circular avatars with bottom status

Circular avatars with all kinds of status indicators.

Open this circular with bottom status avatar example in new window
Copy circular with bottom status avatar code 
<div class="flex flex-wrap gap-2 items-center">
  <div class="relative inline-block">
    <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute bottom-0 right-0 block h-1.5 w-1.5 rounded-full ring-2 ring-white bg-gray-400"></span>
  </div>
  <div class="relative inline-block">
    <img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white bg-red-400"></span>
  </div>
  <div class="relative inline-block">
    <img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white bg-green-400"></span>
  </div>
  <div class="relative inline-block">
    <img class="inline-block h-[3.875rem] w-[3.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute bottom-0 right-0 block h-3.5 w-3.5 rounded-full ring-2 ring-white bg-orange-400"></span>
  </div>
</div>
Close circular with bottom status avatar code

Rounded avatars with bottom status

Rounded avatars with all kinds of status indicators.

Open this rounded with bottom status avatar example in new window
Copy rounded with bottom status avatar code 
<div class="flex flex-wrap gap-2 items-center">
  <div class="relative inline-block">
    <img class="inline-block h-8 w-8 rounded-md ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute bottom-0 right-0 block h-1.5 w-1.5 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-gray-400"></span>
  </div>
  <div class="relative inline-block">
    <img class="inline-block h-[2.375rem] w-[2.375rem] rounded-md ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-red-400"></span>
  </div>
  <div class="relative inline-block">
    <img class="inline-block h-[2.875rem] w-[2.875rem] rounded-md ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-green-400"></span>
  </div>
  <div class="relative inline-block">
    <img class="inline-block h-[3.875rem] w-[3.875rem] rounded-md ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute bottom-0 right-0 block h-3.5 w-3.5 rounded-full transform translate-y-1/2 translate-x-1/2 ring-2 ring-white bg-orange-400"></span>
  </div>
</div>
Close rounded with bottom status avatar code

Placeholder icon

Circular avatars with placeholder icon.

Open this placeholder icon avatar example in new window
Copy placeholder icon avatar code 
<div class="flex flex-wrap gap-2 items-center">
  <span class="inline-block h-6 w-6 bg-gray-100 rounded-full overflow-hidden">
    <svg class="h-full w-full text-gray-300" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="0.62854" y="0.359985" width="15" height="15" rx="7.5" fill="white" />
      <path d="M8.12421 7.20374C9.21151 7.20374 10.093 6.32229 10.093 5.23499C10.093 4.14767 9.21151 3.26624 8.12421 3.26624C7.0369 3.26624 6.15546 4.14767 6.15546 5.23499C6.15546 6.32229 7.0369 7.20374 8.12421 7.20374Z" fill="currentColor" />
      <path d="M11.818 10.5975C10.2992 12.6412 7.42106 13.0631 5.37731 11.5537C5.01171 11.2818 4.69296 10.9631 4.42107 10.5975C4.28982 10.4006 4.27107 10.1475 4.37419 9.94123L4.51482 9.65059C4.84296 8.95684 5.53671 8.51624 6.30546 8.51624H9.95231C10.7023 8.51624 11.3867 8.94749 11.7242 9.62249L11.8742 9.93184C11.968 10.1475 11.9586 10.4006 11.818 10.5975Z" fill="currentColor" />
    </svg>
  </span>

  <span class="inline-block h-[2.375rem] w-[2.375rem] bg-gray-100 rounded-full overflow-hidden">
    <svg class="h-full w-full text-gray-300" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="0.62854" y="0.359985" width="15" height="15" rx="7.5" fill="white" />
      <path d="M8.12421 7.20374C9.21151 7.20374 10.093 6.32229 10.093 5.23499C10.093 4.14767 9.21151 3.26624 8.12421 3.26624C7.0369 3.26624 6.15546 4.14767 6.15546 5.23499C6.15546 6.32229 7.0369 7.20374 8.12421 7.20374Z" fill="currentColor" />
      <path d="M11.818 10.5975C10.2992 12.6412 7.42106 13.0631 5.37731 11.5537C5.01171 11.2818 4.69296 10.9631 4.42107 10.5975C4.28982 10.4006 4.27107 10.1475 4.37419 9.94123L4.51482 9.65059C4.84296 8.95684 5.53671 8.51624 6.30546 8.51624H9.95231C10.7023 8.51624 11.3867 8.94749 11.7242 9.62249L11.8742 9.93184C11.968 10.1475 11.9586 10.4006 11.818 10.5975Z" fill="currentColor" />
    </svg>
  </span>

  <span class="inline-block h-[2.875rem] w-[2.875rem] bg-gray-100 rounded-full overflow-hidden">
    <svg class="h-full w-full text-gray-300" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="0.62854" y="0.359985" width="15" height="15" rx="7.5" fill="white" />
      <path d="M8.12421 7.20374C9.21151 7.20374 10.093 6.32229 10.093 5.23499C10.093 4.14767 9.21151 3.26624 8.12421 3.26624C7.0369 3.26624 6.15546 4.14767 6.15546 5.23499C6.15546 6.32229 7.0369 7.20374 8.12421 7.20374Z" fill="currentColor" />
      <path d="M11.818 10.5975C10.2992 12.6412 7.42106 13.0631 5.37731 11.5537C5.01171 11.2818 4.69296 10.9631 4.42107 10.5975C4.28982 10.4006 4.27107 10.1475 4.37419 9.94123L4.51482 9.65059C4.84296 8.95684 5.53671 8.51624 6.30546 8.51624H9.95231C10.7023 8.51624 11.3867 8.94749 11.7242 9.62249L11.8742 9.93184C11.968 10.1475 11.9586 10.4006 11.818 10.5975Z" fill="currentColor" />
    </svg>
  </span>

  <span class="inline-block h-[3.875rem] w-[3.875rem] bg-gray-100 rounded-full overflow-hidden">
    <svg class="h-full w-full text-gray-300" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect x="0.62854" y="0.359985" width="15" height="15" rx="7.5" fill="white" />
      <path d="M8.12421 7.20374C9.21151 7.20374 10.093 6.32229 10.093 5.23499C10.093 4.14767 9.21151 3.26624 8.12421 3.26624C7.0369 3.26624 6.15546 4.14767 6.15546 5.23499C6.15546 6.32229 7.0369 7.20374 8.12421 7.20374Z" fill="currentColor" />
      <path d="M11.818 10.5975C10.2992 12.6412 7.42106 13.0631 5.37731 11.5537C5.01171 11.2818 4.69296 10.9631 4.42107 10.5975C4.28982 10.4006 4.27107 10.1475 4.37419 9.94123L4.51482 9.65059C4.84296 8.95684 5.53671 8.51624 6.30546 8.51624H9.95231C10.7023 8.51624 11.3867 8.94749 11.7242 9.62249L11.8742 9.93184C11.968 10.1475 11.9586 10.4006 11.818 10.5975Z" fill="currentColor" />
    </svg>
  </span>
</div>
Close placeholder icon avatar code

Placeholder initials

Circular avatars with placeholder initials.

Open this placeholder initials avatar example in new window
Copy placeholder initials avatar code 
<div class="flex flex-wrap gap-2 items-center">
  <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-gray-600">
    <span class="text-xs font-medium text-white leading-none">AC</span>
  </span>

  <span class="inline-flex items-center justify-center h-[2.375rem] w-[2.375rem] rounded-full bg-gray-600">
    <span class="text-sm font-medium text-white leading-none">AC</span>
  </span>

  <span class="inline-flex items-center justify-center h-[2.875rem] w-[2.875rem] rounded-full bg-gray-600">
    <span class="font-medium text-white leading-none">AC</span>
  </span>

  <span class="inline-flex items-center justify-center h-[3.875rem] w-[3.875rem] rounded-full bg-gray-600">
    <span class="text-lg font-medium text-white leading-none">AC</span>
  </span>
</div>
Close placeholder initials avatar code

Displaying a tooltip

A tooltip can be used with an avatar to be displayed on focus or hover.

Open this with tooltip avatar example in new window
Copy with tooltip avatar code 
<div class="hs-tooltip inline-block">
  <a class="hs-tooltip-toggle relative inline-block" href="#">
    <img class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description">
    <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white bg-green-400"></span>
    <div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-gray-900 text-xs font-medium text-white rounded-md shadow-sm dark:bg-slate-700" role="tooltip">
      Maria Wanner is online
    </div>
  </a>
</div>
Close with tooltip avatar code

Media

Circular avatar with text.

Open this media avatar example in new window
Copy media avatar code 
<div class="flex-shrink-0 group block">
  <div class="flex items-center">
    <img class="inline-block flex-shrink-0 h-[3.875rem] w-[3.875rem] rounded-full" src="/assets/images/app-toolkit/avatar-1.jpg" alt="Image Description" />
    <div class="ml-3">
      <h3 class="font-semibold text-gray-800 dark:text-white">Maria Wanner</h3>
      <p class="text-sm font-medium text-gray-400">maria@gmail.com</p>
    </div>
  </div>
</div>
Close media avatar code