Tailwind CSS Avatar - Flowbite

Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes

The avatar component can be used as a visual identifier for a user profile on your website and you can use the examples from Flowbite to modify the styles and sizes of these components using the utility classes from Tailwind CSS.

Default avatar #

Use this example to create a circle and rounded avatar on an image element.

Edit on GitHub

<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="Rounded avatar">
<img class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="Default avatar">

Bordered #

Apply a border around the avatar component you can use the ring-{color} class from Tailwind CSS.

Edit on GitHub

<img class="w-10 h-10 p-1 rounded-full ring-2 ring-default" src="/docs/images/people/profile-picture-5.jpg" alt="Bordered avatar">

Placeholder icon #

Use this example as a placeholder icon for the user profile when there is no custom image available.

Edit on GitHub

<div class="relative w-10 h-10 overflow-hidden bg-neutral-secondary-medium rounded-full">
    <svg class="absolute w-12 h-12 text-body-subtle -left-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
</div>

Placeholder initials #

This example can be used to show the initials of the user’s first and last name as a placeholder when no profile picture is available.

Edit on GitHub

<div class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-neutral-tertiary rounded-full">
    <span class="font-medium text-body">JL</span>
</div>

Avatar tooltip #

Use this example to show a tooltip when hovering over the avatar.

Edit on GitHub

<div>
  <div id="tooltip-jese" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-base shadow-xs opacity-0 tooltip">
      Jese Leos
      <div class="tooltip-arrow" data-popper-arrow></div>
  </div>
  <img data-tooltip-target="tooltip-jese" class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="Medium avatar">
</div>
<div>
  <div id="tooltip-roberta" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-base shadow-xs opacity-0 tooltip">
      Roberta Casas
      <div class="tooltip-arrow" data-popper-arrow></div>
  </div>
  <img data-tooltip-target="tooltip-roberta" class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-4.jpg" alt="Medium avatar">
</div>
<div>
  <div id="tooltip-bonnie" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-base shadow-xs opacity-0 tooltip">
      Bonnie Green
      <div class="tooltip-arrow" data-popper-arrow></div>
  </div>
  <img data-tooltip-target="tooltip-bonnie" class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-3.jpg" alt="Medium avatar">
</div>

Dot indicator #

Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status).

Edit on GitHub

<div class="relative">
    <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
    <span class="top-0 left-7 absolute  w-3.5 h-3.5 bg-success border-2 border-buffer rounded-full"></span>
</div>
<div class="relative">
    <img class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="">
    <span class="absolute top-0 left-8 transform -translate-y-1/2 w-3.5 h-3.5 bg-danger border-2 border-buffer rounded-full"></span>
</div>
<div class="relative">
    <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
    <span class="bottom-0 left-7 absolute  w-3.5 h-3.5 bg-success border-2 border-buffer rounded-full"></span>
</div>
<div class="relative">
    <img class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="">
    <span class="absolute bottom-0 left-8 transform translate-y-1/4 w-3.5 h-3.5 bg-success border-2 border-buffer rounded-full"></span>
</div>

Stacked #

Use this example if you want to stack a group of users by overlapping the avatar components.

Edit on GitHub

<div class="flex -space-x-4 rtl:space-x-reverse">
    <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
    <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-2.jpg" alt="">
    <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="">
    <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-4.jpg" alt="">
</div>
<div class="flex -space-x-4 rtl:space-x-reverse">
    <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
    <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-2.jpg" alt="">
    <img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="">
    <a class="flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-dark-strong border-2 border-buffer rounded-full" href="#">+99</a>
</div>

Avatar text #

This example can be used if you want to show additional information in the form of text elements such as the user’s name and join date.

Edit on GitHub

<div class="flex items-center gap-2.5">
    <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
    <div class="font-medium text-heading">
        <div>Jese Leos</div>
        <div class="text-sm font-normal text-body">Joined in August 2014</div>
    </div>
</div>

User dropdown #

Use this example if you want to show a dropdown menu when clicking on the avatar component.

Edit on GitHub

<img id="avatarButton" type="button" data-dropdown-toggle="userDropdown" data-dropdown-placement="bottom-start" class="w-10 h-10 rounded-full cursor-pointer" src="/docs/images/people/profile-picture-5.jpg" alt="User dropdown">

<!-- Dropdown menu -->
<div id="userDropdown" class="z-10 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-44">
    <div class="px-4 py-3 border-b border-default-medium text-sm text-heading">
      <div class="font-medium">Bonnie Green</div>
      <div class="truncate">[email protected]</div>
    </div>
    <ul class="p-2 text-sm text-body font-medium" aria-labelledby="avatarButton">
      <li>
        <a href="#" class="block w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded-md">Dashboard</a>
      </li>
      <li>
        <a href="#" class="block w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded-md">Settings</a>
      </li>
      <li>
        <a href="#" class="block w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded-md">Earnings</a>
      </li>
      <li>
        <a href="#" class="block w-full p-2 hover:bg-neutral-tertiary-medium text-fg-danger rounded-md">Sign out</a>
      </li>
    </ul>
</div>

Sizes #

Choose from multiple sizing options for the avatar component from this example.

Edit on GitHub

<img class="w-4.5 h-4.5 rounded-sm" src="/docs/images/people/profile-picture-5.jpg" alt="Extra small avatar">
<img class="w-6 h-6 rounded-sm" src="/docs/images/people/profile-picture-5.jpg" alt="Small avatar">
<img class="w-8 h-8 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="Base avatar">
<img class="w-11 h-11 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="Large avatar">
<img class="w-14 h-14 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="xl avatar">
<img class="w-16 h-16 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="2xl avatar">

Get more updates...

Do you want to get notified when a new component is added to Flowbite? Sign up for our newsletter and you'll be among the first to find out about new features, components, versions, and tools.

By subscribing, you agree with ConvertKit's Terms of Service and Privacy Policy.

Tailwind CSS Avatar - Flowbite

Default avatar #

Bordered #

Placeholder icon #

Placeholder initials #

Avatar tooltip #

Dot indicator #

Stacked #

Avatar text #

User dropdown #

Sizes #

On this page