Avatar

Avatars are used to show a thumbnail representation of an individual or business in the interface.

Class name
Type
avatarComponent Container element
avatar-groupComponent Container for grouping multiple avatars
online
Modifier
shows a green dot as online indicator
offline
Modifier
shows a gray dot as offline indicator
placeholder
Modifier
to show some letters as avatar placeholder
# Avatar
Tailwind-CSS-Avatar-component
# Avatar in custom sizes
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
# Avatar rounded
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
# Avatar with mask
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
# Avatar group
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
# Avatar group with counter
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
+99
# Avatar with ring
Tailwind-CSS-Avatar-component
# Avatar with presence indicator
Tailwind-CSS-Avatar-component
Tailwind-CSS-Avatar-component
# Avatar placeholder
D
AI
SY
UI
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details