---
title: Avatar
summary: An avatar helps customize interface elements and make the product experience more personalized. It is often used in communication apps, collaboration tools, and social media.
description: Personalize UI with a user avatar.
---
## Default markup
Use the `avatar` class to add an avatar to your interface design for greater customization.
{% capture html -%}
JL
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
## Avatar image
Set an image as the background to make users easy to indentify and create a personalized experience.
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
## Initials
You can also use initials instead of pictures.
{% capture html -%}
AB
CD
EF
GH
IJ
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
## Avatar icons
Besides pictures and initials, you can also use icons to make the avatars more universal.
{% capture html -%}
{% include "ui/icon.html" icon="user" %}
{% include "ui/icon.html" icon="plus" %}
{% include "ui/icon.html" icon="settings" %}
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
## Avatar initials color
Customize the color of the avatars' background. See the [full list of available colors](/ui/base/colors) for more details.
{% capture html -%}
AB
CD
EF
GH
IJ
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
## 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.
{% capture html -%}
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
## 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.
{% capture html -%}
SA
5
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
## 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.
{% capture html -%}
AA
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
## Avatars list
Create a list of avatars within one parent container.
{% capture html -%}
JL
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
## 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.
{% capture html -%}
EB
+8
{%- endcapture %}
{% include "docs/example.html" html=html centered %}
{% capture html -%}
SA
{%- endcapture %}
{% include "docs/example.html" html=html centered %}