## Documentation

Browse source code

##### On this page

- Default markup
- Avatar image
- Initials
- Avatar icons
- Avatar initials color
- Avatar size
- Avatar status
- Avatar shape
- Avatars list
- Stacked list

## Avatars

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.

    <span class="avatar" style="background-image: url(...)"></span>
    <span class="avatar">JL</span>
    <span class="avatar" style="background-image: url(...)"></span>

## Avatar image

Set an image as the background to make users easy to indentify and create a personalised experience.

    <span class="avatar" style="background-image: url(...)"></span>
    <span class="avatar" style="background-image: url(...)"></span>
    <span class="avatar" style="background-image: url(...)"></span>

## Initials

You can also use initials instead of pictures.

    <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.

    <span class="avatar"><!-- SVG icon code -->
    </span>
    <span class="avatar"><!-- SVG icon code -->
    </span>
    <span class="avatar"><!-- SVG icon code -->
    </span>

## Avatar initials color

Customize the color of the avatars’ background. You can click here to see the list of available colors.

    <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-blue-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.

    <span class="avatar avatar-xl">HS</span>
    <span class="avatar avatar-lg" style="background-image: url(...)"></span>
    <span class="avatar avatar-md" style="background-image: url(...)"></span>
    <span class="avatar">EP</span>
    <span class="avatar avatar-sm" style="background-image: url(...)"></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.

    <span class="avatar" style="background-image: url(...)"></span>
    <span class="avatar" style="background-image: url(...)">
      <span class="badge bg-danger"></span></span>
    <span class="avatar" style="background-image: url(...)">
      <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(...)">
      <span class="badge bg-info"></span></span>
    <span class="avatar" style="background-image: url(...)">
      <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.

    <span class="avatar" style="background-image: url(...)"></span>
    <span class="avatar rounded" style="background-image: url(...)"></span>
    <span class="avatar rounded-circle">AA</span>
    <span class="avatar rounded-0" style="background-image: url(...)"></span>
    <span class="avatar rounded-lg" style="background-image: url(...)"></span>

## Avatars list

Create a list of avatars within one parent container.

    <div class="avatar-list">
      <span class="avatar" style="background-image: url(...)"></span>
      <span class="avatar">JL</span>
      <span class="avatar" style="background-image: url(...)"></span>
      <span class="avatar" style="background-image: url(...)"></span>
      <span class="avatar" style="background-image: url(...)"></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.

    <div class="avatar-list avatar-list-stacked">
      <span class="avatar">EB</span>
      <span class="avatar" style="background-image: url(...)"></span>
      <span class="avatar" style="background-image: url(...)"></span>
      <span class="avatar" style="background-image: url(...)"></span>
      <span class="avatar" style="background-image: url(...)"></span>
      <span class="avatar">+8</span>
    </div>