# Bootstrap 6 Avatar
> The Avatar component is used to display circular user profile pictures. Avatars can portray people or objects and support images, icons, or letters.
## Image avatars
Showcase avatars using images. These avatars are typically circular and can display user profile pictures.
```html
```
## Letter avatars
Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials.
An avatar without a `.theme-*` class stays neutral; with one, the background takes the theme color and the letters take the color that reads on it.
```html
CUI
CUI
CUI
CUI
```
## Subtle avatars
_Added in 6.0.0._
Add `.avatar-subtle` for a tinted avatar that keeps the theme color in the text rather than the background.
## Icons avatars
Incorporate icons within avatars, allowing for a visual representation using scalable vector graphics (SVG).
```html
```
## Rounded avatars
Create avatars with rounded corners by adding the `.rounded` class. This gives a softer, less angular appearance.
```html
CUI
CUI
CUI
```
## Square avatars
Make avatars square by using the `.rounded-0` class, removing any rounded edges for a sharper look.
```html
CUI
CUI
CUI
```
## Sizing
Adjust the size of avatars using the `.avatar-xs`, `.avatar-sm`, `.avatar-md`, `.avatar-lg`, and `.avatar-xl` classes for larger or smaller versions. The status indicator scales with the avatar, so it stays proportional at every size.
```html
CUI
CUI
CUI
CUI
CUI
CUI
```
## Stacked avatars
Display multiple avatars in a stack to represent a group of users or items, with additional count if there are more avatars than can be displayed. Each avatar in a stack wears a ring in the page background colour, so overlapping photos stay separated in both colour schemes.
```html
```
Size the whole stack at once with `.avatar-stack-sm` through `.avatar-stack-xl`, and tune the overlap with `--cui-avatar-stack-spacing` — the fraction of the avatar size each one is pulled over its neighbour:
```html
```
## Avatars with status
Add `.avatar-status` to show presence. The indicator takes its colour from a `theme-*` class and defaults to a neutral grey, so "offline" needs no class at all:
```html
```
The indicator is a few pixels of colour and nothing else, so colour is the only thing separating one state from another — not enough on its own, and at this size a different shape would not help either. Where the state means something rather than decorates, name it on the indicator:
```html
```
`role="img"` is what makes the name stick: `aria-label` on a bare `` has no role to attach to, and assistive technology is free to ignore it.
The ring around the indicator follows the page background through `--cui-avatar-status-border-color`, so it stays correct in dark mode.
## Customizing
### CSS variables
Avatars use local CSS variables on `.avatar` for enhanced real-time customization.
```scss
$avatar-tokens: defaults(
(
--cui-avatar-size: 2rem,
--cui-avatar-font-size: calc(var(--cui-avatar-size) * .4),
--cui-avatar-color: inherit,
--cui-avatar-bg: var(--cui-bg-2),
--cui-avatar-border-radius: 50em,
--cui-avatar-status-size: .5rem,
--cui-avatar-status-bg: var(--cui-fg-4),
--cui-avatar-status-border-radius: 50em,
--cui-avatar-status-border-width: 1px,
--cui-avatar-status-border-color: var(--cui-bg-body),
--cui-avatar-transition: #{"transform .15s ease-in-out"},
),
$avatar-tokens
);
```
Stacks carry their own variables on `.avatar-stack`:
```scss
$avatar-stack-tokens: defaults(
(
--cui-avatar-stack-spacing: -.4,
--cui-avatar-stack-ring-width: 2px,
--cui-avatar-stack-ring-color: var(--cui-bg-body),
--cui-avatar-stack-hover-transform: translateY(-2px),
),
$avatar-stack-tokens
);
```
### Sass maps
Each size carries its own dimensions, and the map merges with your overrides — add a key to define a size, or set one to `null` to drop it:
```scss
// stylelint-disable-next-line scss/dollar-variable-default
$avatar-sizes: defaults(
(
xs: (size: 1.25rem, status-size: .35rem),
sm: (size: 1.5rem, status-size: .4rem),
md: (size: 2.5rem, status-size: .7rem),
lg: (size: 3rem, status-size: .8rem),
xl: (size: 4rem, status-size: 1rem),
),
$avatar-sizes
);
```
