Tailwind CSS Avatar
Use our Tailwind CSS Avatar to portray people or objects. It can be used as a visual identifier for a user profile on your website.
See below our avatar components examples.
<img
src="https://docs.material-tailwind.com/img/face-2.jpg"
alt="avatar"
class="relative inline-block h-12 w-12 !rounded-full object-cover object-center"
/>Avatar Variants
Use the following example to create rounded and circular avatar components for you Tailwind CSS project.
<img
src="https://docs.material-tailwind.com/img/face-2.jpg"
alt="avatar"
class="relative inline-block h-12 w-12 !rounded-full object-cover object-center"
/>
<img
src="https://docs.material-tailwind.com/img/face-2.jpg"
alt="avatar"
class="relative inline-block object-cover object-center w-12 h-12 rounded-lg"
/>
<img
src="https://docs.material-tailwind.com/img/face-2.jpg"
alt="avatar"
class="relative inline-block h-12 w-12 !rounded-none object-cover object-center"
/>Avatar Sizes
Use the following example to create avatars with different sizes, from small sized to large sized.
<img
src="https://docs.material-tailwind.com/img/face-2.jpg"
alt="avatar"
class="relative inline-block h-6 w-6 !rounded-full object-cover object-center"
/>
<img
src="https://docs.material-tailwind.com/img/face-2.jpg"
alt="avatar"
class="relative inline-block h-9 w-9 !rounded-full object-cover object-center"
/>
<img
src="https://docs.material-tailwind.com/img/face-2.jpg"
alt="avatar"
class="relative inline-block h-12 w-12 !rounded-full object-cover object-center"
/>
<img
src="https://docs.material-tailwind.com/img/face-2.jpg"
alt="avatar"
class="relative inline-block h-[58px] w-[58px] !rounded-full object-cover object-center"
/>
<img
src="https://docs.material-tailwind.com/img/face-2.jpg"
alt="avatar"
class="relative inline-block h-[74px] w-[74px] !rounded-full object-cover object-center"
/>
<img
src="https://docs.material-tailwind.com/img/face-2.jpg"
alt="avatar"
class="relative inline-block h-[110px] w-[110px] !rounded-full object-cover object-center"
/> Avatar with Border
Use the following example to create avatars with different borders.
<img
src="https://docs.material-tailwind.com/img/face-2.jpg"
alt="avatar"
class="inline-block relative object-cover object-center !rounded-full w-12 h-12 border-2 border-gray-900 p-0.5"
/>
<img
src="https://docs.material-tailwind.com/img/face-2.jpg"
alt="avatar"
class="inline-block relative object-cover object-center w-12 h-12 rounded-lg border-2 border-green-500 p-0.5"
/>
<img
src="https://docs.material-tailwind.com/img/face-2.jpg"
alt="avatar"
class="inline-block relative object-cover object-center !rounded-none w-12 h-12 border-2 border-pink-500 p-0.5"
/>Avatar with Text
You can use avatar with other components as well, see example below.
Tania Andrew
Web Developer
Tania Andrew
Web Developer
Tania Andrew
Web Developer
<div class="flex items-center gap-4">
<img src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar"
class="inline-block relative object-cover object-center !rounded-full w-12 h-12" />
<div>
<h6 class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-inherit">
Tania Andrew
</h6>
<p class="block font-sans text-sm antialiased font-normal leading-normal text-gray-700">
Web Developer
</p>
</div>
</div>
<div class="flex items-center gap-4">
<img src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar"
class="relative inline-block object-cover object-center w-12 h-12 rounded-lg" />
<div>
<h6 class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-inherit">
Tania Andrew
</h6>
<p class="block font-sans text-sm antialiased font-normal leading-normal text-gray-700">
Web Developer
</p>
</div>
</div>
<div class="flex items-center gap-4">
<img src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar"
class="inline-block relative object-cover object-center !rounded-none w-12 h-12" />
<div>
<h6 class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-inherit">
Tania Andrew
</h6>
<p class="block font-sans text-sm antialiased font-normal leading-normal text-gray-700">
Web Developer
</p>
</div>
</div>Avatar Stack
<div className="flex items-center -space-x-4">
<img
alt="user 1"
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
class="relative inline-block h-12 w-12 !rounded-full border-2 border-white object-cover object-center hover:z-10 focus:z-10"
/>
<img
alt="user 2"
src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1061&q=80"
class="relative inline-block h-12 w-12 !rounded-full border-2 border-white object-cover object-center hover:z-10 focus:z-10"
/>
<img
alt="user 3"
src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1288&q=80"
class="relative inline-block h-12 w-12 !rounded-full border-2 border-white object-cover object-center hover:z-10 focus:z-10"
/>
<img
alt="user 4"
src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80"
class="relative inline-block h-12 w-12 !rounded-full border-2 border-white object-cover object-center hover:z-10 focus:z-10"
/>
<img
alt="user 5"
src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80"
class="relative inline-block h-12 w-12 !rounded-full border-2 border-white object-cover object-center hover:z-10 focus:z-10"
/>
</div>