Avatars

  1. Utilities
  2. Avatars
Avatars
img img img 
<span class="avatar me-2 avatar-radius-0">
    <img src="../assets/images/faces/1.jpg" alt="img">
</span>
<span class="avatar me-2">
    <img src="../assets/images/faces/2.jpg" alt="img">
</span>
<span class="avatar me-2 avatar-rounded">
    <img src="../assets/images/faces/3.jpg" alt="img">
</span>
Avatar Sizes

Avatars of different sizes

img img img img img img 
<span class="avatar avatar-xs me-2">
    <img src="../assets/images/faces/4.jpg" alt="img">
</span>
<span class="avatar avatar-sm me-2">
    <img src="../assets/images/faces/5.jpg" alt="img">
</span>
<span class="avatar avatar-md me-2">
    <img src="../assets/images/faces/6.jpg" alt="img">
</span>
<span class="avatar avatar-lg me-2">
    <img src="../assets/images/faces/7.jpg" alt="img">
</span>
<span class="avatar avatar-xl me-2">
    <img src="../assets/images/faces/8.jpg" alt="img">
</span>
<span class="avatar avatar-xxl me-2">
    <img src="../assets/images/faces/9.jpg" alt="img">
</span>
Avatar With Icons

Avatar contains icons to perform respective action.

img img img img img img 
<span class="avatar avatar-xs me-2 avatar-rounded">
    <img src="../assets/images/faces/2.jpg" alt="img">
    <a href="javascript:void(0);" class="badge bg-success rounded-pill avatar-badge"><i class="fe fe-camera"></i></a>
</span>
<span class="avatar avatar-sm me-2 avatar-rounded">
    <img src="../assets/images/faces/3.jpg" alt="img">
    <a href="javascript:void(0);" class="badge rounded-pill bg-secondary avatar-badge"><i class="fe fe-edit"></i></a>
</span>
<span class="avatar avatar-md me-2 avatar-rounded">
    <img src="../assets/images/faces/14.jpg" alt="img">
    <a href="javascript:void(0);" class="badge rounded-pill bg-warning avatar-badge"><i class="fe fe-plus"></i></a>
</span>
<span class="avatar avatar-lg me-2 avatar-rounded">
    <img src="../assets/images/faces/13.jpg" alt="img">
    <a href="javascript:void(0);" class="badge rounded-pill bg-info avatar-badge"><i class="fe fe-edit"></i></a>
</span>
<span class="avatar avatar-xl me-2 avatar-rounded">
    <img src="../assets/images/faces/15.jpg" alt="img">
    <a href="javascript:void(0);" class="badge rounded-pill bg-success avatar-badge"><i class="fe fe-camera"></i></a>
</span>
<span class="avatar avatar-xxl me-2 avatar-rounded">
    <img src="../assets/images/faces/9.jpg" alt="img">
    <a href="javascript:void(0);" class="badge rounded-pill bg-danger avatar-badge"><i class="fe fe-plus"></i></a>
</span>
Avatar With Online Status Indicators

avatars having online status indicator.

img img img img img img 
<span class="avatar avatar-xs me-2 online avatar-rounded">
    <img src="../assets/images/faces/8.jpg" alt="img">
</span>
<span class="avatar avatar-sm online me-2 avatar-rounded">
    <img src="../assets/images/faces/10.jpg" alt="img">
</span>
<span class="avatar avatar-md me-2 online avatar-rounded">
    <img src="../assets/images/faces/12.jpg" alt="img">
</span>
<span class="avatar avatar-lg me-2 online avatar-rounded">
    <img src="../assets/images/faces/13.jpg" alt="img">
</span>
<span class="avatar avatar-xl me-2 online avatar-rounded">
    <img src="../assets/images/faces/14.jpg" alt="img">
</span>
<span class="avatar avatar-xxl me-2 online avatar-rounded">
    <img src="../assets/images/faces/15.jpg" alt="img">
</span>
Avatar With Ofline Status Indicators

avatars having a offline status indicator.

img img img img img img 
<span class="avatar avatar-xs me-2 offline avatar-rounded">
    <img src="../assets/images/faces/2.jpg" alt="img">
</span>
<span class="avatar avatar-sm offline me-2 avatar-rounded">
    <img src="../assets/images/faces/3.jpg" alt="img">
</span>
<span class="avatar avatar-md me-2 offline avatar-rounded">
    <img src="../assets/images/faces/4.jpg" alt="img">
