Tailwind CSS Avatar

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

Shape

Circular avatars

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>

Rounded avatars

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>

Masked avatars

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>

Placeholder

Placeholder icon

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>

Placeholder initials

Design circular avatar elements featuring placeholder initials.

<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>

Color variants

Solid color

Pre-configured solid color avatar designs.

<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>

Soft color

Pre-configured soft color avatar designs.

<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>

Outline color

Pre-configured outline color avatar designs.

<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>

Status

Top status indicators

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>

Bottom status indicators

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>

Avatar with logo indicator

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.

<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.

<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>

FlyonUI