Avatars
Avatars are user profile pictures.





Add the avatar
class to <img> element.
There are 4 additional sizes available, including avatar-xl
(64px), avatar-lg
(48px), avatar-sm
(24px), and avatar-xs
(16px).
By default, the avatar size is 32px.
For users who don't have profile pictures, you may use their initials for avatars.
Add the avatar
class and avatar size class to <div> element.
The data-initial
attribute is the name appear inside the avatar.
<!-- Basic avatar examples -->
<figure class="avatar avatar-xl">
<img src="img/avatar-1.png" alt="...">
</figure>
<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
<!-- Show initals when avatar image is unavailable or not fully loaded -->
<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
<img src="img/avatar-1.png" alt="...">
</figure>
Avatar icons










<figure class="avatar avatar-xl">
<img src="img/avatar-1.png" alt="...">
<img src="img/avatar-5.png" class="avatar-icon" alt="...">
</figure>
Avatar presence
Avatars support presence indicators.
You can add an <i> element with the avatar-presence
class, and add online
, busy
or away
class for different status colors.
The default is gray which means offline.
<figure class="avatar avatar-xl">
<img src="img/avatar-1.png" alt="...">
<i class="avatar-presence online"></i>
</figure>