Avatars

An Avatar is a graphical representation of a user. The user can be represented by an image, an icon or the user initials. Avatars can provide additional informations like the user status or user notifications.

Variations

Rounded avatars

Copy as:HTMLReact

copydone

CPcopydone

<!-- Component: Rounded base sized basic text avatar -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded bg-emerald-500">
  CP
</a>
<!-- End Rounded base sized basic text avatar -->

Rounded avatars with borders

Copy as:HTMLReact

copydone

CPcopydone

<!-- Component: Rounded base sized text avatar with borders -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white border-2 border-white rounded bg-emerald-500">
  CP
</a>
<!-- End Rounded base sized text avatar with borders -->

Rounded avatars with top badge

Copy as:HTMLReact

7 copydone

copydone

7 copydone

copydone

CP7 copydone

CPcopydone

<!-- Component: Rounded base sized text avatar with top right badge -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded bg-emerald-500">
  CP
  <span class="absolute -top-2.5 -right-2.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 px-1.5 text-sm text-white">
    7
    <span class="sr-only"> new emails </span>
  </span>
</a>
<!-- End Rounded base sized text avatar with top right badge -->

Rounded avatars with bottom badge

Copy as:HTMLReact

7 copydone

copydone

7 copydone

copydone

CP7 copydone

CPcopydone

<!-- Component: Rounded base sized text avatar with bottom right badge -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded bg-emerald-500">
  CP
  <span class="absolute -bottom-2 -right-2 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 px-1.5 text-sm text-white">
    7
    <span class="sr-only"> new emails </span>
  </span>
</a>
<!-- End Rounded base sized text avatar with bottom right badge -->

Rounded avatars with top indicator

Copy as:HTMLReact

copydone

CPcopydone

<!-- Component: Rounded base sized text avatar with top right indicator badge -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded bg-emerald-500">
  CP
  <span class="absolute inline-flex items-center justify-center gap-1 p-1 text-sm text-white bg-pink-500 border-2 border-white rounded-full -top-1 -right-1">
    <span class="sr-only"> 7 new emails </span>
  </span>
</a>
<!-- End Rounded base sized text avatar with top right indicator badge -->

Rounded avatars with bottom indicator

Copy as:HTMLReact

copydone

CPcopydone

<!-- Component: Rounded base sized text avatar with bottom right indicator badge -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded bg-emerald-500">
  CP
  <span class="absolute inline-flex items-center justify-center gap-1 p-1 text-sm text-white bg-pink-500 border-2 border-white rounded-full -bottom-1 -right-1">
    <span class="sr-only"> 7 new emails </span>
  </span>
</a>
<!-- End Rounded base sized text avatar with bottom right indicator badge -->

Rounded avatars with tooltip

Copy as:HTMLReact

copydone

CPcopydone

<!-- Component: Rounded base sized text avatar with tooltips -->
<span class="relative overflow-hidden cursor-pointer group hover:overflow-visible" aria-describedby="tooltip-05">
  <!-- Start Tooltip trigger -->
  <a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded bg-emerald-500 ">
    CP
  </a>
  <!-- End Tooltip trigger -->
  <span role="tooltip" id="tooltip-05" class="invisible absolute bottom-full left-1/2 z-10 mb-2 w-[89px] -translate-x-1/2 rounded bg-slate-700 p-2 text-xs text-white opacity-0 transition-all before:invisible before:absolute before:left-1/2 before:top-full before:z-10 before:mb-2 before:-ml-1 before:border-x-4 before:border-t-4 before:border-x-transparent before:border-t-slate-700 before:opacity-0 before:transition-all before:content-[''] group-hover:visible group-hover:block group-hover:opacity-100 group-hover:before:visible group-hover:before:opacity-100">
    User's Name
  </span>
</span>
<!-- End Rounded base sized text avatar with tooltips -->

Full rounded avatars

Copy as:HTMLReact

copydone

CPcopydone

<!-- Component: Rounded full base sized basic text avatar -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded-full bg-emerald-500"> CP </a>
<!-- End Rounded base sized basic text avatar -->

Full rounded avatars with borders

Copy as:HTMLReact

copydone

CPcopydone

<!-- Component: Rounded full base sized text avatar with borders -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white border-2 border-white rounded-full bg-emerald-500"> CP </a>
<!-- End Rounded base sized text avatar with borders -->

Full rounded avatars with top badge

Copy as:HTMLReact

7 copydone

copydone

7 copydone

copydone

CP7 copydone

CPcopydone

<!-- Component: Rounded full base sized text avatar with top right badge -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded-full bg-emerald-500">
  CP
  <span class="absolute -top-1.5 -right-1.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 px-1.5 text-sm text-white">
    7
    <span class="sr-only"> new emails </span>
  </span>
</a>
<!-- End Rounded base sized text avatar with top right badge -->

Full rounded avatars with bottom badge

Copy as:HTMLReact

7 copydone

copydone

7 copydone

copydone

CP7 copydone

CPcopydone

<!-- Component: Rounded full base sized text avatar with bottom right badge -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded-full bg-emerald-500">
  CP
  <span class="absolute -bottom-1.5 -right-1.5 inline-flex items-center justify-center gap-1 rounded-full border-2 border-white bg-pink-500 px-1.5 text-sm text-white">
    7
    <span class="sr-only"> new emails </span>
  </span>
</a>
<!-- End Rounded base sized text avatar with bottom right badge -->

Full rounded avatars with top indicator

Copy as:HTMLReact

copydone

CPcopydone

