Avatars

User avatar components

Avatars

User avatar components

Preview

Initials Avatars

JD
AB
XY

Avatar with Status

JD
AB

Avatar Group

JD
AB
XY
+5
View Code
<div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">JD</div>


<div class="relative">
    <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">JD</div>
    <span class="absolute bottom-0 right-0 w-3.5 h-3.5 bg-green-500 border-2 border-white dark:border-gray-800 rounded-full"></span>
</div>


<div class="flex -space-x-2">
    <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium border-2 border-white dark:border-gray-800">JD</div>
    <div class="w-10 h-10 rounded-full bg-gray-500 flex items-center justify-center text-white font-medium border-2 border-white dark:border-gray-800 text-xs">+5</div>
</div>