@tabler/core

--- title: Avatars summary: 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. description: Personalize UI with user avatars. --- ## Default markup Use the `avatar` class to add an avatar to your interface design for greater customisation. ```html example centered separated code JL ``` ## Avatar image Set an image as the background to make users easy to indentify and create a personalised experience. ```html example centered separated code ``` ## Initials You can also use initials instead of pictures. ```html example centered separated code AB CD EF GH IJ ``` ## Avatar icons Apart from pictures and initials, you can also use icons to make the avatars more universal. ```html example centered separated <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> <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> <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> ``` ```html  <svg>...</svg> ``` ## 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 AB CD EF GH IJ ``` ## 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 ``` ## 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 SA 5 ``` ## 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 AA ``` ## Avatars list Create a list of avatars within one parent container. ```html example centered separated code <div class="avatar-list"> JL </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"> EB +8 </div> ``` ```html example centered separated code <div class="avatar-list avatar-list-stacked"> SA </div> ```