<!-- Component: Rounded full base sized text avatar with top right indicator badge -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded-full bg-emerald-500">
  CP
  <span class="absolute top-0 right-0 inline-flex items-center justify-center gap-1 p-1 text-sm text-white bg-pink-500 border-2 border-white rounded-full">
    <span class="sr-only"> 7 new emails </span>
  </span>
</a>
<!-- End Rounded base sized text avatar with top right indicator badge -->

Full rounded avatars with bottom indicator

Copy as:HTMLReact

copydone

CPcopydone

<!-- Component: Rounded full base sized text avatar with bottom right indicator badge -->
<a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded-full bg-emerald-500">
  CP
  <span class="absolute bottom-0 right-0 inline-flex items-center justify-center gap-1 p-1 text-sm text-white bg-pink-500 border-2 border-white rounded-full">
    <span class="sr-only"> 7 new emails </span>
  </span>
</a>
<!-- End Rounded base sized text avatar with bottom right indicator badge -->

Full rounded avatars with tooltip

Copy as:HTMLReact

copydone

CPcopydone

<!-- Component: Rounded full base sized text avatar with tooltips -->
<span class="relative overflow-hidden cursor-pointer group hover:overflow-visible" aria-describedby="tooltip-05">
  <!-- Start Tooltip trigger -->
  <a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded-full bg-emerald-500"> CP </a>
  <!-- End Tooltip trigger -->
  <span role="tooltip" id="tooltip-05" class="invisible absolute bottom-full left-1/2 z-10 mb-2 w-[89px] -translate-x-1/2 rounded bg-slate-700 p-2 text-xs text-white opacity-0 transition-all before:invisible before:absolute before:left-1/2 before:top-full before:z-10 before:mb-2 before:-ml-1 before:border-x-4 before:border-t-4 before:border-x-transparent before:border-t-slate-700 before:opacity-0 before:transition-all before:content-[''] group-hover:visible group-hover:block group-hover:opacity-100 group-hover:before:visible group-hover:before:opacity-100"> User's Name </span>
</span>
<!-- End Rounded base sized text avatar with tooltips -->

Grouped Avatars

Copy as:HTMLReact

Basic

copydone

Compact

copydone

With tooltip

copydone

<!-- Component: Rounded full base sized basic grouped avatars -->
<div class="flex items-center justify-center w-full p-10">
  <div class="flex -space-x-2">
    <a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-white rounded-full">
      <img src="https://i.pravatar.cc/40?img=31" alt="user name" title="user name" width="40" height="40" class="max-w-full border-2 border-white rounded-full" />
    </a>
    <a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-white border-2 border-white rounded-full bg-emerald-500">
      JL
    </a>
    <a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-white rounded-full">
      <img src="https://i.pravatar.cc/40?img=33" alt="user name" title="user name" width="40" height="40" class="max-w-full border-2 border-white rounded-full" />
    </a>
    <a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-lg text-white rounded-full bg-emerald-500">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="title-01 desc-01" role="graphics-symbol">
        <title id="title-01">User Icon</title>
        <desc id="desc-01">User icon associated with a particular user account</desc>
        <path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
      </svg>
    </a>
    <a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-white rounded-full">
      <img src="https://i.pravatar.cc/40?img=34" alt="user name" title="user name" width="40" height="40" class="max-w-full border-2 border-white rounded-full" />
    </a>
    <a href="#" class="relative inline-flex items-center justify-center w-10 h-10 text-sm border-2 border-white rounded-full bg-slate-200 text-slate-500">
      +4
    </a>
  </div>
</div>
<!-- End Rounded full base sized basic grouped avatars -->

Usage

Use the Avatar Component as a graphical representation of a person through a profile picture or image, an icon, or a string with initials.

Specs

Avatars comes in 2 styles, base rounded - with 0.25rem (4px) border-radius, and full rounded corners. They also come in 4 sizes (xs, sm, base and lg) and they can contain an image, icon or initials to represent the user, along with badge indicator and toolitps:

Extra Small: 1.5rem (24px) width and height with 1rem (16px) icon size (for the icon version and 0.75rem (12px) font size (for the version with the initials). The xs avatar size uses the xs size badge
Small: 2rem (32px) width and height with 1.25rem (20px) icon size (for the icon version) and 1rem (16px) font size (for the version with the initials). The small avatar size uses the sm size badge
Base: 2.5rem (40px) width and height with 1.5rem (24px) icon size (for the icon version) and 1.125rem (18px) font size (for the version with the initials). The small avatar size uses the base size badge
Large: 3rem (48px) width and height with 1.5rem (24px) icon size (for the icon version) and 1.125rem (18px) font size (for the version with the initials). The small avatar size uses the base size badge

Accessibility notes

To make the avatars accessible make sure that:

Image avatars: provide an alt/title attribute that corresponds to the user.
Icon avatars: provide an aria-labelledby attribute along with a set of <title> and <desc> attributes for your SVG to describe the user.

Avatars

Variations

Rounded avatars

Rounded avatars with borders

Rounded avatars with top badge

Rounded avatars with bottom badge

Rounded avatars with top indicator

Rounded avatars with bottom indicator

Rounded avatars with tooltip

Full rounded avatars

Full rounded avatars with borders

Full rounded avatars with top badge

Full rounded avatars with bottom badge

Full rounded avatars with top indicator

Full rounded avatars with bottom indicator

Full rounded avatars with tooltip

Grouped Avatars

Basic

Compact

With tooltip

Usage

Specs

Accessibility notes

Check out the latest release!