tabler.tabler/docs/content/ui/components/avatars.md

---

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.

{% 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 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 -%}

<span

class="avatar avatar-sm rounded-circle"
style="background-image: url(/static/avatars/035m.jpg)"

<span

class="avatar avatar-sm rounded-circle"
style="background-image: url(/static/avatars/027f.jpg)"

<span

class="avatar avatar-sm rounded-circle"
style="background-image: url(/static/avatars/036f.jpg)"

SA <span

class="avatar avatar-sm rounded-circle"
style="background-image: url(/static/avatars/034f.jpg)"

<span

class="avatar avatar-sm rounded-circle"
style="background-image: url(/static/avatars/043f.jpg)"

<span

class="avatar avatar-sm rounded-circle"
style="background-image: url(/static/avatars/039f.jpg)"

<span

class="avatar avatar-sm rounded-circle"
style="background-image: url(/static/avatars/020m.jpg)"