components
Tailwind CSS Avatar
Avatars bring life to the interface, offering a small but vivid representation of individuals or businesses.
Class Name | Type | Description |
|---|---|---|
| avatar | Component | Container element |
| avatar-group | Component | Container for grouping multiple avatars |
| placeholder | Modifier | To show some letters as avatar placeholder |
| online-top | Modifier | Shows a green dot at top as online indicator |
| online-bottom | Modifier | Shows a green dot at bottom as online indicator |
| away-top | Modifier | Shows a warning dot at top as away indicator |
| away-bottom | Modifier | Shows a warning dot at bottom as away indicator |
| busy-top | Modifier | Shows an error dot at top as busy indicator |
| busy-bottom | Modifier | Shows an error dot at bottom as busy indicator |
| offline-top | Modifier | Shows a neutral dot at top as offline indicator |
| offline-bottom | Modifier | Shows a neutral dot at bottom as offline indicator |
The avatar component class serves as a wrapper for the image, while the Size and Border Radius utility classes can be utilized to adjust its dimensions and radius.
Use rounded-full utility class to make circular avatars.
<div class="avatar">
<div class="size-6 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<div class="avatar">
<div class="size-10 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<div class="avatar">
<div class="size-14 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<div class="avatar">
<div class="size-16 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>Apply the rounded-md utility class to achieve rounded avatars.
<div class="avatar">
<div class="size-6 rounded-md">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<div class="avatar">
<div class="size-10 rounded-md">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<div class="avatar">
<div class="size-14 rounded-md">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<div class="avatar">
<div class="size-16 rounded-md">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>The mask class modifier can be applied to define the shape of the avatar.
Refer
Mask Element
for more details.
<div class="avatar">
<div class="size-16 mask mask-decagon">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<div class="avatar">
<div class="size-16 mask mask-hexagon-2">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<div class="avatar">
<div class="size-16 mask mask-heart">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>Use placeholder component class with avatar for placeholder styles.Design circular avatar elements featuring placeholder icons.
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content w-6 rounded-full">
<span class="icon-[tabler--user] size-4"></span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content w-10 rounded-full">
<span class="icon-[tabler--user] size-6"></span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content w-14 rounded-full">
<span class="icon-[tabler--user] size-8"></span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content w-16 rounded-full">
<span class="icon-[tabler--user] size-10"></span>
</div>
</div>Design circular avatar elements featuring placeholder initials.
cl
cl
cl
cl
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content w-6 rounded-full">
<span class="text-xs uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content w-10 rounded-full">
<span class="text-md uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content w-14 rounded-full">
<span class="text-xl uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-neutral text-neutral-content w-16 rounded-full">
<span class="text-2xl uppercase">cl</span>
</div>
</div>Pre-configured solid color avatar designs.
cl
cl
cl
cl
cl
cl
<div class="avatar placeholder">
<div class="bg-primary text-primary-content w-10 rounded-full">
<span class="text-md uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-secondary text-secondary-content w-10 rounded-full">
<span class="text-md uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-info text-info-content w-10 rounded-full">
<span class="text-md uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-success text-success-content w-10 rounded-full">
<span class="text-md uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-warning text-warning-content w-10 rounded-full">
<span class="text-md uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-error text-error-content w-10 rounded-full">
<span class="text-md uppercase">cl</span>
</div>
</div>Pre-configured soft color avatar designs.
cl
cl
cl
cl
cl
cl
<div class="avatar placeholder">
<div class="bg-primary/20 text-primary w-10 rounded-full">
<span class="text-md uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-secondary/20 text-secondary w-10 rounded-full">
<span class="text-md uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-info/20 text-info w-10 rounded-full">
<span class="text-md uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-success/20 text-success w-10 rounded-full">
<span class="text-md uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-warning/20 text-warning w-10 rounded-full">
<span class="text-md uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="bg-error/20 text-error w-10 rounded-full">
<span class="text-md uppercase">cl</span>
</div>
</div>Pre-configured outline color avatar designs.
cl
cl
cl
cl
cl
cl
<div class="avatar placeholder">
<div class="border-primary text-primary w-10 rounded-full border">
<span class="text-md uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="border-secondary text-secondary w-10 rounded-full border">
<span class="text-md uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="border-info text-info w-10 rounded-full border">
<span class="text-md uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="border-success text-success w-10 rounded-full border">
<span class="text-md uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="border-warning text-warning w-10 rounded-full border">
<span class="text-md uppercase">cl</span>
</div>
</div>
<div class="avatar placeholder">
<div class="border-error text-error w-10 rounded-full border">
<span class="text-md uppercase">cl</span>
</div>
</div>Avatars featuring various status indicators at top.
<div class="avatar online-top">
<div class="w-6 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<div class="avatar away-top">
<div class="w-10 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<div class="avatar busy-top">
<div class="w-14 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<div class="avatar offline-top">
<div class="w-16 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>Avatars featuring various status indicators at bottom.
<div class="avatar online-bottom">
<div class="w-6 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<div class="avatar away-bottom">
<div class="w-10 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<div class="avatar busy-bottom">
<div class="w-14 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<div class="avatar offline-bottom">
<div class="w-16 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>Avatars featuring various status indicators at bottom.
<div class="avatar ">
<div class="w-10 rounded-full">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
<span class="bg-base-100 absolute bottom-0 right-0 flex translate-x-2 translate-y-2 transform items-center rounded-full p-1"><svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 60 60" preserveAspectRatio="xMidYMid meet" alt="Slack Logo"><path d="M22,12 a6,6 0 1 1 6,-6 v6z M22,16 a6,6 0 0 1 0,12 h-16 a6,6 0 1 1 0,-12" fill="#36C5F0" /><path d="M48,22 a6,6 0 1 1 6,6 h-6z M32,6 a6,6 0 1 1 12,0v16a6,6 0 0 1 -12,0z" fill="#2EB67D" /><path d="M38,48 a6,6 0 1 1 -6,6 v-6z M54,32 a6,6 0 0 1 0,12 h-16 a6,6 0 1 1 0,-12" fill="#ECB22E" /><path d="M12,38 a6,6 0 1 1 -6,-6 h6z M16,38 a6,6 0 1 1 12,0v16a6,6 0 0 1 -12,0z" fill="#E01E5A" /></svg>
</span>
</div>
<div class="avatar ">
<div class="w-10 rounded-md">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
<span class="bg-base-100 absolute bottom-0 right-0 flex translate-x-2 translate-y-2 transform items-center rounded-full p-1"><svg aria-hidden="true" class="size-4" version="1.1" viewBox="0 0 16 16" width="24"><path
fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"><path /></svg>
</span>
</div>The avatar-group class acts as a container for avatars, allowing you to manage the spacing between them with the -space-x-4 class.
To ensure compatibility with right-to-left (RTL) layouts, you can apply the rtl:space-x-reverse class utility.
+9
<div class="avatar-group -space-x-5 rtl:space-x-reverse">
<div class="avatar">
<div class="w-13">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<div class="avatar">
<div class="w-13">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-12.png" alt="avatar" />
</div>
</div>
<div class="avatar">
<div class="w-13">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-10.png" alt="avatar" />
</div>
</div>
<div class="avatar">
<div class="w-13">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-6.png" alt="avatar" />
</div>
</div>
</div>
<div class="avatar-group -space-x-5 rtl:space-x-reverse">
<div class="avatar">
<div class="w-13">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-10.png" alt="avatar" />
</div>
</div>
<div class="avatar">
<div class="w-13">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-12.png" alt="avatar" />
</div>
</div>
<div class="avatar">
<div class="w-13">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-6.png" alt="avatar" />
</div>
</div>
<div class="avatar placeholder cursor-default">
<div class="bg-neutral text-neutral-content w-13">
<span>+9</span>
</div>
</div>
</div>Utilize the pull-up class to enable hover functionality for the avatar.
Refer
Tooltip
documentation for information on tooltip elements.
Tooltip+9
<div class="avatar-group pull-up -space-x-5 rtl:space-x-reverse">
<div class="tooltip">
<div class="tooltip-toggle avatar">
<div class="w-13">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="avatar" />
</div>
</div>
<span class="tooltip-content tooltip-shown:opacity-100 tooltip-shown:visible" role="tooltip">
<span class="tooltip-body">Jhon Doe</span>
</span>
</div>
<div class="tooltip">
<div class="tooltip-toggle avatar">
<div class="w-13">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-10.png" alt="avatar" />
</div>
</div>
<span class="tooltip-content tooltip-shown:opacity-100 tooltip-shown:visible" role="tooltip">
<span class="tooltip-body">Elliot Chen</span>
</span>
</div>
<div class="tooltip">
<div class="tooltip-toggle avatar">
<div class="w-13">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-12.png" alt="avatar" />
</div>
</div>
<span class="tooltip-content tooltip-shown:opacity-100 tooltip-shown:visible" role="tooltip">
<span class="tooltip-body">Maya Singh</span>
</span>
</div>
<div class="tooltip">
<div class="tooltip-toggle avatar">
<div class="w-13">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-6.png" alt="avatar" />
</div>
</div>
<span class="tooltip-content tooltip-shown:opacity-100 tooltip-shown:visible" role="tooltip">
<span class="tooltip-body">Jasmine Rivera</span>
</span>
</div>
</div>
<!-- pullup animation with counter -->
<div class="avatar-group pull-up -space-x-5 rtl:space-x-reverse">
<div class="tooltip">
<div class="tooltip-toggle avatar">
<div class="w-13">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-10.png" alt="avatar" />
</div>
</div>
<span class="tooltip-content tooltip-shown:opacity-100 tooltip-shown:visible" role="tooltip">
<span class="tooltip-body">Maya Singh</span>
</span>
</div>
<div class="tooltip">
<div class="tooltip-toggle avatar">
<div class="w-13">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-12.png" alt="avatar" />
</div>
</div>
<span class="tooltip-content tooltip-shown:opacity-100 tooltip-shown:visible" role="tooltip">
<span class="tooltip-body">Jasmine Rivera</span>
</span>
</div>
<div class="tooltip">
<div class="tooltip-toggle avatar">
<div class="w-13">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-6.png" alt="avatar" />
</div>
</div>
<span class="tooltip-content tooltip-shown:opacity-100 tooltip-shown:visible" role="tooltip">
<span class="tooltip-body">Elliot Chen</span>
</span>
</div>
<div class="tooltip cursor-default">
<div class="tooltip-toggle avatar placeholder">
<div class="bg-neutral text-neutral-content w-13">
<span>+9</span>
</div>
</div>
<span class="tooltip-content tooltip-shown:opacity-100 tooltip-shown:visible" role="tooltip">
<span class="tooltip-body">9 more</span>
</span>
</div>
</div>
