Tailwind CSS Avatar

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 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.

                        
                      <img class="w-10 h-10 rounded-full" src="../../../assets/soft-ui-flowbite/images/people/profile-picture-5.jpg" alt="Rounded avatar">
<img class="w-10 h-10 rounded" src="../../../assets/soft-ui-flowbite/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.

                        
                      <img class="w-10 h-10 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" src="../../../assets/soft-ui-flowbite/images/people/profile-picture-5.jpg" alt="Bordered avatar">

Placeholder

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

                        
                      <div class="relative w-10 h-10 overflow-hidden bg-gray-100 rounded-full dark:bg-gray-600">
    <svg class="absolute w-12 h-12 text-gray-400 -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>

Dot indicator

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

                        
                      <div class="relative">
    <img class="w-10 h-10 rounded-full" src="../../../assets/soft-ui-flowbite/images/people/profile-picture-5.jpg" alt="">
    <span class="top-0 left-7 absolute  w-3.5 h-3.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>
<div class="relative">
    <img class="w-10 h-10 rounded" src="../../../assets/soft-ui-flowbite/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-red-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>
<div class="relative">
    <img class="w-10 h-10 rounded-full" src="../../../assets/soft-ui-flowbite/images/people/profile-picture-5.jpg" alt="">
    <span class="bottom-0 left-7 absolute  w-3.5 h-3.5 bg-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>
<div class="relative">
    <img class="w-10 h-10 rounded" src="../../../assets/soft-ui-flowbite/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-green-400 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>

Stacked

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

                        
                        +99
                      
                      <div class="flex mb-5 -space-x-4">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="../../../assets/soft-ui-flowbite/images/people/profile-picture-5.jpg" alt="">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="../../../assets/soft-ui-flowbite/images/people/profile-picture-2.jpg" alt="">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="../../../assets/soft-ui-flowbite/images/people/profile-picture-3.jpg" alt="">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="../../../assets/soft-ui-flowbite/images/people/profile-picture-4.jpg" alt="">
</div>
<div class="flex -space-x-4">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="../../../assets/soft-ui-flowbite/images/people/profile-picture-5.jpg" alt="">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="../../../assets/soft-ui-flowbite/images/people/profile-picture-2.jpg" alt="">
    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="../../../assets/soft-ui-flowbite/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-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800" href="#">+99</a>
</div>

Sizing

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

                        
                      <img class="w-6 h-6 rounded" src="../../../assets/soft-ui-flowbite/images/people/profile-picture-5.jpg" alt="Extra small avatar">
<img class="w-8 h-8 rounded" src="../../../assets/soft-ui-flowbite/images/people/profile-picture-5.jpg" alt="Small avatar">
<img class="w-10 h-10 rounded" src="../../../assets/soft-ui-flowbite/images/people/profile-picture-5.jpg" alt="Medium avatar">
<img class="w-20 h-20 rounded" src="../../../assets/soft-ui-flowbite/images/people/profile-picture-5.jpg" alt="Large avatar">
<img class="rounded w-36 h-36" src="../../../assets/soft-ui-flowbite/images/people/profile-picture-5.jpg" alt="Extra large avatar">

If you want more details about Avatar component, please check the official docs on Flowbite.