Avatar · Bootstrap v6.0

Documentation and examples for avatars, including image avatars, initials, status indicators, and avatar stacks.
Avatars are used to represent users or entities. They can display an image or initials as a fallback.
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.
When used inside the .avatar wrapper, the image fills the wrapper and its size is set with --avatar-size. Used on its own, .avatar-img honors its own width and height instead, so set them to your desired size.
Use text content inside .avatar for initials-based avatars.
Use .avatar-subtle to create a subtle avatar.
Avatars come in multiple sizes: extra small, small, default, large, and extra large.
Use a custom size by modifying the --bs-avatar-size variable.
Add a .avatar-status element inside the avatar to show a status indicator. Each status has a distinct shape and color:
Because the status is conveyed purely through color and shape, give each .avatar-status a role="img" and an aria-label (e.g. Online) so assistive technologies can announce it.
The status indicator scales with the avatar size.
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.
As a shorthand, size classes are available for .avatar-stack and .avatar.
Combine with initials to show a count of additional users.
Avatar use local CSS variables on .avatar for real-time customization. Values for the CSS variables are generated from Sass maps unique to each component and applied to the aforementioned class.
Avatar sizes are defined in the $avatar-sizes Sass map. Each size specifies the avatar size and status size.