</span>
<span class="avatar avatar-lg me-2 offline avatar-rounded">
    <img src="../assets/images/faces/5.jpg" alt="img">
</span>
<span class="avatar avatar-xl me-2 offline avatar-rounded">
    <img src="../assets/images/faces/6.jpg" alt="img">
</span>
<span class="avatar avatar-xxl me-2 offline avatar-rounded">
    <img src="../assets/images/faces/7.jpg" alt="img">
</span>
Avatars With Number Badges

Avatar numbers indicates the no. of unread notififactions/messages.

img 2 img 5 img 1 img 7 img 3 img 9 
<span class="avatar avatar-xs me-2 avatar-rounded">
    <img src="../assets/images/faces/2.jpg" alt="img">
    <span class="badge rounded-pill bg-primary avatar-badge">2</span>
</span>
<span class="avatar avatar-sm me-2 avatar-rounded">
    <img src="../assets/images/faces/3.jpg" alt="img">
    <span class="badge rounded-pill bg-secondary avatar-badge">5</span>
</span>
<span class="avatar avatar-md me-2 avatar-rounded">
    <img src="../assets/images/faces/14.jpg" alt="img">
    <span class="badge rounded-pill bg-warning avatar-badge">1</span>
</span>
<span class="avatar avatar-lg me-2 avatar-rounded">
    <img src="../assets/images/faces/13.jpg" alt="img">
    <span class="badge rounded-pill bg-info avatar-badge">7</span>
</span>
<span class="avatar avatar-xl me-2 avatar-rounded">
    <img src="../assets/images/faces/15.jpg" alt="img">
    <span class="badge rounded-pill bg-success avatar-badge">3</span>
</span>
<span class="avatar avatar-xxl me-2 avatar-rounded">
    <img src="../assets/images/faces/9.jpg" alt="img">
    <span class="badge rounded-pill bg-danger avatar-badge">9</span>
</span>
Avatar With Initials

Avatar contains intials when user profile doesn't exist.

xs SM MD LG XL XXL 
<span class="avatar avatar-xs me-2 bg-primary">
    xs
</span>
<span class="avatar avatar-sm me-2 bg-secondary">
    SM
</span>
<span class="avatar avatar-md me-2 bg-warning">
    MD
</span>
<span class="avatar avatar-lg me-2 bg-danger">
    LG
</span>
<span class="avatar avatar-xl me-2 bg-success">
    XL
</span>
<span class="avatar avatar-xxl me-2 bg-info">
    XXL
</span>
Stacked Avatars

Group of avatars stacked together.

img img img img img img +8 
<div class="avatar-list-stacked">
    <span class="avatar">
        <img src="../assets/images/faces/2.jpg" alt="img">
    </span>
    <span class="avatar">
        <img src="../assets/images/faces/8.jpg" alt="img">
    </span>
    <span class="avatar">
        <img src="../assets/images/faces/2.jpg" alt="img">
    </span>
    <span class="avatar">
        <img src="../assets/images/faces/10.jpg" alt="img">
    </span>
    <span class="avatar">
        <img src="../assets/images/faces/4.jpg" alt="img">
    </span>
    <span class="avatar">
        <img src="../assets/images/faces/13.jpg" alt="img">
    </span>
    <a class="avatar bg-primary text-fixed-white" href="javascript:void(0);">
        +8
    </a>
</div>
Rounded Stacked Avatars

Group of avatars stacked together.

img img img img img img +8 
<div class="avatar-list-stacked">
    <span class="avatar avatar-rounded">
        <img src="../assets/images/faces/2.jpg" alt="img">
    </span>
    <span class="avatar avatar-rounded">
        <img src="../assets/images/faces/8.jpg" alt="img">
    </span>
    <span class="avatar avatar-rounded">
        <img src="../assets/images/faces/2.jpg" alt="img">
    </span>
    <span class="avatar avatar-rounded">
        <img src="../assets/images/faces/10.jpg" alt="img">
    </span>
    <span class="avatar avatar-rounded">
        <img src="../assets/images/faces/4.jpg" alt="img">
    </span>
    <span class="avatar avatar-rounded">
        <img src="../assets/images/faces/13.jpg" alt="img">
    </span>
    <a class="avatar bg-primary avatar-rounded text-fixed-white" href="javascript:void(0);">
        +8
    </a>
</div>