Avatars
Represent people and entities with images, initials, sizes, presence indicators, groups, and overflow counts.
Avatars
Avatars are supporting identity cues. Always keep the person or entity name available in adjacent text or an accessible label.
Images and fallbacks
Place an <img> and a fallback inside .bs-avatar. Both occupy the same grid area so the image renders on top and fallback initials or icons display seamlessly if the image is unavailable or loading.
Ada Lovelace<!-- Combined image and fallback -->
<span class="bs-avatar">
<img class="bs-avatar-image" src="/images/ada.jpg" alt="" onerror="this.remove()" />
<span class="bs-avatar-fallback" aria-hidden="true">AL</span>
</span>
<!-- Initials fallback -->
<span class="bs-avatar">
<span class="bs-avatar-fallback" aria-hidden="true">AL</span>
</span>
<!-- Icon fallback -->
<span class="bs-avatar">
<span class="bs-avatar-icon" aria-hidden="true"><i data-lucide="user" class="bs-icon"></i></span>
</span>
<span>Ada Lovelace</span>Sizes and status
<span class="bs-avatar bs-avatar-sm">
<span class="bs-avatar-fallback">S</span>
</span>
<span class="bs-avatar">
<span class="bs-avatar-fallback">M</span>
<span class="bs-avatar-status" aria-label="Online"></span>
</span>
<span class="bs-avatar bs-avatar-lg">
<span class="bs-avatar-fallback">L</span>
<span class="bs-avatar-status bs-avatar-status-warning" aria-label="Away"></span>
</span>
<span class="bs-avatar bs-avatar-xl">
<span class="bs-avatar-fallback">XL</span>
<span class="bs-avatar-status bs-avatar-status-danger" aria-label="Busy"></span>
</span>Badges and icon overlays
Overlay a notification count badge or role icon on the top or bottom corner using .bs-avatar-badge or .bs-avatar-badge-bottom.
AI<!-- Notification badge -->
<span class="bs-avatar">
<span class="bs-avatar-fallback">AL</span>
<span class="bs-avatar-badge" aria-label="3 notifications">3</span>
</span>
<!-- Verified icon badge (bottom right) -->
<span class="bs-avatar bs-avatar-lg">
<img class="bs-avatar-image" src="/favicon.svg" alt="" />
<span class="bs-avatar-badge bs-avatar-badge-bottom" aria-label="Verified user">
<i data-lucide="check" class="bs-icon"></i>
</span>
</span>
<!-- Role / bot badge -->
<span class="bs-avatar bs-avatar-lg">
<span class="bs-avatar-icon"><i data-lucide="bot" class="bs-icon"></i></span>
<span class="bs-avatar-badge" aria-label="AI assistant">AI</span>
</span>Avatar groups
<div class="bs-avatar-group" aria-label="5 project members">
<span class="bs-avatar"><span class="bs-avatar-fallback">AL</span></span>
<span class="bs-avatar"><span class="bs-avatar-fallback">GH</span></span>
<span class="bs-avatar"><span class="bs-avatar-fallback">MK</span></span>
<span class="bs-avatar bs-avatar-excess"><span class="bs-avatar-fallback">+2</span></span>
</div>Decorative image
Use an empty image alt when the visible name already identifies the person.
Status text
Do not rely on the status dot’s color alone. Add a label or adjacent status text.
Group label
Name the group and expose the actual members elsewhere when the stack summarizes collaboration.
Avatar API
Avatar classes compose circular frames, fallback slots, presence indicators, corner badges, and overlapped group collections.
| Class | Purpose |
|---|---|
.bs-avatar | Base circular frame (2.5rem / 40px default) with centered grid content and clipping. |
.bs-avatar-sm | Compact avatar size (1.875rem / 30px) for dense lists and comment threads. |
.bs-avatar-lg | Large avatar size (3.25rem / 52px) for user profiles and header summaries. |
.bs-avatar-xl | Extra large avatar size (4.5rem / 72px) for account settings and profile hero sections. |
.bs-avatar-image | Full-bleed responsive image filling the circular avatar frame. |
.bs-avatar-fallback | Centered text or initials fallback displayed when an image is loading or omitted. |
.bs-avatar-icon | Centered SVG icon fallback displayed when user initials or photos are not provided. |
.bs-avatar-status | Online status dot indicator positioned at the bottom right corner (green by default). |
.bs-avatar-status-warning | Away / idle presence status modifier (amber indicator). |
.bs-avatar-status-danger | Do not disturb / busy presence status modifier (danger red indicator). |
.bs-avatar-badge | Corner count or role label overlaid on the top right edge of the avatar. |
.bs-avatar-badge-bottom | Positions the corner badge on the bottom right edge of the avatar. |
.bs-avatar-group | Overlapping horizontal stack for multiple collaborators or members. |
.bs-avatar-excess | Counter avatar indicating additional omitted members beyond the visible group limit. |