tabler/docs/ui/components/avatars.mdx

---
title: Avatars
summary: Avatars help customize various elements of a user interface and make the product experience more personalized. They are often used in communication apps, collaboration tools and social media.
description: Personalize UI with user avatars.
---

## Default markup

Use the `avatar` class to add an avatar to your interface design for greater customization.

```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 personalized 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

Besides 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.io/icons/icon/user -->
  <svg>...</svg>
</span>
```

## Avatar initials color

Customize the color of the avatars' background. You can click [here](/docs/ui/base/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 user 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>
```