---
title: Avatars
description: Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.
---
## Default markup
Use the `avatar` class to add an avatar to your interface design for greater customisation.
```html example centered separated code
JL
```
## Avatar image
Set an image as the background to make users easy to indentify and create a personalised experience.
```html example centered separated code
```
## Initials
You can also use initials instead of pictures.
```html example centered separated code
ABCDEFGHIJ
```
## Avatar icons
Apart from pictures and initials, you can also use icons to make the avatars more universal.
```html example centered separated
```
```html
```
## Avatar initials color
Customize the color of the avatars' background. You can click [here](colors) to see the list of available colors.
```html example centered separated code
ABCDEFGHIJ
```
## Avatar size
Using Bootstrap’s typical naming structure, you can create a standard avatar or scale it up or down to different sizes based on what you need.
```html example centered separated code
```
## Avatar status
Add a status indicator to your avatar to show, for instance, if a users is online or offline or indicate the number of messages they have received.
```html example centered separated code
SA5
```
## Avatar shape
Change the shape of an avatar with the default Bootstrap image classes. You can make them round or square and change their border radius.
```html example centered separated
AA
```
## Avatars list
Create a list of avatars within one parent container.
```html example centered separated code
JL
```
## Stacked list
Make the list stack once a certain number of avatars is reached to make it look clear and display well regardless of the screen size.
```html example centered separated code