Default Avatar
Below is a basic example of an avatar using a standard
img
element.
Background
The avatar image can also be used as a background image.
Square
Description goes here
Fallback Text
Replace the image with text to be displayed as the avatar.
A
B
C
D
E
<div class="size-20 rounded-full inline-flex items-center justify-center text-2.5xl font-semibold border border-primary-clarity bg-primary-light text-primary">
A
</div>
<div class="size-20 rounded-full inline-flex items-center justify-center text-2.5xl font-semibold border border-success-clarity bg-success-light text-success">
B
</div>
<div class="size-20 rounded-full inline-flex items-center justify-center text-2.5xl font-semibold border border-info-clarity bg-info-light text-info">
C
</div>
<div class="size-20 rounded-full inline-flex items-center justify-center text-2.5xl font-semibold border border-danger-clarity bg-danger-light text-danger">
D
</div>
<div class="size-20 rounded-full inline-flex items-center justify-center text-2.5xl font-semibold border border-warning-clarity bg-warning-light text-warning">
E
</div>
Dot Badge
Integrate a dot element to provide visual indication for notification purposes within the avatar component.
A
B
<div class="relative">
<img alt="" class="size-20 rounded-full" src="/static/metronic/tailwind/docs-legacy/dist/assets/media/avatars/300-1.png"/>
<span class="absolute bottom-2 right-2 transform translate-y-1/2 size-2.5 rounded-full ring-2 ring-light bg-success">
</span>
</div>
<div class="relative">
<img alt="" class="size-20 rounded-full" src="/static/metronic/tailwind/docs-legacy/dist/assets/media/avatars/300-4.png"/>
<span class="absolute bottom-2 right-2 transform translate-y-1/2 size-2.5 rounded-full ring-2 ring-light bg-gray-400">
</span>
</div>
<div class="relative">
<div class="size-20 rounded-full inline-flex items-center justify-center text-2.5xl font-semibold border border-info-clarity bg-info-light text-info">
A
</div>
<span class="absolute bottom-2 right-2 transform translate-y-1/2 size-2.5 rounded-full ring-2 ring-light bg-success">
</span>
</div>
<div class="relative">
<div class="size-20 rounded-full inline-flex items-center justify-center text-2.5xl font-semibold border border-danger-clarity bg-danger-light text-danger">
B
</div>
<span class="absolute bottom-2 right-2 transform translate-y-1/2 size-2.5 rounded-full ring-2 ring-light bg-gray-400">
</span>
</div>
Stacked
Group avatars into a stacked element to achieve a compact and organized display, ensuring a visually appealing arrangement of avatars.
A
+3
<div class="inline-flex -space-x-2">
<img class="hover:z-5 relative size-7.5 shrink-0 rounded-full ring-2 ring-light-light" src="/static/metronic/tailwind/docs-legacy/dist/assets/media/avatars/300-1.png"/>
<img class="hover:z-5 relative size-7.5 shrink-0 rounded-full ring-2 ring-light-light" src="/static/metronic/tailwind/docs-legacy/dist/assets/media/avatars/300-2.png"/>
<div class="hover:z-5 relative size-7.5 shrink-0 rounded-full ring-2 ring-light-light inline-flex items-center justify-center text-xs font-semibold border-info-light bg-info text-info-inverse">
A
</div>
<img class="hover:z-5 relative size-7.5 shrink-0 rounded-full ring-2 ring-light-light" src="/static/metronic/tailwind/docs-legacy/dist/assets/media/avatars/300-3.png"/>
<span class="relative inline-flex items-center justify-center size-7.5 shrink-0 text-xs rounded-full ring-2 font-semibold leading-none text-success-inverse ring-success-light bg-success">
+3
</span>
</div>
Sizes
Apply custom sizes to avatars using
Tailwind CSS Size
classes
for precise control over the avatar dimensions.
<img alt="" class="rounded-full size-10" src="/static/metronic/tailwind/docs-legacy/dist/assets/media/avatars/300-2.png"/>
<img alt="" class="rounded-full size-14" src="/static/metronic/tailwind/docs-legacy/dist/assets/media/avatars/300-2.png"/>
<img alt="" class="rounded-full size-16" src="/static/metronic/tailwind/docs-legacy/dist/assets/media/avatars/300-2.png"/>
<img alt="" class="rounded-full size-20" src="/static/metronic/tailwind/docs-legacy/dist/assets/media/avatars/300-2.png"/>
<img alt="" class="rounded-full size-24" src="/static/metronic/tailwind/docs-legacy/dist/assets/media/avatars/300-2.png"/>
