Avatar
Documentation and examples for avatars, including image avatars, initials, status indicators, and avatar stacks.
On this page
Examples
Avatars are used to represent users or entities. They can display an image or initials as a fallback.
Image
Use .avatar with an .avatar-img for image-based avatars. The parent .avatar element provides an easy wrapper for additional avatar features like status indicators and stacks. You're welcome to use the .avatar-img class on its own if you only need a single HTML element.
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>Initials
Use text content inside .avatar for initials-based avatars.
AB
CD
EF
GG
GH
IJ
KL
MN
OP
<span class="avatar">AB</span>
<span class="avatar theme-primary">CD</span>
<span class="avatar theme-accent">EF</span>
<span class="avatar theme-success">GG</span>
<span class="avatar theme-danger">GH</span>
<span class="avatar theme-warning">IJ</span>
<span class="avatar theme-info">KL</span>
<span class="avatar theme-inverse">MN</span>
<span class="avatar theme-secondary">OP</span>Use .avatar-subtle to create a subtle avatar.
AB
CD
EF
GG
GH
IJ
KL
MN
OP
<span class="avatar">AB</span>
<span class="avatar avatar-subtle theme-primary">CD</span>
<span class="avatar avatar-subtle theme-accent">EF</span>
<span class="avatar avatar-subtle theme-success">GG</span>
<span class="avatar avatar-subtle theme-danger">GH</span>
<span class="avatar avatar-subtle theme-warning">IJ</span>
<span class="avatar avatar-subtle theme-info">KL</span>
<span class="avatar avatar-subtle theme-inverse">MN</span>
<span class="avatar avatar-subtle theme-secondary">OP</span>Sizes
Avatars come in multiple sizes: extra small, small, default, large, and extra large.
<span class="avatar avatar-xs">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar avatar-sm">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar avatar-lg">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar avatar-xl">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>Status indicator
Add a .avatar-status element inside the avatar to show a status indicator. Each status has a distinct shape and color:
.status-online— green circle.status-offline— gray rounded square.status-busy— red rounded square.status-away— yellow circle
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
<span class="avatar-status status-online"></span>
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
<span class="avatar-status status-offline"></span>
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
<span class="avatar-status status-busy"></span>
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
<span class="avatar-status status-away"></span>
</span>Status with sizes
The status indicator scales with the avatar size.
<span class="avatar avatar-xs">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
<span class="avatar-status status-online"></span>
</span>
<span class="avatar avatar-sm">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
<span class="avatar-status status-online"></span>
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
<span class="avatar-status status-online"></span>
</span>
<span class="avatar avatar-lg">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
<span class="avatar-status status-online"></span>
</span>
<span class="avatar avatar-xl">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
<span class="avatar-status status-online"></span>
</span>Avatar stack
Use .avatar-stack to group multiple avatars together with overlapping effect. Avatars are rendered in reverse order so the first avatar appears on top. Stacks use a percentage of the avatar size to determine how much to overlap stacked avatars.
<div class="avatar-stack">
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
</div>Stack with sizes
As a shorthand, size classes are available for .avatar-stack and .avatar.
<div class="avatar-stack avatar-stack-xs">
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
</div>
<div class="avatar-stack avatar-stack-sm">
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
</div>
<div class="avatar-stack">
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
</div>
<div class="avatar-stack avatar-stack-lg">
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
</div>
<div class="avatar-stack avatar-stack-xl">
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
</div>Stack with count
Combine with initials to show a count of additional users.
<div class="avatar-stack">
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://github.com/mdo.png" alt="mdo">
</span>
<span class="avatar">
<img class="avatar-img" src="https://i.pravatar.cc/150?img=34" alt="User avatar">
</span>
<span class="avatar theme-secondary">+5</span>
</div>CSS
Variables
Avatar use local CSS variables on .avatar for real-time customization.
Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--avatar-border-radius: #{$avatar-border-radius};
--avatar-border-width: #{$avatar-border-width};
--avatar-border-color: #{$avatar-border-color};
--avatar-bg: #{$avatar-bg};
--avatar-color: #{$avatar-color};
--avatar-status-size: #{$avatar-status-size};
--avatar-status-border-width: #{$avatar-status-border-width};
--avatar-status-border-color: #{$avatar-status-border-color};
Sass variables
$avatar-size: 2.5rem;
$avatar-size-xs: 1.5rem;
$avatar-size-sm: 2rem;
$avatar-size-lg: 3rem;
$avatar-size-xl: 4rem;
$avatar-border-radius: 50%;
$avatar-border-width: 2px;
$avatar-border-color: var(--bg-body);
$avatar-bg: var(--bg-2);
$avatar-color: var(--color-body);
$avatar-status-size: .75rem;
$avatar-status-border-width: 2px;
$avatar-status-border-color: var(--bg-body);
$avatar-stack-spacing: -.3; // Percentage of avatar size (negative for overlap)