Avatars
Ready to use Tailwind CSS Avatar Components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
Stacked
Preview
<!-- avatars-base -->
<div class="flex items-center -space-x-3.5">
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<!-- avatars-sm -->
<div class="flex items-center -space-x-3">
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-8 w-8 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-8 w-8 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<!-- avatars-xs -->
<div class="flex items-center -space-x-1.5">
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1587397845856-e6cf49176c70?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
<span class="relative -m-0.5 rounded-full bg-white p-0.5">
<span aria-hidden="true" class="absolute inset-0.5 h-6 w-6 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-6 w-6 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>