File: //home/ekspardev/www/tubisad/rapor/docs/components/avatars.mdx
---
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
<span class="avatar" style="background-image: url(/samples/avatars/002f.jpg)"></span>
<span class="avatar">JL</span>
<span class="avatar" style="background-image: url(/samples/avatars/004f.jpg)"></span>
```
## Avatar image
Set an image as the background to make users easy to indentify and create a personalised experience.
```html example centered separated code
<span class="avatar" style="background-image: url(/samples/avatars/016f.jpg)"></span>
<span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)"></span>
<span class="avatar" style="background-image: url(/samples/avatars/036m.jpg)"></span>
```
## Initials
You can also use initials instead of pictures.
```html example centered separated code
<span class="avatar">AB</span>
<span class="avatar">CD</span>
<span class="avatar">EF</span>
<span class="avatar">GH</span>
<span class="avatar">IJ</span>
```
## Avatar icons
Apart from pictures and initials, you can also use icons to make the avatars more universal.
```html example centered separated
<span class="avatar">
<svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="7" r="4" />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg>
</span>
<span class="avatar">
<svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" />
</svg>
</span>
<span class="avatar">
<svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="9" cy="7" r="4" />
<path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
<path d="M16 11h6m-3 -3v6" />
</svg>
</span>
```
```html
<span class="avatar">
<!-- SVG icon from http://tabler-icons.io/i/user -->
<svg>...</svg>
</span>
```
## 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
<span class="avatar bg-green-lt">AB</span>
<span class="avatar bg-red-lt">CD</span>
<span class="avatar bg-yellow-lt">EF</span>
<span class="avatar bg-primary-lt">GH</span>
<span class="avatar bg-purple-lt">IJ</span>
```
## 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
<span class="avatar avatar-xl" style="background-image: url(/samples/avatars/000m.jpg)"></span>
<span class="avatar avatar-lg" style="background-image: url(/samples/avatars/000m.jpg)"></span>
<span class="avatar avatar-md" style="background-image: url(/samples/avatars/000m.jpg)"></span>
<span class="avatar" style="background-image: url(/samples/avatars/000m.jpg)"></span>
<span class="avatar avatar-sm" style="background-image: url(/samples/avatars/000m.jpg)"></span>
<span class="avatar avatar-xs" style="background-image: url(/samples/avatars/000m.jpg)"></span>
```
## 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
<span class="avatar" style="background-image: url(/samples/avatars/018m.jpg)"></span>
<span class="avatar" style="background-image: url(/samples/avatars/015m.jpg)">
<span class="badge bg-danger"></span>
</span>
<span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)">
<span class="badge bg-success"></span>
</span>
<span class="avatar"><span class="badge bg-warning"></span>SA</span>
<span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)">
<span class="badge bg-info"></span>
</span>
<span class="avatar" style="background-image: url(/samples/avatars/048m.jpg)">
<span class="badge bg-gray">5</span>
</span>
```
## 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
<span class="avatar" style="background-image: url(/samples/avatars/019m.jpg)"></span>
<span class="avatar rounded" style="background-image: url(/samples/avatars/039f.jpg)"></span>
<span class="avatar rounded-circle">AA</span>
<span class="avatar rounded-0" style="background-image: url(/samples/avatars/043f.jpg)"></span>
<span class="avatar rounded-3" style="background-image: url(/samples/avatars/044f.jpg)"></span>
```
## Avatars list
Create a list of avatars within one parent container.
```html example centered separated code
<div class="avatar-list">
<span class="avatar rounded" style="background-image: url(/samples/avatars/031f.jpg)"></span>
<span class="avatar rounded">JL</span>
<span class="avatar rounded" style="background-image: url(/samples/avatars/033f.jpg)"></span>
<span class="avatar rounded" style="background-image: url(/samples/avatars/017m.jpg)"></span>
<span class="avatar rounded" style="background-image: url(/samples/avatars/024m.jpg)"></span>
</div>
```
## 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
<div class="avatar-list avatar-list-stacked">
<span class="avatar">EB</span>
<span class="avatar" style="background-image: url(/samples/avatars/026m.jpg)"></span>
<span class="avatar" style="background-image: url(/samples/avatars/016f.jpg)"></span>
<span class="avatar" style="background-image: url(/samples/avatars/028m.jpg)"></span>
<span class="avatar" style="background-image: url(/samples/avatars/030m.jpg)"></span>
<span class="avatar">+8</span>
</div>
```
```html example centered separated code
<div class="avatar-list avatar-list-stacked">
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/035m.jpg)"></span>
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/027f.jpg)"></span>
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/036f.jpg)"></span>
<span class="avatar avatar-sm rounded-circle">SA</span>
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/034f.jpg)"></span>
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/043f.jpg)"></span>
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/039f.jpg)"></span>
<span class="avatar avatar-sm rounded-circle" style="background-image: url(/samples/avatars/020m.jpg)"></span>
</div>
```