|$ curl https://forge-ai.dev/api/markdown?path=docs/components/avatar
$cat docs/avatars-&-user-images.md
updated Recently·20 min read·published
Avatars & User Images
Introduction
Avatars are compact visual identifiers for users, teams, and entities. This guide covers production-ready avatar patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including images, initials, status dots, badges, groups, shapes, rings, and accessibility.
ℹ
info
Always provide meaningful alt text for image avatars. For decorative avatars or initials, use an aria-label or hide the element from assistive technology with aria-hidden when redundant.
Basic Initials
Circular avatars with placeholder colors and initials — use when you don't have user photos.
basic-avatar
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="avatar" style="background:#3B82F6"> |
| 3 | JD |
| 4 | </div> |
| 5 | <div class="avatar" style="background:#A855F7"> |
| 6 | AB |
| 7 | </div> |
| 8 | <div class="avatar" style="background:#22C55E"> |
| 9 | KW |
| 10 | </div> |
| 11 | <div class="avatar" style="background:#F97316"> |
| 12 | MR |
| 13 | </div> |
| 14 | <div class="avatar" style="background:#EF4444"> |
| 15 | TS |
| 16 | </div> |
| 17 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:12px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .avatar { |
| 9 | width:44px; |
| 10 | height:44px; |
| 11 | border-radius:50%; |
| 12 | display:flex; |
| 13 | align-items:center; |
| 14 | justify-content:center; |
| 15 | font-size:14px; |
| 16 | font-weight:700; |
| 17 | color:#fff; |
| 18 | font-family:system-ui, |
| 19 | sans-serif; |
| 20 | user-select:none; |
| 21 | flex-shrink:0 |
| 22 | } |
untitled.html
HTML
| 1 | <div class="flex gap-3 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <div class="w-11 h-11 rounded-full flex items-center justify-center text-sm font-bold text-white select-none bg-[#3B82F6]"> |
| 3 | JD |
| 4 | </div> |
| 5 | <div class="w-11 h-11 rounded-full flex items-center justify-center text-sm font-bold text-white select-none bg-[#A855F7]"> |
| 6 | AB |
| 7 | </div> |
| 8 | <div class="w-11 h-11 rounded-full flex items-center justify-center text-sm font-bold text-white select-none bg-[#22C55E]"> |
| 9 | KW |
| 10 | </div> |
| 11 | <div class="w-11 h-11 rounded-full flex items-center justify-center text-sm font-bold text-white select-none bg-[#F97316]"> |
| 12 | MR |
| 13 | </div> |
| 14 | <div class="w-11 h-11 rounded-full flex items-center justify-center text-sm font-bold text-white select-none bg-[#EF4444]"> |
| 15 | TS |
| 16 | </div> |
| 17 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-3 align-items-center justify-content-center p-4"> |
| 2 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:44px;height:44px;background:#3B82F6"> |
| 3 | JD |
| 4 | </div> |
| 5 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:44px;height:44px;background:#A855F7"> |
| 6 | AB |
| 7 | </div> |
| 8 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:44px;height:44px;background:#22C55E"> |
| 9 | KW |
| 10 | </div> |
| 11 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:44px;height:44px;background:#F97316"> |
| 12 | MR |
| 13 | </div> |
| 14 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:44px;height:44px;background:#EF4444"> |
| 15 | TS |
| 16 | </div> |
| 17 | </div> |
ℹ
info
Generate deterministic background colors from user names using a hash function. This ensures the same user always gets the same color across sessions without storing it.
Image Avatars
Avatars with actual user photos using a circular clip. Falls back to initials if the image fails to load.
image-avatar
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="avatar img"> |
| 3 | <img src="https://i.pravatar.cc/96?img=1" alt="User"> |
| 4 | </div> |
| 5 | <div class="avatar img"> |
| 6 | <img src="https://i.pravatar.cc/96?img=5" alt="User"> |
| 7 | </div> |
| 8 | <div class="avatar img"> |
| 9 | <img src="https://i.pravatar.cc/96?img=12" alt="User"> |
| 10 | </div> |
| 11 | <div class="avatar initials" style="background:#606080"> |
| 12 | AB |
| 13 | </div> |
| 14 | <div class="avatar img"> |
| 15 | <img src="https://broken-url.invalid/photo.jpg" alt="User" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"> |
| 16 | <span class="fallback" style="display:none;background:#EF4444"> |
| 17 | EF |
| 18 | </span> |
| 19 | </div> |
| 20 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:12px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .avatar { |
| 9 | width:48px; |
| 10 | height:48px; |
| 11 | border-radius:50%; |
| 12 | overflow:hidden; |
| 13 | flex-shrink:0; |
| 14 | display:flex; |
| 15 | align-items:center; |
| 16 | justify-content:center; |
| 17 | font-size:15px; |
| 18 | font-weight:700; |
| 19 | color:#fff; |
| 20 | font-family:system-ui, |
| 21 | sans-serif |
| 22 | } |
| 23 | .avatar.img img { |
| 24 | width:100%; |
| 25 | height:100%; |
| 26 | object-fit:cover |
| 27 | } |
| 28 | .avatar.initials { |
| 29 | background:#606080 |
| 30 | } |
untitled.html
HTML
| 1 | <div class="flex gap-3 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <div class="w-12 h-12 rounded-full overflow-hidden flex-shrink-0"> |
| 3 | <img src="https://i.pravatar.cc/96?img=1" alt="User" class="w-full h-full object-cover"> |
| 4 | </div> |
| 5 | <div class="w-12 h-12 rounded-full overflow-hidden flex-shrink-0"> |
| 6 | <img src="https://i.pravatar.cc/96?img=5" alt="User" class="w-full h-full object-cover"> |
| 7 | </div> |
| 8 | <div class="w-12 h-12 rounded-full overflow-hidden flex-shrink-0"> |
| 9 | <img src="https://i.pravatar.cc/96?img=12" alt="User" class="w-full h-full object-cover"> |
| 10 | </div> |
| 11 | <div class="w-12 h-12 rounded-full overflow-hidden flex items-center justify-center text-[15px] font-bold text-white flex-shrink-0 bg-[#606080]"> |
| 12 | AB |
| 13 | </div> |
| 14 | <div class="w-12 h-12 rounded-full overflow-hidden flex items-center justify-center text-[15px] font-bold text-white flex-shrink-0 relative"> |
| 15 | <img src="https://broken-url.invalid/photo.jpg" alt="User" class="w-full h-full object-cover" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"> |
| 16 | <span class="absolute inset-0 hidden items-center justify-center bg-[#EF4444]"> |
| 17 | EF |
| 18 | </span> |
| 19 | </div> |
| 20 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-3 align-items-center justify-content-center p-4"> |
| 2 | <div class="rounded-circle overflow-hidden flex-shrink-0" style="width:48px;height:48px"> |
| 3 | <img src="https://i.pravatar.cc/96?img=1" alt="User" class="w-100 h-100 object-fit-cover"> |
| 4 | </div> |
| 5 | <div class="rounded-circle overflow-hidden flex-shrink-0" style="width:48px;height:48px"> |
| 6 | <img src="https://i.pravatar.cc/96?img=5" alt="User" class="w-100 h-100 object-fit-cover"> |
| 7 | </div> |
| 8 | <div class="rounded-circle overflow-hidden flex-shrink-0" style="width:48px;height:48px"> |
| 9 | <img src="https://i.pravatar.cc/96?img=12" alt="User" class="w-100 h-100 object-fit-cover"> |
| 10 | </div> |
| 11 | <div class="rounded-circle overflow-hidden flex-shrink-0 d-flex align-items-center justify-content-center fw-bold text-white" style="width:48px;height:48px;background:#606080"> |
| 12 | AB |
| 13 | </div> |
| 14 | <div class="rounded-circle overflow-hidden flex-shrink-0 d-flex align-items-center justify-content-center fw-bold text-white position-relative" style="width:48px;height:48px"> |
| 15 | <img src="https://broken-url.invalid/photo.jpg" alt="User" class="w-100 h-100 object-fit-cover" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"> |
| 16 | <span class="position-absolute top-0 start-0 w-100 h-100 d-none align-items-center justify-content-center" style="background:#EF4444"> |
| 17 | EF |
| 18 | </span> |
| 19 | </div> |
| 20 | </div> |
Sizes
From tiny 24px badges to large 64px profile avatars — scale to fit the context.
avatar-sizes
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="avatar xs" style="background:#3B82F6"> |
| 3 | JD |
| 4 | </div> |
| 5 | <div class="avatar sm" style="background:#A855F7"> |
| 6 | AB |
| 7 | </div> |
| 8 | <div class="avatar md" style="background:#22C55E"> |
| 9 | KW |
| 10 | </div> |
| 11 | <div class="avatar lg" style="background:#F97316"> |
| 12 | MR |
| 13 | </div> |
| 14 | <div class="avatar xl" style="background:#EF4444"> |
| 15 | TS |
| 16 | </div> |
| 17 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:14px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .avatar { |
| 9 | border-radius:50%; |
| 10 | display:flex; |
| 11 | align-items:center; |
| 12 | justify-content:center; |
| 13 | font-weight:700; |
| 14 | color:#fff; |
| 15 | font-family:system-ui, |
| 16 | sans-serif; |
| 17 | flex-shrink:0 |
| 18 | } |
| 19 | .xs { |
| 20 | width:24px; |
| 21 | height:24px; |
| 22 | font-size:9px |
| 23 | } |
| 24 | .sm { |
| 25 | width:32px; |
| 26 | height:32px; |
| 27 | font-size:11px |
| 28 | } |
| 29 | .md { |
| 30 | width:44px; |
| 31 | height:44px; |
| 32 | font-size:14px |
| 33 | } |
| 34 | .lg { |
| 35 | width:56px; |
| 36 | height:56px; |
| 37 | font-size:18px |
| 38 | } |
| 39 | .xl { |
| 40 | width:72px; |
| 41 | height:72px; |
| 42 | font-size:22px |
| 43 | } |
untitled.html
HTML
| 1 | <div class="flex gap-3.5 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <div class="w-6 h-6 rounded-full flex items-center justify-center font-bold text-white text-[9px] bg-[#3B82F6]"> |
| 3 | JD |
| 4 | </div> |
| 5 | <div class="w-8 h-8 rounded-full flex items-center justify-center font-bold text-white text-[11px] bg-[#A855F7]"> |
| 6 | AB |
| 7 | </div> |
| 8 | <div class="w-11 h-11 rounded-full flex items-center justify-center font-bold text-white text-sm bg-[#22C55E]"> |
| 9 | KW |
| 10 | </div> |
| 11 | <div class="w-14 h-14 rounded-full flex items-center justify-center font-bold text-white text-lg bg-[#F97316]"> |
| 12 | MR |
| 13 | </div> |
| 14 | <div class="w-[72px] h-[72px] rounded-full flex items-center justify-center font-bold text-white text-[22px] bg-[#EF4444]"> |
| 15 | TS |
| 16 | </div> |
| 17 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-3 align-items-center justify-content-center p-4"> |
| 2 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:24px;height:24px;font-size:9px;background:#3B82F6"> |
| 3 | JD |
| 4 | </div> |
| 5 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:32px;height:32px;font-size:11px;background:#A855F7"> |
| 6 | AB |
| 7 | </div> |
| 8 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:44px;height:44px;font-size:14px;background:#22C55E"> |
| 9 | KW |
| 10 | </div> |
| 11 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:56px;height:56px;font-size:18px;background:#F97316"> |
| 12 | MR |
| 13 | </div> |
| 14 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:72px;height:72px;font-size:22px;background:#EF4444"> |
| 15 | TS |
| 16 | </div> |
| 17 | </div> |
Status Indicators
Online, away, busy, and offline status dots on avatars — essential for chat and team apps.
avatar-status
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="avatar-wrap"> |
| 3 | <div class="avatar" style="background:#3B82F6"> |
| 4 | JD |
| 5 | </div> |
| 6 | <span class="status online"> |
| 7 | </span> |
| 8 | </div> |
| 9 | <div class="avatar-wrap"> |
| 10 | <div class="avatar" style="background:#A855F7"> |
| 11 | AB |
| 12 | </div> |
| 13 | <span class="status away"> |
| 14 | </span> |
| 15 | </div> |
| 16 | <div class="avatar-wrap"> |
| 17 | <div class="avatar" style="background:#22C55E"> |
| 18 | KW |
| 19 | </div> |
| 20 | <span class="status busy"> |
| 21 | </span> |
| 22 | </div> |
| 23 | <div class="avatar-wrap"> |
| 24 | <div class="avatar" style="background:#606080"> |
| 25 | MR |
| 26 | </div> |
| 27 | <span class="status offline"> |
| 28 | </span> |
| 29 | </div> |
| 30 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:24px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .avatar-wrap { |
| 9 | position:relative; |
| 10 | flex-shrink:0 |
| 11 | } |
| 12 | .avatar { |
| 13 | width:48px; |
| 14 | height:48px; |
| 15 | border-radius:50%; |
| 16 | display:flex; |
| 17 | align-items:center; |
| 18 | justify-content:center; |
| 19 | font-size:15px; |
| 20 | font-weight:700; |
| 21 | color:#fff; |
| 22 | font-family:system-ui, |
| 23 | sans-serif |
| 24 | } |
| 25 | .status { |
| 26 | position:absolute; |
| 27 | bottom:0; |
| 28 | right:0; |
| 29 | width:14px; |
| 30 | height:14px; |
| 31 | border-radius:50%; |
| 32 | border:3px solid #0D0D0D; |
| 33 | box-sizing:content-box |
| 34 | } |
| 35 | .online { |
| 36 | background:#22C55E |
| 37 | } |
| 38 | .away { |
| 39 | background:#EAB308 |
| 40 | } |
| 41 | .busy { |
| 42 | background:#EF4444 |
| 43 | } |
| 44 | .offline { |
| 45 | background:#606080 |
| 46 | } |
untitled.html
HTML
| 1 | <div class="flex gap-6 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <div class="relative flex-shrink-0"> |
| 3 | <div class="w-12 h-12 rounded-full flex items-center justify-center text-[15px] font-bold text-white bg-[#3B82F6]"> |
| 4 | JD |
| 5 | </div> |
| 6 | <span class="absolute bottom-0 right-0 w-3.5 h-3.5 rounded-full border-[3px] border-[#0D0D0D] bg-[#22C55E]"> |
| 7 | </span> |
| 8 | </div> |
| 9 | <div class="relative flex-shrink-0"> |
| 10 | <div class="w-12 h-12 rounded-full flex items-center justify-center text-[15px] font-bold text-white bg-[#A855F7]"> |
| 11 | AB |
| 12 | </div> |
| 13 | <span class="absolute bottom-0 right-0 w-3.5 h-3.5 rounded-full border-[3px] border-[#0D0D0D] bg-[#EAB308]"> |
| 14 | </span> |
| 15 | </div> |
| 16 | <div class="relative flex-shrink-0"> |
| 17 | <div class="w-12 h-12 rounded-full flex items-center justify-center text-[15px] font-bold text-white bg-[#22C55E]"> |
| 18 | KW |
| 19 | </div> |
| 20 | <span class="absolute bottom-0 right-0 w-3.5 h-3.5 rounded-full border-[3px] border-[#0D0D0D] bg-[#EF4444]"> |
| 21 | </span> |
| 22 | </div> |
| 23 | <div class="relative flex-shrink-0"> |
| 24 | <div class="w-12 h-12 rounded-full flex items-center justify-center text-[15px] font-bold text-white bg-[#606080]"> |
| 25 | MR |
| 26 | </div> |
| 27 | <span class="absolute bottom-0 right-0 w-3.5 h-3.5 rounded-full border-[3px] border-[#0D0D0D] bg-[#606080]"> |
| 28 | </span> |
| 29 | </div> |
| 30 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-4 align-items-center justify-content-center p-4"> |
| 2 | <div class="position-relative flex-shrink-0"> |
| 3 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:48px;height:48px;background:#3B82F6"> |
| 4 | JD |
| 5 | </div> |
| 6 | <span class="position-absolute rounded-circle" style="bottom:0;right:0;width:14px;height:14px;border:3px solid #0D0D0D;background:#22C55E"> |
| 7 | </span> |
| 8 | </div> |
| 9 | <div class="position-relative flex-shrink-0"> |
| 10 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:48px;height:48px;background:#A855F7"> |
| 11 | AB |
| 12 | </div> |
| 13 | <span class="position-absolute rounded-circle" style="bottom:0;right:0;width:14px;height:14px;border:3px solid #0D0D0D;background:#EAB308"> |
| 14 | </span> |
| 15 | </div> |
| 16 | <div class="position-relative flex-shrink-0"> |
| 17 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:48px;height:48px;background:#22C55E"> |
| 18 | KW |
| 19 | </div> |
| 20 | <span class="position-absolute rounded-circle" style="bottom:0;right:0;width:14px;height:14px;border:3px solid #0D0D0D;background:#EF4444"> |
| 21 | </span> |
| 22 | </div> |
| 23 | <div class="position-relative flex-shrink-0"> |
| 24 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:48px;height:48px;background:#606080"> |
| 25 | MR |
| 26 | </div> |
| 27 | <span class="position-absolute rounded-circle" style="bottom:0;right:0;width:14px;height:14px;border:3px solid #0D0D0D;background:#606080"> |
| 28 | </span> |
| 29 | </div> |
| 30 | </div> |
✓
best practice
Status indicators should have a 3px border matching the background color to create a clean separation from the avatar. Use semantic colors: green for online, yellow for away, red for busy, gray for offline.
Notification Badge
Avatars with a numeric badge count — perfect for unread messages or pending notifications.
avatar-badge
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="avatar-wrap"> |
| 3 | <div class="avatar" style="background:#3B82F6"> |
| 4 | <img src="https://i.pravatar.cc/96?img=3" alt=""> |
| 5 | </div> |
| 6 | <span class="badge"> |
| 7 | 3 |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="avatar-wrap"> |
| 11 | <div class="avatar" style="background:#A855F7"> |
| 12 | AB |
| 13 | </div> |
| 14 | <span class="badge"> |
| 15 | 12 |
| 16 | </span> |
| 17 | </div> |
| 18 | <div class="avatar-wrap"> |
| 19 | <div class="avatar" style="background:#22C55E"> |
| 20 | KW |
| 21 | </div> |
| 22 | <span class="badge dot"> |
| 23 | </span> |
| 24 | </div> |
| 25 | <div class="avatar-wrap"> |
| 26 | <div class="avatar" style="background:#606080"> |
| 27 | MR |
| 28 | </div> |
| 29 | <span class="badge"> |
| 30 | 99+ |
| 31 | </span> |
| 32 | </div> |
| 33 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:24px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .avatar-wrap { |
| 9 | position:relative; |
| 10 | flex-shrink:0 |
| 11 | } |
| 12 | .avatar { |
| 13 | width:48px; |
| 14 | height:48px; |
| 15 | border-radius:50%; |
| 16 | display:flex; |
| 17 | align-items:center; |
| 18 | justify-content:center; |
| 19 | font-size:15px; |
| 20 | font-weight:700; |
| 21 | color:#fff; |
| 22 | font-family:system-ui, |
| 23 | sans-serif; |
| 24 | overflow:hidden |
| 25 | } |
| 26 | .avatar img { |
| 27 | width:100%; |
| 28 | height:100%; |
| 29 | object-fit:cover |
| 30 | } |
| 31 | .badge { |
| 32 | position:absolute; |
| 33 | top:-4px; |
| 34 | right:-4px; |
| 35 | min-width:20px; |
| 36 | height:20px; |
| 37 | border-radius:10px; |
| 38 | background:#EF4444; |
| 39 | color:#fff; |
| 40 | font-size:10px; |
| 41 | font-weight:700; |
| 42 | display:flex; |
| 43 | align-items:center; |
| 44 | justify-content:center; |
| 45 | padding:0 5px; |
| 46 | border:2px solid #0D0D0D; |
| 47 | font-family:monospace; |
| 48 | box-sizing:content-box |
| 49 | } |
| 50 | .badge.dot { |
| 51 | width:12px; |
| 52 | height:12px; |
| 53 | min-width:12px; |
| 54 | padding:0; |
| 55 | top:0; |
| 56 | right:0 |
| 57 | } |
untitled.html
HTML
| 1 | <div class="flex gap-6 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <div class="relative flex-shrink-0"> |
| 3 | <div class="w-12 h-12 rounded-full overflow-hidden flex items-center justify-center bg-[#3B82F6]"> |
| 4 | <img src="https://i.pravatar.cc/96?img=3" alt="" class="w-full h-full object-cover"> |
| 5 | </div> |
| 6 | <span class="absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full bg-[#EF4444] text-white text-[10px] font-bold flex items-center justify-center border-2 border-[#0D0D0D] font-mono"> |
| 7 | 3 |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="relative flex-shrink-0"> |
| 11 | <div class="w-12 h-12 rounded-full overflow-hidden flex items-center justify-center text-[15px] font-bold text-white bg-[#A855F7]"> |
| 12 | AB |
| 13 | </div> |
| 14 | <span class="absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full bg-[#EF4444] text-white text-[10px] font-bold flex items-center justify-center border-2 border-[#0D0D0D] font-mono"> |
| 15 | 12 |
| 16 | </span> |
| 17 | </div> |
| 18 | <div class="relative flex-shrink-0"> |
| 19 | <div class="w-12 h-12 rounded-full overflow-hidden flex items-center justify-center text-[15px] font-bold text-white bg-[#22C55E]"> |
| 20 | KW |
| 21 | </div> |
| 22 | <span class="absolute top-0 right-0 w-3 h-3 rounded-full bg-[#EF4444] border-2 border-[#0D0D0D]"> |
| 23 | </span> |
| 24 | </div> |
| 25 | <div class="relative flex-shrink-0"> |
| 26 | <div class="w-12 h-12 rounded-full overflow-hidden flex items-center justify-center text-[15px] font-bold text-white bg-[#606080]"> |
| 27 | MR |
| 28 | </div> |
| 29 | <span class="absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full bg-[#EF4444] text-white text-[10px] font-bold flex items-center justify-center border-2 border-[#0D0D0D] font-mono"> |
| 30 | 99+ |
| 31 | </span> |
| 32 | </div> |
| 33 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-4 align-items-center justify-content-center p-4"> |
| 2 | <div class="position-relative flex-shrink-0"> |
| 3 | <div class="rounded-circle overflow-hidden d-flex align-items-center justify-content-center" style="width:48px;height:48px;background:#3B82F6"> |
| 4 | <img src="https://i.pravatar.cc/96?img=3" alt="" class="w-100 h-100 object-fit-cover"> |
| 5 | </div> |
| 6 | <span class="position-absolute d-flex align-items-center justify-content-center fw-bold text-white font-monospace" style="top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#EF4444;border:2px solid #0D0D0D;font-size:10px"> |
| 7 | 3 |
| 8 | </span> |
| 9 | </div> |
| 10 | <div class="position-relative flex-shrink-0"> |
| 11 | <div class="rounded-circle overflow-hidden d-flex align-items-center justify-content-center fw-bold text-white" style="width:48px;height:48px;background:#A855F7"> |
| 12 | AB |
| 13 | </div> |
| 14 | <span class="position-absolute d-flex align-items-center justify-content-center fw-bold text-white font-monospace" style="top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#EF4444;border:2px solid #0D0D0D;font-size:10px"> |
| 15 | 12 |
| 16 | </span> |
| 17 | </div> |
| 18 | <div class="position-relative flex-shrink-0"> |
| 19 | <div class="rounded-circle overflow-hidden d-flex align-items-center justify-content-center fw-bold text-white" style="width:48px;height:48px;background:#22C55E"> |
| 20 | KW |
| 21 | </div> |
| 22 | <span class="position-absolute rounded-circle" style="top:0;right:0;width:12px;height:12px;background:#EF4444;border:2px solid #0D0D0D"> |
| 23 | </span> |
| 24 | </div> |
| 25 | <div class="position-relative flex-shrink-0"> |
| 26 | <div class="rounded-circle overflow-hidden d-flex align-items-center justify-content-center fw-bold text-white" style="width:48px;height:48px;background:#606080"> |
| 27 | MR |
| 28 | </div> |
| 29 | <span class="position-absolute d-flex align-items-center justify-content-center fw-bold text-white font-monospace" style="top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#EF4444;border:2px solid #0D0D0D;font-size:10px"> |
| 30 | 99+ |
| 31 | </span> |
| 32 | </div> |
| 33 | </div> |
Avatar Groups
Overlapping avatar stacks showing team members or collaborators with an overflow count.
avatar-group
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="avatar-group"> |
| 3 | <div class="avatar a1" style="background:#3B82F6"> |
| 4 | JD |
| 5 | </div> |
| 6 | <div class="avatar a2" style="background:#A855F7"> |
| 7 | AB |
| 8 | </div> |
| 9 | <div class="avatar a3" style="background:#22C55E"> |
| 10 | KW |
| 11 | </div> |
| 12 | <div class="avatar a4" style="background:#F97316"> |
| 13 | MR |
| 14 | </div> |
| 15 | <div class="avatar a5" style="background:#606080"> |
| 16 | +5 |
| 17 | </div> |
| 18 | </div> |
| 19 | <div class="avatar-group large"> |
| 20 | <div class="avatar"> |
| 21 | <img src="https://i.pravatar.cc/96?img=1" alt=""> |
| 22 | </div> |
| 23 | <div class="avatar"> |
| 24 | <img src="https://i.pravatar.cc/96?img=8" alt=""> |
| 25 | </div> |
| 26 | <div class="avatar"> |
| 27 | <img src="https://i.pravatar.cc/96?img=11" alt=""> |
| 28 | </div> |
| 29 | <div class="avatar overflow"> |
| 30 | +12 |
| 31 | </div> |
| 32 | </div> |
| 33 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | flex-direction:column; |
| 4 | gap:20px; |
| 5 | align-items:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .avatar-group { |
| 9 | display:flex |
| 10 | } |
| 11 | .avatar-group .avatar { |
| 12 | width:40px; |
| 13 | height:40px; |
| 14 | border-radius:50%; |
| 15 | display:flex; |
| 16 | align-items:center; |
| 17 | justify-content:center; |
| 18 | font-size:13px; |
| 19 | font-weight:700; |
| 20 | color:#fff; |
| 21 | font-family:system-ui, |
| 22 | sans-serif; |
| 23 | border:3px solid #0D0D0D; |
| 24 | overflow:hidden; |
| 25 | margin-left:-10px |
| 26 | } |
| 27 | .avatar-group .avatar:first-child { |
| 28 | margin-left:0 |
| 29 | } |
| 30 | .avatar-group .avatar img { |
| 31 | width:100%; |
| 32 | height:100%; |
| 33 | object-fit:cover |
| 34 | } |
| 35 | .avatar-group.large .avatar { |
| 36 | width:48px; |
| 37 | height:48px; |
| 38 | font-size:15px; |
| 39 | margin-left:-12px |
| 40 | } |
| 41 | .avatar-group.large .avatar:first-child { |
| 42 | margin-left:0 |
| 43 | } |
| 44 | .avatar.overflow { |
| 45 | background:#1A1A2E; |
| 46 | color:#A0A0A0; |
| 47 | font-size:12px; |
| 48 | border-color:#0D0D0D |
| 49 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col gap-5 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <div class="flex"> |
| 3 | <div class="w-10 h-10 rounded-full flex items-center justify-center text-[13px] font-bold text-white border-[3px] border-[#0D0D0D] -ml-2.5 first:ml-0 overflow-hidden bg-[#3B82F6]"> |
| 4 | JD |
| 5 | </div> |
| 6 | <div class="w-10 h-10 rounded-full flex items-center justify-center text-[13px] font-bold text-white border-[3px] border-[#0D0D0D] -ml-2.5 first:ml-0 overflow-hidden bg-[#A855F7]"> |
| 7 | AB |
| 8 | </div> |
| 9 | <div class="w-10 h-10 rounded-full flex items-center justify-center text-[13px] font-bold text-white border-[3px] border-[#0D0D0D] -ml-2.5 first:ml-0 overflow-hidden bg-[#22C55E]"> |
| 10 | KW |
| 11 | </div> |
| 12 | <div class="w-10 h-10 rounded-full flex items-center justify-center text-[13px] font-bold text-white border-[3px] border-[#0D0D0D] -ml-2.5 first:ml-0 overflow-hidden bg-[#F97316]"> |
| 13 | MR |
| 14 | </div> |
| 15 | <div class="w-10 h-10 rounded-full flex items-center justify-center text-[12px] font-bold text-[#A0A0A0] border-[3px] border-[#0D0D0D] -ml-2.5 first:ml-0 bg-[#1A1A2E]"> |
| 16 | +5 |
| 17 | </div> |
| 18 | </div> |
| 19 | <div class="flex"> |
| 20 | <div class="w-12 h-12 rounded-full flex items-center justify-center border-[3px] border-[#0D0D0D] -ml-3 first:ml-0 overflow-hidden"> |
| 21 | <img src="https://i.pravatar.cc/96?img=1" alt="" class="w-full h-full object-cover"> |
| 22 | </div> |
| 23 | <div class="w-12 h-12 rounded-full flex items-center justify-center border-[3px] border-[#0D0D0D] -ml-3 first:ml-0 overflow-hidden"> |
| 24 | <img src="https://i.pravatar.cc/96?img=8" alt="" class="w-full h-full object-cover"> |
| 25 | </div> |
| 26 | <div class="w-12 h-12 rounded-full flex items-center justify-center border-[3px] border-[#0D0D0D] -ml-3 first:ml-0 overflow-hidden"> |
| 27 | <img src="https://i.pravatar.cc/96?img=11" alt="" class="w-full h-full object-cover"> |
| 28 | </div> |
| 29 | <div class="w-12 h-12 rounded-full flex items-center justify-center text-[15px] font-bold text-[#A0A0A0] border-[3px] border-[#0D0D0D] -ml-3 first:ml-0 bg-[#1A1A2E]"> |
| 30 | +12 |
| 31 | </div> |
| 32 | </div> |
| 33 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column gap-4 align-items-center justify-content-center p-4"> |
| 2 | <div class="d-flex"> |
| 3 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white border border-3" style="width:40px;height:40px;font-size:13px;margin-left:-10px;border-color:#0D0D0D!important;background:#3B82F6"> |
| 4 | JD |
| 5 | </div> |
| 6 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white border border-3" style="width:40px;height:40px;font-size:13px;margin-left:-10px;border-color:#0D0D0D!important;background:#A855F7"> |
| 7 | AB |
| 8 | </div> |
| 9 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white border border-3" style="width:40px;height:40px;font-size:13px;margin-left:-10px;border-color:#0D0D0D!important;background:#22C55E"> |
| 10 | KW |
| 11 | </div> |
| 12 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white border border-3" style="width:40px;height:40px;font-size:13px;margin-left:-10px;border-color:#0D0D0D!important;background:#F97316"> |
| 13 | MR |
| 14 | </div> |
| 15 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-secondary border border-3" style="width:40px;height:40px;font-size:12px;margin-left:-10px;border-color:#0D0D0D!important;background:#1A1A2E"> |
| 16 | +5 |
| 17 | </div> |
| 18 | </div> |
| 19 | <div class="d-flex"> |
| 20 | <div class="rounded-circle overflow-hidden border border-3" style="width:48px;height:48px;margin-left:-12px;border-color:#0D0D0D!important"> |
| 21 | <img src="https://i.pravatar.cc/96?img=1" alt="" class="w-100 h-100 object-fit-cover"> |
| 22 | </div> |
| 23 | <div class="rounded-circle overflow-hidden border border-3" style="width:48px;height:48px;margin-left:-12px;border-color:#0D0D0D!important"> |
| 24 | <img src="https://i.pravatar.cc/96?img=8" alt="" class="w-100 h-100 object-fit-cover"> |
| 25 | </div> |
| 26 | <div class="rounded-circle overflow-hidden border border-3" style="width:48px;height:48px;margin-left:-12px;border-color:#0D0D0D!important"> |
| 27 | <img src="https://i.pravatar.cc/96?img=11" alt="" class="w-100 h-100 object-fit-cover"> |
| 28 | </div> |
| 29 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-secondary border border-3" style="width:48px;height:48px;font-size:15px;margin-left:-12px;border-color:#0D0D0D!important;background:#1A1A2E"> |
| 30 | +12 |
| 31 | </div> |
| 32 | </div> |
| 33 | </div> |
🔥
pro tip
For avatar groups, use negative margins to create the overlap effect. Always add a 3px border matching the background to separate overlapping avatars visually. Cap the visible count and show "+N" for the rest.
Shape Variants
Round, square, and rounded-square avatar shapes for different design contexts.
avatar-shapes
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="avatar round" style="background:#3B82F6"> |
| 3 | JD |
| 4 | </div> |
| 5 | <div class="avatar square" style="background:#A855F7"> |
| 6 | AB |
| 7 | </div> |
| 8 | <div class="avatar rounded" style="background:#22C55E"> |
| 9 | KW |
| 10 | </div> |
| 11 | <div class="avatar round" style="background:#F97316"> |
| 12 | <img src="https://i.pravatar.cc/96?img=5" alt=""> |
| 13 | </div> |
| 14 | <div class="avatar square" style="background:#EF4444"> |
| 15 | <img src="https://i.pravatar.cc/96?img=9" alt=""> |
| 16 | </div> |
| 17 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:14px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .avatar { |
| 9 | width:52px; |
| 10 | height:52px; |
| 11 | display:flex; |
| 12 | align-items:center; |
| 13 | justify-content:center; |
| 14 | font-size:16px; |
| 15 | font-weight:700; |
| 16 | color:#fff; |
| 17 | font-family:system-ui, |
| 18 | sans-serif; |
| 19 | overflow:hidden; |
| 20 | flex-shrink:0 |
| 21 | } |
| 22 | .avatar img { |
| 23 | width:100%; |
| 24 | height:100%; |
| 25 | object-fit:cover |
| 26 | } |
| 27 | .round { |
| 28 | border-radius:50% |
| 29 | } |
| 30 | .square { |
| 31 | border-radius:8px |
| 32 | } |
| 33 | .rounded { |
| 34 | border-radius:16px |
| 35 | } |
untitled.html
HTML
| 1 | <div class="flex gap-3.5 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <div class="w-[52px] h-[52px] rounded-full flex items-center justify-center text-base font-bold text-white bg-[#3B82F6]"> |
| 3 | JD |
| 4 | </div> |
| 5 | <div class="w-[52px] h-[52px] rounded-lg flex items-center justify-center text-base font-bold text-white bg-[#A855F7]"> |
| 6 | AB |
| 7 | </div> |
| 8 | <div class="w-[52px] h-[52px] rounded-2xl flex items-center justify-center text-base font-bold text-white bg-[#22C55E]"> |
| 9 | KW |
| 10 | </div> |
| 11 | <div class="w-[52px] h-[52px] rounded-full overflow-hidden bg-[#F97316]"> |
| 12 | <img src="https://i.pravatar.cc/96?img=5" alt="" class="w-full h-full object-cover"> |
| 13 | </div> |
| 14 | <div class="w-[52px] h-[52px] rounded-lg overflow-hidden bg-[#EF4444]"> |
| 15 | <img src="https://i.pravatar.cc/96?img=9" alt="" class="w-full h-full object-cover"> |
| 16 | </div> |
| 17 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-3 align-items-center justify-content-center p-4"> |
| 2 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:52px;height:52px;background:#3B82F6"> |
| 3 | JD |
| 4 | </div> |
| 5 | <div class="d-flex align-items-center justify-content-center fw-bold text-white" style="width:52px;height:52px;border-radius:8px;background:#A855F7"> |
| 6 | AB |
| 7 | </div> |
| 8 | <div class="d-flex align-items-center justify-content-center fw-bold text-white" style="width:52px;height:52px;border-radius:16px;background:#22C55E"> |
| 9 | KW |
| 10 | </div> |
| 11 | <div class="rounded-circle overflow-hidden" style="width:52px;height:52px;background:#F97316"> |
| 12 | <img src="https://i.pravatar.cc/96?img=5" alt="" class="w-100 h-100 object-fit-cover"> |
| 13 | </div> |
| 14 | <div class="overflow-hidden" style="width:52px;height:52px;border-radius:8px;background:#EF4444"> |
| 15 | <img src="https://i.pravatar.cc/96?img=9" alt="" class="w-100 h-100 object-fit-cover"> |
| 16 | </div> |
| 17 | </div> |
Ring & Bordered
Highlight active users, verified accounts, or selection state with colored rings and dashed borders.
avatar-ring
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="avatar ring-green"> |
| 3 | JD |
| 4 | </div> |
| 5 | <div class="avatar ring-blue"> |
| 6 | AB |
| 7 | </div> |
| 8 | <div class="avatar ring-glow"> |
| 9 | KW |
| 10 | </div> |
| 11 | <div class="avatar ring-dashed"> |
| 12 | MR |
| 13 | </div> |
| 14 | <div class="avatar ring-white"> |
| 15 | <img src="https://i.pravatar.cc/96?img=7" alt=""> |
| 16 | </div> |
| 17 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:16px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .avatar { |
| 9 | width:48px; |
| 10 | height:48px; |
| 11 | border-radius:50%; |
| 12 | display:flex; |
| 13 | align-items:center; |
| 14 | justify-content:center; |
| 15 | font-size:15px; |
| 16 | font-weight:700; |
| 17 | color:#fff; |
| 18 | font-family:system-ui, |
| 19 | sans-serif; |
| 20 | overflow:hidden; |
| 21 | background:#151515 |
| 22 | } |
| 23 | .avatar img { |
| 24 | width:100%; |
| 25 | height:100%; |
| 26 | object-fit:cover |
| 27 | } |
| 28 | .ring-green { |
| 29 | box-shadow:0 0 0 3px #22C55E |
| 30 | } |
| 31 | .ring-blue { |
| 32 | box-shadow:0 0 0 3px #3B82F6 |
| 33 | } |
| 34 | .ring-glow { |
| 35 | box-shadow:0 0 0 3px #00FF41, |
| 36 | 0 0 16px rgba(0, |
| 37 | 255, |
| 38 | 65, |
| 39 | .35) |
| 40 | } |
| 41 | .ring-dashed { |
| 42 | box-shadow:0 0 0 3px #606080; |
| 43 | background:transparent; |
| 44 | border:2px dashed #606080 |
| 45 | } |
| 46 | .ring-white { |
| 47 | box-shadow:0 0 0 3px #E0E0E0, |
| 48 | 0 0 0 6px #1A1A2E |
| 49 | } |
untitled.html
HTML
| 1 | <div class="flex gap-4 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <div class="w-12 h-12 rounded-full flex items-center justify-center text-[15px] font-bold text-white bg-[#151515] shadow-[0_0_0_3px_#22C55E]"> |
| 3 | JD |
| 4 | </div> |
| 5 | <div class="w-12 h-12 rounded-full flex items-center justify-center text-[15px] font-bold text-white bg-[#151515] shadow-[0_0_0_3px_#3B82F6]"> |
| 6 | AB |
| 7 | </div> |
| 8 | <div class="w-12 h-12 rounded-full flex items-center justify-center text-[15px] font-bold text-white bg-[#151515] shadow-[0_0_0_3px_#00FF41,0_0_16px_rgba(0,255,65,0.35)]"> |
| 9 | KW |
| 10 | </div> |
| 11 | <div class="w-12 h-12 rounded-full flex items-center justify-center text-[15px] font-bold text-[#808080] bg-transparent border-2 border-dashed border-[#606080] shadow-[0_0_0_3px_#606080]"> |
| 12 | MR |
| 13 | </div> |
| 14 | <div class="w-12 h-12 rounded-full overflow-hidden shadow-[0_0_0_3px_#E0E0E0,0_0_0_6px_#1A1A2E]"> |
| 15 | <img src="https://i.pravatar.cc/96?img=7" alt="" class="w-full h-full object-cover"> |
| 16 | </div> |
| 17 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-4 align-items-center justify-content-center p-4"> |
| 2 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:48px;height:48px;background:#151515;box-shadow:0 0 0 3px #22C55E"> |
| 3 | JD |
| 4 | </div> |
| 5 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:48px;height:48px;background:#151515;box-shadow:0 0 0 3px #3B82F6"> |
| 6 | AB |
| 7 | </div> |
| 8 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white" style="width:48px;height:48px;background:#151515;box-shadow:0 0 0 3px #00FF41,0 0 16px rgba(0,255,65,.35)"> |
| 9 | KW |
| 10 | </div> |
| 11 | <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-secondary border border-2 border-dashed" style="width:48px;height:48px;background:transparent;box-shadow:0 0 0 3px #606080;border-color:#606080"> |
| 12 | MR |
| 13 | </div> |
| 14 | <div class="rounded-circle overflow-hidden" style="width:48px;height:48px;box-shadow:0 0 0 3px #E0E0E0,0 0 0 6px #1A1A2E"> |
| 15 | <img src="https://i.pravatar.cc/96?img=7" alt="" class="w-100 h-100 object-fit-cover"> |
| 16 | </div> |
| 17 | </div> |
Icon Avatars
Entity or team avatars built with inline SVG icons instead of initials or photos.
avatar-icon
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="avatar team"> |
| 3 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="22" height="22"> |
| 4 | <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/> |
| 5 | <circle cx="9" cy="7" r="4"/> |
| 6 | <path d="M23 21v-2a4 4 0 0 0-3-3.87"/> |
| 7 | <path d="M16 3.13a4 4 0 0 1 0 7.75"/> |
| 8 | </svg> |
| 9 | </div> |
| 10 | <div class="avatar bot"> |
| 11 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="22" height="22"> |
| 12 | <rect x="3" y="11" width="18" height="10" rx="2"/> |
| 13 | <circle cx="12" cy="5" r="2"/> |
| 14 | <path d="M12 7v4"/> |
| 15 | <line x1="8" y1="16" x2="8" y2="16"/> |
| 16 | <line x1="16" y1="16" x2="16" y2="16"/> |
| 17 | </svg> |
| 18 | </div> |
| 19 | <div class="avatar org"> |
| 20 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="22" height="22"> |
| 21 | <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/> |
| 22 | <polyline points="9 22 9 12 15 12 15 22"/> |
| 23 | </svg> |
| 24 | </div> |
| 25 | <div class="avatar lock"> |
| 26 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="22" height="22"> |
| 27 | <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/> |
| 28 | <path d="M7 11V7a5 5 0 0 1 10 0v4"/> |
| 29 | </svg> |
| 30 | </div> |
| 31 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:16px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:32px |
| 7 | } |
| 8 | .avatar { |
| 9 | width:48px; |
| 10 | height:48px; |
| 11 | border-radius:50%; |
| 12 | display:flex; |
| 13 | align-items:center; |
| 14 | justify-content:center; |
| 15 | color:#fff; |
| 16 | flex-shrink:0 |
| 17 | } |
| 18 | .team { |
| 19 | background:#3B82F6 |
| 20 | } |
| 21 | .bot { |
| 22 | background:#00FF41; |
| 23 | color:#0A0A0A |
| 24 | } |
| 25 | .org { |
| 26 | background:#A855F7 |
| 27 | } |
| 28 | .lock { |
| 29 | background:#1A1A2E; |
| 30 | color:#00FF41; |
| 31 | border:1px solid #00FF41 |
| 32 | } |
untitled.html
HTML
| 1 | <div class="flex gap-4 items-center justify-center p-8 bg-[#0A0A0A]"> |
| 2 | <div class="w-12 h-12 rounded-full flex items-center justify-center text-white bg-[#3B82F6]"> |
| 3 | <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/> |
| 5 | <circle cx="9" cy="7" r="4"/> |
| 6 | <path d="M23 21v-2a4 4 0 0 0-3-3.87"/> |
| 7 | <path d="M16 3.13a4 4 0 0 1 0 7.75"/> |
| 8 | </svg> |
| 9 | </div> |
| 10 | <div class="w-12 h-12 rounded-full flex items-center justify-center text-[#0A0A0A] bg-[#00FF41]"> |
| 11 | <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 12 | <rect x="3" y="11" width="18" height="10" rx="2"/> |
| 13 | <circle cx="12" cy="5" r="2"/> |
| 14 | <path d="M12 7v4"/> |
| 15 | <line x1="8" y1="16" x2="8" y2="16"/> |
| 16 | <line x1="16" y1="16" x2="16" y2="16"/> |
| 17 | </svg> |
| 18 | </div> |
| 19 | <div class="w-12 h-12 rounded-full flex items-center justify-center text-white bg-[#A855F7]"> |
| 20 | <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 21 | <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/> |
| 22 | <polyline points="9 22 9 12 15 12 15 22"/> |
| 23 | </svg> |
| 24 | </div> |
| 25 | <div class="w-12 h-12 rounded-full flex items-center justify-center text-[#00FF41] bg-[#1A1A2E] border border-[#00FF41]"> |
| 26 | <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 27 | <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/> |
| 28 | <path d="M7 11V7a5 5 0 0 1 10 0v4"/> |
| 29 | </svg> |
| 30 | </div> |
| 31 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex gap-4 align-items-center justify-content-center p-4"> |
| 2 | <div class="rounded-circle d-flex align-items-center justify-content-center text-white" style="width:48px;height:48px;background:#3B82F6"> |
| 3 | <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 4 | <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/> |
| 5 | <circle cx="9" cy="7" r="4"/> |
| 6 | <path d="M23 21v-2a4 4 0 0 0-3-3.87"/> |
| 7 | <path d="M16 3.13a4 4 0 0 1 0 7.75"/> |
| 8 | </svg> |
| 9 | </div> |
| 10 | <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:48px;height:48px;background:#00FF41;color:#0A0A0A"> |
| 11 | <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 12 | <rect x="3" y="11" width="18" height="10" rx="2"/> |
| 13 | <circle cx="12" cy="5" r="2"/> |
| 14 | <path d="M12 7v4"/> |
| 15 | <line x1="8" y1="16" x2="8" y2="16"/> |
| 16 | <line x1="16" y1="16" x2="16" y2="16"/> |
| 17 | </svg> |
| 18 | </div> |
| 19 | <div class="rounded-circle d-flex align-items-center justify-content-center text-white" style="width:48px;height:48px;background:#A855F7"> |
| 20 | <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 21 | <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/> |
| 22 | <polyline points="9 22 9 12 15 12 15 22"/> |
| 23 | </svg> |
| 24 | </div> |
| 25 | <div class="rounded-circle d-flex align-items-center justify-content-center border" style="width:48px;height:48px;background:#1A1A2E;color:#00FF41;border-color:#00FF41"> |
| 26 | <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| 27 | <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/> |
| 28 | <path d="M7 11V7a5 5 0 0 1 10 0v4"/> |
| 29 | </svg> |
| 30 | </div> |
| 31 | </div> |
Avatar with Text
Avatars paired with name, role, and description — the building block of user lists and team pages.
avatar-text
Live
untitled.html
HTML
| 1 | <div class="list"> |
| 2 | <div class="user-row"> |
| 3 | <div class="avatar" style="background:#3B82F6"> |
| 4 | <img src="https://i.pravatar.cc/96?img=1" alt=""> |
| 5 | </div> |
| 6 | <div class="info"> |
| 7 | <div class="name"> |
| 8 | Jane Doe |
| 9 | </div> |
| 10 | <div class="role"> |
| 11 | Engineering Lead |
| 12 | </div> |
| 13 | </div> |
| 14 | <button class="follow-btn"> |
| 15 | Follow |
| 16 | </button> |
| 17 | </div> |
| 18 | <div class="user-row"> |
| 19 | <div class="avatar" style="background:#A855F7"> |
| 20 | AB |
| 21 | </div> |
| 22 | <div class="info"> |
| 23 | <div class="name"> |
| 24 | Alex Brown |
| 25 | </div> |
| 26 | <div class="role"> |
| 27 | Product Designer |
| 28 | </div> |
| 29 | </div> |
| 30 | <button class="follow-btn active"> |
| 31 | Following |
| 32 | </button> |
| 33 | </div> |
| 34 | <div class="user-row"> |
| 35 | <div class="avatar" style="background:#22C55E"> |
| 36 | KW |
| 37 | </div> |
| 38 | <div class="info"> |
| 39 | <div class="name"> |
| 40 | Kim West |
| 41 | </div> |
| 42 | <div class="role"> |
| 43 | DevOps Engineer |
| 44 | </div> |
| 45 | </div> |
| 46 | <button class="follow-btn"> |
| 47 | Follow |
| 48 | </button> |
| 49 | </div> |
| 50 | </div> |
untitled.css
CSS
| 1 | .list { |
| 2 | max-width:380px; |
| 3 | margin:16px auto; |
| 4 | display:flex; |
| 5 | flex-direction:column |
| 6 | } |
| 7 | .user-row { |
| 8 | display:flex; |
| 9 | align-items:center; |
| 10 | gap:12px; |
| 11 | padding:12px 16px; |
| 12 | border-bottom:1px solid #1A1A2E; |
| 13 | transition:background .2s |
| 14 | } |
| 15 | .user-row:hover { |
| 16 | background:rgba(255, |
| 17 | 255, |
| 18 | 255, |
| 19 | .02) |
| 20 | } |
| 21 | .avatar { |
| 22 | width:40px; |
| 23 | height:40px; |
| 24 | border-radius:50%; |
| 25 | display:flex; |
| 26 | align-items:center; |
| 27 | justify-content:center; |
| 28 | font-size:14px; |
| 29 | font-weight:700; |
| 30 | color:#fff; |
| 31 | flex-shrink:0; |
| 32 | overflow:hidden |
| 33 | } |
| 34 | .avatar img { |
| 35 | width:100%; |
| 36 | height:100%; |
| 37 | object-fit:cover |
| 38 | } |
| 39 | .info { |
| 40 | flex:1; |
| 41 | min-width:0 |
| 42 | } |
| 43 | .name { |
| 44 | font-size:13px; |
| 45 | color:#E0E0E0; |
| 46 | font-weight:500 |
| 47 | } |
| 48 | .role { |
| 49 | font-size:11px; |
| 50 | color:#606080; |
| 51 | margin-top:1px |
| 52 | } |
| 53 | .follow-btn { |
| 54 | padding:6px 14px; |
| 55 | border-radius:6px; |
| 56 | font-size:11px; |
| 57 | font-weight:600; |
| 58 | cursor:pointer; |
| 59 | border:1px solid #2A2A3E; |
| 60 | background:transparent; |
| 61 | color:#A0A0A0; |
| 62 | transition:all .2s; |
| 63 | flex-shrink:0 |
| 64 | } |
| 65 | .follow-btn:hover { |
| 66 | border-color:#3B82F6; |
| 67 | color:#3B82F6 |
| 68 | } |
| 69 | .follow-btn.active { |
| 70 | background:#3B82F6; |
| 71 | border-color:#3B82F6; |
| 72 | color:#fff |
| 73 | } |
untitled.html
HTML
| 1 | <div class="max-w-sm mx-auto my-4 flex flex-col bg-[#0A0A0A]"> |
| 2 | <div class="flex items-center gap-3 px-4 py-3 border-b border-[#1A1A2E] hover:bg-white/[0.02] transition-colors"> |
| 3 | <div class="w-10 h-10 rounded-full overflow-hidden flex items-center justify-center text-sm font-bold text-white flex-shrink-0 bg-[#3B82F6]"> |
| 4 | <img src="https://i.pravatar.cc/96?img=1" alt="" class="w-full h-full object-cover"> |
| 5 | </div> |
| 6 | <div class="flex-1 min-w-0"> |
| 7 | <div class="text-[13px] font-medium text-[#E0E0E0]"> |
| 8 | Jane Doe |
| 9 | </div> |
| 10 | <div class="text-[11px] text-[#606080] mt-px"> |
| 11 | Engineering Lead |
| 12 | </div> |
| 13 | </div> |
| 14 | <button class="px-3.5 py-1.5 rounded-md text-[11px] font-semibold border border-[#2A2A3E] bg-transparent text-[#A0A0A0] hover:border-[#3B82F6] hover:text-[#3B82F6] transition-all flex-shrink-0"> |
| 15 | Follow |
| 16 | </button> |
| 17 | </div> |
| 18 | <div class="flex items-center gap-3 px-4 py-3 border-b border-[#1A1A2E] hover:bg-white/[0.02] transition-colors"> |
| 19 | <div class="w-10 h-10 rounded-full overflow-hidden flex items-center justify-center text-sm font-bold text-white flex-shrink-0 bg-[#A855F7]"> |
| 20 | AB |
| 21 | </div> |
| 22 | <div class="flex-1 min-w-0"> |
| 23 | <div class="text-[13px] font-medium text-[#E0E0E0]"> |
| 24 | Alex Brown |
| 25 | </div> |
| 26 | <div class="text-[11px] text-[#606080] mt-px"> |
| 27 | Product Designer |
| 28 | </div> |
| 29 | </div> |
| 30 | <button class="px-3.5 py-1.5 rounded-md text-[11px] font-semibold border border-[#3B82F6] bg-[#3B82F6] text-white transition-all flex-shrink-0"> |
| 31 | Following |
| 32 | </button> |
| 33 | </div> |
| 34 | <div class="flex items-center gap-3 px-4 py-3 border-b border-[#1A1A2E] hover:bg-white/[0.02] transition-colors"> |
| 35 | <div class="w-10 h-10 rounded-full overflow-hidden flex items-center justify-center text-sm font-bold text-white flex-shrink-0 bg-[#22C55E]"> |
| 36 | KW |
| 37 | </div> |
| 38 | <div class="flex-1 min-w-0"> |
| 39 | <div class="text-[13px] font-medium text-[#E0E0E0]"> |
| 40 | Kim West |
| 41 | </div> |
| 42 | <div class="text-[11px] text-[#606080] mt-px"> |
| 43 | DevOps Engineer |
| 44 | </div> |
| 45 | </div> |
| 46 | <button class="px-3.5 py-1.5 rounded-md text-[11px] font-semibold border border-[#2A2A3E] bg-transparent text-[#A0A0A0] hover:border-[#3B82F6] hover:text-[#3B82F6] transition-all flex-shrink-0"> |
| 47 | Follow |
| 48 | </button> |
| 49 | </div> |
| 50 | </div> |
untitled.html
HTML
| 1 | <div class="mx-auto my-3 d-flex flex-column" style="max-width:380px"> |
| 2 | <div class="d-flex align-items-center gap-3 px-3 py-2 border-bottom" style="border-color:#1A1A2E!important"> |
| 3 | <div class="rounded-circle overflow-hidden flex-shrink-0 d-flex align-items-center justify-content-center fw-bold text-white" style="width:40px;height:40px;font-size:14px;background:#3B82F6"> |
| 4 | <img src="https://i.pravatar.cc/96?img=1" alt="" class="w-100 h-100 object-fit-cover"> |
| 5 | </div> |
| 6 | <div class="flex-fill text-truncate"> |
| 7 | <div class="text-[13px] fw-medium" style="color:#E0E0E0"> |
| 8 | Jane Doe |
| 9 | </div> |
| 10 | <div style="font-size:11px;color:#606080"> |
| 11 | Engineering Lead |
| 12 | </div> |
| 13 | </div> |
| 14 | <button class="btn btn-outline-secondary btn-sm fw-semibold flex-shrink-0" style="--bs-btn-color:#A0A0A0;--bs-btn-border-color:#2A2A3E;--bs-btn-hover-color:#3B82F6;--bs-btn-hover-border-color:#3B82F6;--bs-btn-hover-bg:transparent"> |
| 15 | Follow |
| 16 | </button> |
| 17 | </div> |
| 18 | <div class="d-flex align-items-center gap-3 px-3 py-2 border-bottom" style="border-color:#1A1A2E!important"> |
| 19 | <div class="rounded-circle overflow-hidden flex-shrink-0 d-flex align-items-center justify-content-center fw-bold text-white" style="width:40px;height:40px;font-size:14px;background:#A855F7"> |
| 20 | AB |
| 21 | </div> |
| 22 | <div class="flex-fill text-truncate"> |
| 23 | <div class="text-[13px] fw-medium" style="color:#E0E0E0"> |
| 24 | Alex Brown |
| 25 | </div> |
| 26 | <div style="font-size:11px;color:#606080"> |
| 27 | Product Designer |
| 28 | </div> |
| 29 | </div> |
| 30 | <button class="btn btn-primary btn-sm fw-semibold flex-shrink-0" style="--bs-btn-bg:#3B82F6;--bs-btn-border-color:#3B82F6"> |
| 31 | Following |
| 32 | </button> |
| 33 | </div> |
| 34 | <div class="d-flex align-items-center gap-3 px-3 py-2 border-bottom" style="border-color:#1A1A2E!important"> |
| 35 | <div class="rounded-circle overflow-hidden flex-shrink-0 d-flex align-items-center justify-content-center fw-bold text-white" style="width:40px;height:40px;font-size:14px;background:#22C55E"> |
| 36 | KW |
| 37 | </div> |
| 38 | <div class="flex-fill text-truncate"> |
| 39 | <div class="text-[13px] fw-medium" style="color:#E0E0E0"> |
| 40 | Kim West |
| 41 | </div> |
| 42 | <div style="font-size:11px;color:#606080"> |
| 43 | DevOps Engineer |
| 44 | </div> |
| 45 | </div> |
| 46 | <button class="btn btn-outline-secondary btn-sm fw-semibold flex-shrink-0" style="--bs-btn-color:#A0A0A0;--bs-btn-border-color:#2A2A3E;--bs-btn-hover-color:#3B82F6;--bs-btn-hover-border-color:#3B82F6;--bs-btn-hover-bg:transparent"> |
| 47 | Follow |
| 48 | </button> |
| 49 | </div> |
| 50 | </div> |
📝
note
When pairing avatars with text, maintain consistent spacing and vertical alignment. The avatar should align with the first line of text, not vertically center the entire text block.
Loading Skeleton
Skeleton placeholder avatars while user data is loading — matches the final avatar shape and size.
avatar-skeleton
Live
untitled.html
HTML
| 1 | <div class="wrap"> |
| 2 | <div class="avatar skeleton"> |
| 3 | </div> |
| 4 | <div class="avatar skeleton"> |
| 5 | </div> |
| 6 | <div class="avatar skeleton"> |
| 7 | </div> |
| 8 | <div class="avatar skeleton lg"> |
| 9 | </div> |
| 10 | <div class="avatar skeleton"> |
| 11 | </div> |
| 12 | </div> |
| 13 | <div class="row"> |
| 14 | <div class="avatar skeleton"> |
| 15 | </div> |
| 16 | <div class="lines"> |
| 17 | <div class="line skeleton"> |
| 18 | </div> |
| 19 | <div class="line skeleton short"> |
| 20 | </div> |
| 21 | </div> |
| 22 | </div> |
untitled.css
CSS
| 1 | .wrap { |
| 2 | display:flex; |
| 3 | gap:12px; |
| 4 | align-items:center; |
| 5 | justify-content:center; |
| 6 | padding:24px 32px 8px |
| 7 | } |
| 8 | .row { |
| 9 | display:flex; |
| 10 | gap:12px; |
| 11 | align-items:center; |
| 12 | justify-content:center; |
| 13 | padding:8px 32px 24px |
| 14 | } |
| 15 | .avatar { |
| 16 | width:44px; |
| 17 | height:44px; |
| 18 | border-radius:50%; |
| 19 | flex-shrink:0 |
| 20 | } |
| 21 | .avatar.lg { |
| 22 | width:56px; |
| 23 | height:56px |
| 24 | } |
| 25 | .lines { |
| 26 | display:flex; |
| 27 | flex-direction:column; |
| 28 | gap:8px |
| 29 | } |
| 30 | .line { |
| 31 | height:12px; |
| 32 | border-radius:6px; |
| 33 | width:120px |
| 34 | } |
| 35 | .line.short { |
| 36 | width:80px |
| 37 | } |
| 38 | .skeleton { |
| 39 | background:linear-gradient(90deg, |
| 40 | #1A1A2E 25%, |
| 41 | #2A2A3E 50%, |
| 42 | #1A1A2E 75%); |
| 43 | background-size:200% 100%; |
| 44 | animation:shimmer 1.5s ease-in-out infinite |
| 45 | } |
| 46 | @keyframes shimmer { |
| 47 | 0% { |
| 48 | background-position:200% 0 |
| 49 | } |
| 50 | 100% { |
| 51 | background-position:-200% 0 |
| 52 | } |
| 53 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col items-center justify-center p-6 bg-[#0A0A0A]"> |
| 2 | <div class="flex gap-3 items-center justify-center pb-2"> |
| 3 | <div class="w-11 h-11 rounded-full flex-shrink-0 bg-gradient-to-r from-[#1A1A2E] via-[#2A2A3E] to-[#1A1A2E] bg-[length:200%_100%] animate-[shimmer_1.5s_ease-in-out_infinite]"> |
| 4 | </div> |
| 5 | <div class="w-11 h-11 rounded-full flex-shrink-0 bg-gradient-to-r from-[#1A1A2E] via-[#2A2A3E] to-[#1A1A2E] bg-[length:200%_100%] animate-[shimmer_1.5s_ease-in-out_infinite]"> |
| 6 | </div> |
| 7 | <div class="w-11 h-11 rounded-full flex-shrink-0 bg-gradient-to-r from-[#1A1A2E] via-[#2A2A3E] to-[#1A1A2E] bg-[length:200%_100%] animate-[shimmer_1.5s_ease-in-out_infinite]"> |
| 8 | </div> |
| 9 | <div class="w-14 h-14 rounded-full flex-shrink-0 bg-gradient-to-r from-[#1A1A2E] via-[#2A2A3E] to-[#1A1A2E] bg-[length:200%_100%] animate-[shimmer_1.5s_ease-in-out_infinite]"> |
| 10 | </div> |
| 11 | <div class="w-11 h-11 rounded-full flex-shrink-0 bg-gradient-to-r from-[#1A1A2E] via-[#2A2A3E] to-[#1A1A2E] bg-[length:200%_100%] animate-[shimmer_1.5s_ease-in-out_infinite]"> |
| 12 | </div> |
| 13 | </div> |
| 14 | <div class="flex gap-3 items-center justify-center pt-2"> |
| 15 | <div class="w-11 h-11 rounded-full flex-shrink-0 bg-gradient-to-r from-[#1A1A2E] via-[#2A2A3E] to-[#1A1A2E] bg-[length:200%_100%] animate-[shimmer_1.5s_ease-in-out_infinite]"> |
| 16 | </div> |
| 17 | <div class="flex flex-col gap-2"> |
| 18 | <div class="h-3 rounded-md w-[120px] bg-gradient-to-r from-[#1A1A2E] via-[#2A2A3E] to-[#1A1A2E] bg-[length:200%_100%] animate-[shimmer_1.5s_ease-in-out_infinite]"> |
| 19 | </div> |
| 20 | <div class="h-3 rounded-md w-20 bg-gradient-to-r from-[#1A1A2E] via-[#2A2A3E] to-[#1A1A2E] bg-[length:200%_100%] animate-[shimmer_1.5s_ease-in-out_infinite]"> |
| 21 | </div> |
| 22 | </div> |
| 23 | </div> |
| 24 | </div> |
untitled.html
HTML
| 1 | <div class="d-flex flex-column align-items-center justify-content-center p-4"> |
| 2 | <div class="d-flex gap-3 align-items-center justify-content-center pb-2"> |
| 3 | <div class="rounded-circle flex-shrink-0" style="width:44px;height:44px;background:linear-gradient(90deg,#1A1A2E 25%,#2A2A3E 50%,#1A1A2E 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite"> |
| 4 | </div> |
| 5 | <div class="rounded-circle flex-shrink-0" style="width:44px;height:44px;background:linear-gradient(90deg,#1A1A2E 25%,#2A2A3E 50%,#1A1A2E 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite"> |
| 6 | </div> |
| 7 | <div class="rounded-circle flex-shrink-0" style="width:44px;height:44px;background:linear-gradient(90deg,#1A1A2E 25%,#2A2A3E 50%,#1A1A2E 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite"> |
| 8 | </div> |
| 9 | <div class="rounded-circle flex-shrink-0" style="width:56px;height:56px;background:linear-gradient(90deg,#1A1A2E 25%,#2A2A3E 50%,#1A1A2E 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite"> |
| 10 | </div> |
| 11 | <div class="rounded-circle flex-shrink-0" style="width:44px;height:44px;background:linear-gradient(90deg,#1A1A2E 25%,#2A2A3E 50%,#1A1A2E 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite"> |
| 12 | </div> |
| 13 | </div> |
| 14 | <div class="d-flex gap-3 align-items-center justify-content-center pt-2"> |
| 15 | <div class="rounded-circle flex-shrink-0" style="width:44px;height:44px;background:linear-gradient(90deg,#1A1A2E 25%,#2A2A3E 50%,#1A1A2E 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite"> |
| 16 | </div> |
| 17 | <div class="d-flex flex-column gap-2"> |
| 18 | <div style="height:12px;border-radius:6px;width:120px;background:linear-gradient(90deg,#1A1A2E 25%,#2A2A3E 50%,#1A1A2E 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite"> |
| 19 | </div> |
| 20 | <div style="height:12px;border-radius:6px;width:80px;background:linear-gradient(90deg,#1A1A2E 25%,#2A2A3E 50%,#1A1A2E 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite"> |
| 21 | </div> |
| 22 | </div> |
| 23 | </div> |
| 24 | </div> |
ℹ
info
Skeleton avatars should match the exact dimensions of the real avatars they replace. This prevents layout shift when content loads. Include skeleton text lines next to skeleton avatars for a complete placeholder.
Accessibility
Avatars are often small and visually rich, so they need explicit accessible names and robust fallbacks.
- Image avatars must have meaningful alt text or an aria-label on the wrapper.
- Initial avatars should include visually hidden text or an aria-label with the full user name.
- Status indicators need aria-label descriptions like "Jane Doe is online" or be exposed as part of the avatar label.
- Use real <img> elements with onerror fallbacks, not background images, so failures are detectable.
- Ensure color contrast between initials and background meets WCAG AA (4.5:1).
- Keep avatars focusable only when they are interactive; decorative avatars should not be in the tab order.
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.