Tailwind CSS Avatar Components
Circle avatars with initials, overlapping avatar groups and avatars with an online status indicator — in the base style and 10 design aesthetics.
33 components · live preview · copy as HTML or JSX · free for commercial use
Base avatars (3)
Circle Avatar
Avatars
AB
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-sky-400 to-indigo-500 flex items-center justify-center text-white text-sm font-bold">
AB
</div>Avatar Group
Avatars
A
B
C
+5
<div class="flex -space-x-2">
<div class="w-9 h-9 rounded-full bg-indigo-400 border-2 border-white flex items-center justify-center text-white text-xs font-bold">A</div>
<div class="w-9 h-9 rounded-full bg-emerald-400 border-2 border-white flex items-center justify-center text-white text-xs font-bold">B</div>
<div class="w-9 h-9 rounded-full bg-amber-400 border-2 border-white flex items-center justify-center text-white text-xs font-bold">C</div>
<div class="w-9 h-9 rounded-full bg-slate-200 border-2 border-white flex items-center justify-center text-slate-500 text-xs font-bold">+5</div>
</div>Avatar with Status
Avatars
JS
<div class="relative inline-block">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center text-white text-sm font-bold">JS</div>
<span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>Minimal avatars
Circle Avatar
Minimal · Avatars
AB
<div class="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 text-sm font-semibold">AB</div>Avatar Group
Minimal · Avatars
A
B
C
+5
<div class="flex -space-x-2">
<div class="w-9 h-9 rounded-full bg-slate-200 border-2 border-white flex items-center justify-center text-slate-600 text-xs font-semibold">A</div>
<div class="w-9 h-9 rounded-full bg-slate-200 border-2 border-white flex items-center justify-center text-slate-600 text-xs font-semibold">B</div>
<div class="w-9 h-9 rounded-full bg-slate-200 border-2 border-white flex items-center justify-center text-slate-600 text-xs font-semibold">C</div>
<div class="w-9 h-9 rounded-full bg-white border border-slate-200 border-2 border-white flex items-center justify-center text-slate-500 text-xs font-semibold">+5</div>
</div>Avatar with Status
Minimal · Avatars
JS
<div class="relative inline-block">
<div class="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 text-sm font-semibold">JS</div>
<span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>Neumorphism avatars
Circle Avatar
Neumorphism · Avatars
AB
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<div class="w-10 h-10 rounded-full bg-[#e0e5ec] shadow-[4px_4px_8px_#a3b1c6,-4px_-4px_8px_#ffffff] flex items-center justify-center text-slate-600 text-sm font-bold">AB</div>
</div>Avatar Group
Neumorphism · Avatars
A
B
C
+5
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<div class="flex -space-x-2">
<div class="w-9 h-9 rounded-full bg-[#e0e5ec] shadow-[4px_4px_8px_#a3b1c6,-4px_-4px_8px_#ffffff] border-2 border-white flex items-center justify-center text-slate-600 text-xs font-bold">A</div>
<div class="w-9 h-9 rounded-full bg-[#e0e5ec] shadow-[4px_4px_8px_#a3b1c6,-4px_-4px_8px_#ffffff] border-2 border-white flex items-center justify-center text-slate-600 text-xs font-bold">B</div>
<div class="w-9 h-9 rounded-full bg-[#e0e5ec] shadow-[4px_4px_8px_#a3b1c6,-4px_-4px_8px_#ffffff] border-2 border-white flex items-center justify-center text-slate-600 text-xs font-bold">C</div>
<div class="w-9 h-9 rounded-full bg-[#e0e5ec] border-2 border-white flex items-center justify-center text-slate-500 text-xs font-bold">+5</div>
</div>
</div>Avatar with Status
Neumorphism · Avatars
JS
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<div class="relative inline-block">
<div class="w-10 h-10 rounded-full bg-[#e0e5ec] shadow-[4px_4px_8px_#a3b1c6,-4px_-4px_8px_#ffffff] flex items-center justify-center text-slate-600 text-sm font-bold">JS</div>
<span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>
</div>Glassmorphism avatars
Circle Avatar
Glassmorphism · Avatars
AB
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<div class="w-10 h-10 rounded-full bg-white/20 backdrop-blur-md border border-white/30 flex items-center justify-center text-white text-sm font-bold">AB</div>
</div>Avatar Group
Glassmorphism · Avatars
A
B
C
+5
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<div class="flex -space-x-2">
<div class="w-9 h-9 rounded-full bg-white/20 backdrop-blur-md border border-white/30 border-2 border-white flex items-center justify-center text-white text-xs font-bold">A</div>
<div class="w-9 h-9 rounded-full bg-white/20 backdrop-blur-md border border-white/30 border-2 border-white flex items-center justify-center text-white text-xs font-bold">B</div>
<div class="w-9 h-9 rounded-full bg-white/20 backdrop-blur-md border border-white/30 border-2 border-white flex items-center justify-center text-white text-xs font-bold">C</div>
<div class="w-9 h-9 rounded-full bg-white/20 backdrop-blur-md border border-white/30 border-2 border-white flex items-center justify-center text-white/80 text-xs font-bold">+5</div>
</div>
</div>Avatar with Status
Glassmorphism · Avatars
JS
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<div class="relative inline-block">
<div class="w-10 h-10 rounded-full bg-white/20 backdrop-blur-md border border-white/30 flex items-center justify-center text-white text-sm font-bold">JS</div>
<span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>
</div>Neubrutalism avatars
Circle Avatar
Neubrutalism · Avatars
AB
<div class="w-10 h-10 rounded-none bg-orange-300 border-[3px] border-black shadow-[3px_3px_0px_#000] flex items-center justify-center text-black text-sm font-black">AB</div>Avatar Group
Neubrutalism · Avatars
A
B
C
+5
<div class="flex -space-x-2">
<div class="w-9 h-9 rounded-none bg-orange-300 border-[3px] border-black shadow-[3px_3px_0px_#000] border-2 border-white flex items-center justify-center text-black text-xs font-black">A</div>
<div class="w-9 h-9 rounded-none bg-orange-300 border-[3px] border-black shadow-[3px_3px_0px_#000] border-2 border-white flex items-center justify-center text-black text-xs font-black">B</div>
<div class="w-9 h-9 rounded-none bg-orange-300 border-[3px] border-black shadow-[3px_3px_0px_#000] border-2 border-white flex items-center justify-center text-black text-xs font-black">C</div>
<div class="w-9 h-9 rounded-none bg-white border-[3px] border-black border-2 border-white flex items-center justify-center text-slate-700 text-xs font-black">+5</div>
</div>Avatar with Status
Neubrutalism · Avatars
JS
<div class="relative inline-block">
<div class="w-10 h-10 rounded-none bg-orange-300 border-[3px] border-black shadow-[3px_3px_0px_#000] flex items-center justify-center text-black text-sm font-black">JS</div>
<span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>Material avatars
Circle Avatar
Material · Avatars
AB
<div class="w-10 h-10 rounded-full bg-blue-600 shadow-md flex items-center justify-center text-white text-sm font-medium">AB</div>Avatar Group
Material · Avatars
A
B
C
+5
<div class="flex -space-x-2">
<div class="w-9 h-9 rounded-full bg-blue-600 shadow-md border-2 border-white flex items-center justify-center text-white text-xs font-medium">A</div>
<div class="w-9 h-9 rounded-full bg-blue-600 shadow-md border-2 border-white flex items-center justify-center text-white text-xs font-medium">B</div>
<div class="w-9 h-9 rounded-full bg-blue-600 shadow-md border-2 border-white flex items-center justify-center text-white text-xs font-medium">C</div>
<div class="w-9 h-9 rounded-full bg-white border-2 border-white flex items-center justify-center text-slate-500 text-xs font-medium">+5</div>
</div>Avatar with Status
Material · Avatars
JS
<div class="relative inline-block">
<div class="w-10 h-10 rounded-full bg-blue-600 shadow-md flex items-center justify-center text-white text-sm font-medium">JS</div>
<span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>Gradient avatars
Circle Avatar
Gradient · Avatars
AB
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-fuchsia-500 to-indigo-500 shadow-md flex items-center justify-center text-white text-sm font-bold">AB</div>Avatar Group
Gradient · Avatars
A
B
C
+5
<div class="flex -space-x-2">
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-fuchsia-500 to-indigo-500 shadow-md border-2 border-white flex items-center justify-center text-white text-xs font-bold">A</div>
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-fuchsia-500 to-indigo-500 shadow-md border-2 border-white flex items-center justify-center text-white text-xs font-bold">B</div>
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-fuchsia-500 to-indigo-500 shadow-md border-2 border-white flex items-center justify-center text-white text-xs font-bold">C</div>
<div class="w-9 h-9 rounded-full bg-gradient-to-br from-fuchsia-500 via-purple-500 to-indigo-500 border-2 border-white flex items-center justify-center text-white/80 text-xs font-bold">+5</div>
</div>Avatar with Status
Gradient · Avatars
JS
<div class="relative inline-block">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-fuchsia-500 to-indigo-500 shadow-md flex items-center justify-center text-white text-sm font-bold">JS</div>
<span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>Cyberpunk avatars
Circle Avatar
Cyberpunk · Avatars
AB
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<div class="w-10 h-10 rounded-lg bg-slate-900 border border-fuchsia-500 shadow-[0_0_10px_rgba(217,70,239,0.6)] flex items-center justify-center text-fuchsia-400 text-sm font-bold">AB</div>
</div>Avatar Group
Cyberpunk · Avatars
A
B
C
+5
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<div class="flex -space-x-2">
<div class="w-9 h-9 rounded-lg bg-slate-900 border border-fuchsia-500 shadow-[0_0_10px_rgba(217,70,239,0.6)] border-2 border-white flex items-center justify-center text-fuchsia-400 text-xs font-bold">A</div>
<div class="w-9 h-9 rounded-lg bg-slate-900 border border-fuchsia-500 shadow-[0_0_10px_rgba(217,70,239,0.6)] border-2 border-white flex items-center justify-center text-fuchsia-400 text-xs font-bold">B</div>
<div class="w-9 h-9 rounded-lg bg-slate-900 border border-fuchsia-500 shadow-[0_0_10px_rgba(217,70,239,0.6)] border-2 border-white flex items-center justify-center text-fuchsia-400 text-xs font-bold">C</div>
<div class="w-9 h-9 rounded-lg bg-slate-900 border border-cyan-400 border-2 border-white flex items-center justify-center text-cyan-300/70 text-xs font-bold">+5</div>
</div>
</div>Avatar with Status
Cyberpunk · Avatars
JS
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<div class="relative inline-block">
<div class="w-10 h-10 rounded-lg bg-slate-900 border border-fuchsia-500 shadow-[0_0_10px_rgba(217,70,239,0.6)] flex items-center justify-center text-fuchsia-400 text-sm font-bold">JS</div>
<span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>
</div>Retro avatars
Circle Avatar
Retro · Avatars
AB
<div class="w-10 h-10 rounded-full bg-gradient-to-b from-pink-300 to-pink-500 border-2 border-pink-600 flex items-center justify-center text-white text-sm font-black">AB</div>Avatar Group
Retro · Avatars
A
B
C
+5
<div class="flex -space-x-2">
<div class="w-9 h-9 rounded-full bg-gradient-to-b from-pink-300 to-pink-500 border-2 border-pink-600 border-2 border-white flex items-center justify-center text-white text-xs font-black">A</div>
<div class="w-9 h-9 rounded-full bg-gradient-to-b from-pink-300 to-pink-500 border-2 border-pink-600 border-2 border-white flex items-center justify-center text-white text-xs font-black">B</div>
<div class="w-9 h-9 rounded-full bg-gradient-to-b from-pink-300 to-pink-500 border-2 border-pink-600 border-2 border-white flex items-center justify-center text-white text-xs font-black">C</div>
<div class="w-9 h-9 rounded-full bg-orange-100 border-4 border-orange-400 border-2 border-white flex items-center justify-center text-orange-600 text-xs font-black">+5</div>
</div>Avatar with Status
Retro · Avatars
JS
<div class="relative inline-block">
<div class="w-10 h-10 rounded-full bg-gradient-to-b from-pink-300 to-pink-500 border-2 border-pink-600 flex items-center justify-center text-white text-sm font-black">JS</div>
<span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>Corporate avatars
Circle Avatar
Corporate · Avatars
AB
<div class="w-10 h-10 rounded-md bg-slate-700 flex items-center justify-center text-white text-sm font-semibold">AB</div>Avatar Group
Corporate · Avatars
A
B
C
+5
<div class="flex -space-x-2">
<div class="w-9 h-9 rounded-md bg-slate-700 border-2 border-white flex items-center justify-center text-white text-xs font-semibold">A</div>
<div class="w-9 h-9 rounded-md bg-slate-700 border-2 border-white flex items-center justify-center text-white text-xs font-semibold">B</div>
<div class="w-9 h-9 rounded-md bg-slate-700 border-2 border-white flex items-center justify-center text-white text-xs font-semibold">C</div>
<div class="w-9 h-9 rounded-md bg-white border border-slate-200 border-2 border-white flex items-center justify-center text-slate-500 text-xs font-semibold">+5</div>
</div>Avatar with Status
Corporate · Avatars
JS
<div class="relative inline-block">
<div class="w-10 h-10 rounded-md bg-slate-700 flex items-center justify-center text-white text-sm font-semibold">JS</div>
<span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>Playful avatars
Circle Avatar
Playful · Avatars
AB
<div class="w-10 h-10 rounded-full bg-yellow-200 border-2 border-yellow-400 flex items-center justify-center text-yellow-800 text-sm font-bold">AB</div>Avatar Group
Playful · Avatars
A
B
C
+5
<div class="flex -space-x-2">
<div class="w-9 h-9 rounded-full bg-yellow-200 border-2 border-yellow-400 border-2 border-white flex items-center justify-center text-yellow-800 text-xs font-bold">A</div>
<div class="w-9 h-9 rounded-full bg-yellow-200 border-2 border-yellow-400 border-2 border-white flex items-center justify-center text-yellow-800 text-xs font-bold">B</div>
<div class="w-9 h-9 rounded-full bg-yellow-200 border-2 border-yellow-400 border-2 border-white flex items-center justify-center text-yellow-800 text-xs font-bold">C</div>
<div class="w-9 h-9 rounded-full bg-yellow-50 border-2 border-yellow-200 border-2 border-white flex items-center justify-center text-yellow-700 text-xs font-bold">+5</div>
</div>Avatar with Status
Playful · Avatars
JS
<div class="relative inline-block">
<div class="w-10 h-10 rounded-full bg-yellow-200 border-2 border-yellow-400 flex items-center justify-center text-yellow-800 text-sm font-bold">JS</div>
<span class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white"></span>
</div>Using avatars
Avatars put a face or initials next to comments, team lists, chat messages and account menus. Initials avatars, like the Circle Avatar here, are a reliable fallback when a user has not uploaded a photo. Stacked avatar groups use negative spacing (-space-x-2) and a ring in the page's background color so each circle stays distinct; show a +N chip once a group grows beyond four or five people.
The status variant adds a small dot at the bottom-right corner to show presence, such as online, away or busy.
Accessibility tips
If an avatar is a photo, give the <img> meaningful alt text such as the person's name, or an empty alt when the name is already shown next to it. Don't communicate presence by color alone — include the status in text or an aria-label ("Online") so it reaches screen-reader users and people with color-vision deficiencies.
Frequently Asked Questions
How do I create overlapping avatars in Tailwind?↓
Place the avatars in a flex container with -space-x-2 and add ring-2 ring-white (or your background color) to each avatar so the overlap has a clean edge.
How do I show an online status dot on an avatar?↓
Wrap the avatar in a relative element and add a small span with absolute bottom-0 right-0, rounded-full, a status background color and a border that matches the page background.
What should an avatar show when there is no photo?↓
Show the user's initials on a colored background, as in the Circle Avatar component. Derive the color from the user's name so it stays consistent across visits.
Last updated: