# Avatar
> An avatar shows a user's picture, initials or an icon in a fixed-size circle or square, with sizes, statuses and stacked lists.
Display user avatars with images, initials, or icons. Change sizes, shapes, and colors, or group them into stacked avatar lists.
Source: https://docs.tabler.io/ui/components/avatar
---
## Default markup
Add the `avatar` class to a `span`. Fill it with a picture as a `background-image`, or with initials as text.
```html
JL
```
## Avatar image
Set the picture as a `background-image` on the avatar. It's cropped to the avatar's shape and size.
```html
```
## Initials
When there is no picture, put the initials as text inside the avatar.
```html
ABCDEFGHIJ
```
## Avatar icons
An [icon](/ui/components/icon) inside the avatar works as a placeholder, or for an account that isn't a person, such as a system user.
```html
```
## Avatar initials color
Set the background with a `bg-*` class from the [color palette](/ui/base/colors). It's most useful with initials.
```html
ABCDEFGHIJ
```
## Avatar size
Add a size class from `avatar-xxs` to `avatar-2xl`. The names follow the usual Bootstrap pattern.
```html
```
## Avatar status
Add a [status indicator](/ui/components/status) to show whether a user is online, or a small count such as unread messages.
```html
SA
5
```
## Avatar shape
An avatar is a circle by default. Add `avatar-square` to give it the same rounded corners as the rest of the interface - the usual choice when the avatar stands for a company, a project or an app rather than a person.
```html
TBAA
```
For any other radius use the Bootstrap utilities. `rounded-0` gives sharp corners, and `rounded-3` a larger radius than `avatar-square`.
```html
```
## Avatar brand
Add a `avatar-brand` element inside an avatar to mark where the account comes from. It sits in the bottom corner and keeps its own background, so a brand logo stays readable over any photo.
```html
```
## Avatar on a cover
Add `avatar-cover` to pull an avatar halfway over the element above it and draw a ring in the card background color. Use it for a profile picture that overlaps a cover image.
```html
Paweł Kuna
UI Designer
```
## Avatar upload
Use the `avatar-upload` class together with `avatar` to show an empty avatar slot. It has a dashed border and no image, so users can see that the picture is still missing. On hover the border and the icon turn to the primary color.
Put an icon inside to show the action. The variant is often used as a link or a button.
```html
```
## Avatar upload size
The upload avatar uses the same size classes as a normal avatar, from `avatar-xxs` to `avatar-2xl`.
```html
```
## Avatar upload text
Add a short label under the icon with the `avatar-upload-text` class. The content is stacked in a column, so use this only in the larger sizes. The text is shown in uppercase, like all avatar text.
```html
```
## Avatar upload in a form
To pick a real file, use a `label` with the upload classes and connect it to a hidden file input. Add `cursor-pointer`, because the pointer cursor is only set for links.
```html
Click to upload a new avatar
```
## Avatar list
Put several avatars in an `.avatar-list` container. It keeps consistent spacing between them and wraps them when there isn't enough space.
```html
JL
```
## Stacked list
Add `avatar-list-stacked` to overlap the avatars, which fits a long list of participants into a small space.
```html
EB+8
```
```html
SA
```
## Accessibility
- An avatar with a background image has no text of its own. Show the user name next to it, or add an `aria-label` to the avatar.
- Give the upload avatar a clear name. Use the `avatar-upload-text` label, an `aria-label`, or a `form-label` linked with `for`.
- Use a `label` with a file input, or a `button`, when the upload avatar does something. A link with `href="#"` is only good for a static demo.
- Keep the hidden file input in the markup with the `visually-hidden` class. Do not use `display: none`, because then keyboard users cannot reach it.
## SCSS variables
Use these SCSS variables to customize avatars. The default values are:
```scss
$avatar-size: 2.5rem;
$avatar-status-size: 0.75rem;
$avatar-icon-size: 1.5rem;
$avatar-brand-size: 1.25rem;
$avatar-upload-icon-size: 1.5rem;
$avatar-upload-text-margin-top: 0.25rem;
$avatar-cover-ring-width: 0.25rem;
$avatar-brand-offset: -2px;
$avatar-bg: var(--bg-surface-secondary);
$avatar-sizes: (
'xxs': (
size: 1rem,
font-size: 0.5rem,
icon-size: 0.5rem,
status-size: 0.25rem,
brand-size: 0.5rem,
),
'xs': (
size: 1.25rem,
font-size: $h6-font-size,
icon-size: 0.75rem,
status-size: 0.375rem,
brand-size: 0.75rem,
border-radius: $border-radius-xs,
),
'sm': (
size: 2rem,
font-size: $h5-font-size,
icon-size: 1.5rem,
status-size: 0.5rem,
brand-size: 1rem,
),
'md': (
size: 2.5rem,
font-size: $h4-font-size,
icon-size: 1.5rem,
status-size: 0.75rem,
brand-size: 1.25rem,
),
'lg': (
size: 3rem,
font-size: $h2-font-size,
icon-size: 2rem,
status-size: 0.75rem,
brand-size: 1.25rem,
),
'xl': (
size: 5rem,
font-size: 2rem,
icon-size: 3rem,
status-size: 1rem,
brand-size: 1.25rem,
),
'2xl': (
size: 7rem,
font-size: 3rem,
icon-size: 5rem,
status-size: 1rem,
brand-size: 2rem,
),
);
$avatar-border-radius: var(--border-radius-pill);
$avatar-font-size: $h4-font-size;
$avatar-list-spacing: -0.5;
```
_Source: `core/scss/_variables.scss`_