##### Basic Avatars

    <div class="avatar-group">
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
    </div>

##### Avatars Group Image

    <div class="avatar-group">
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
    </div>

##### Avatars Letter

PR
LK
KE
AU
PR
PI

    <div class="avatar-item avatar-md avatar-title text-white bg-primary">
        PR
    </div>
    <div class="avatar-item avatar-md avatar-title text-white bg-secondary">
        LK
    </div>
    <div class="avatar-item avatar-md avatar-title text-white bg-success">
        KE
    </div>
    <div class="avatar-item avatar-md avatar-title text-white bg-info">
        AU
    </div>
    <div class="avatar-item avatar-md avatar-title text-white bg-warning">
        PR
    </div>
    <div class="avatar-item avatar-md avatar-title text-white bg-danger">
        PI
    </div>

##### Avatars Group Letter

PR
LI
SH
SU
PR
SR

    <div class="avatar-group">
        <div class="avatar-item avatar-md avatar-title text-white bg-primary">
            PR
        </div>
        <div class="avatar-item avatar-md avatar-title text-white bg-secondary">
            LI
        </div>
        <div class="avatar-item avatar-md avatar-title text-white bg-success">
            SH
        </div>
        <div class="avatar-item avatar-md avatar-title text-white bg-info">
            SU
        </div>
        <div class="avatar-item avatar-md avatar-title text-white bg-warning">
            PR
        </div>
        <div class="avatar-item avatar-md avatar-title text-white bg-danger">
            SR
        </div>
    </div>

##### Light Avatars Letter

PR
LK
KE
AU
PR
PI

    <div class="avatar-item avatar-md avatar-title text-white bg-primary">
        PR
    </div>
    <div class="avatar-item avatar-md avatar-title text-secondary bg-secondary-subtle">
        LK
    </div>
    <div class="avatar-item avatar-md avatar-title text-success bg-success-subtle">
        KE
    </div>
    <div class="avatar-item avatar-md avatar-title text-info bg-info-subtle">
        AU
    </div>
    <div class="avatar-item avatar-md avatar-title text-warning bg-warning-subtle">
        PR
    </div>
    <div class="avatar-item avatar-md avatar-title text-danger bg-danger-subtle">
        PI
    </div>

##### Light Avatars Group Letter

PR
LI
SH
SU
PR
SR

    <div class="avatar-group">
        <div class="avatar-item avatar-md avatar-title text-primary bg-primary-subtle">
            PR
        </div>
        <div class="avatar-item avatar-md avatar-title text-secondary bg-secondary-subtle">
            LI
        </div>
        <div class="avatar-item avatar-md avatar-title text-success bg-success-subtle">
            SH
        </div>
        <div class="avatar-item avatar-md avatar-title text-info bg-info-subtle">
            SU
        </div>
        <div class="avatar-item avatar-md avatar-title text-warning bg-warning-subtle">
            PR
        </div>
        <div class="avatar-item avatar-md avatar-title text-danger bg-danger-subtle">
            SR
        </div>
    </div>

##### Indicator Position And Icon

    <div class="d-flex align-items-center flex-wrap gap-3">
        <div class="position-relative">
            <div class="avatar-item avatar-md avatar-title text-primary bg-primary-subtle">
                <i class="ri-user-fill"></i>
            </div>
            <span class="position-absolute border-2 border border-light-subtle h-12px w-12px rounded-circle bg-primary end-0 bottom-0"></span>
        </div>
        <div class="position-relative">
            <div class="avatar-item avatar-md avatar-title text-danger bg-danger-subtle">
                <i class="ri-user-fill"></i>
            </div>
            <span class="position-absolute border-2 border border-light-subtle h-12px w-12px rounded-circle bg-danger end-0 top-0"></span>
        </div>
        <div class="position-relative">
            <div class="avatar-item avatar-md">
                <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
            </div>
            <span class="position-absolute border-2 border border-light-subtle h-12px w-12px rounded-circle bg-success end-0 bottom-0"></span>
        </div>
        <div class="position-relative">
            <div class="avatar-item avatar-md">
                <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
            </div>
            <span class="position-absolute border-2 border border-light-subtle h-12px w-12px rounded-circle bg-success end-0 top-0"></span>
        </div>
    </div>

##### Radius

    <div class="d-flex align-items-center flex-wrap gap-3">
        <div class="avatar-item avatar-lg rounded-0 avatar-title text-primary bg-primary-subtle">
            <i class="ri-user-fill"></i>
        </div>
        <div class="avatar-item avatar-lg rounded-2 avatar-title text-primary bg-primary-subtle">
            <i class="ri-user-fill"></i>
        </div>
        <div class="avatar-item avatar-lg avatar-title text-primary bg-primary-subtle">
            <i class="ri-user-fill"></i>
        </div>
        <div class="avatar-item avatar-lg">
            <img class="img-fluid avatar-lg rounded-0" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item avatar-lg">
            <img class="img-fluid avatar-lg rounded-2" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item avatar-lg">
            <img class="img-fluid avatar-lg" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
    </div>

##### Basic Avatars Size

    <div class="d-flex align-items-center flex-wrap gap-3">
        <div class="avatar-item avatar-xl">
            <img class="img-fluid avatar-xl" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item avatar-lg">
            <img class="img-fluid avatar-lg" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item avatar-md">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item avatar-sm">
            <img class="img-fluid avatar-sm" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item avatar-xs">
            <img class="img-fluid avatar-xs" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
    </div>

##### Avatars Group Size

5+
5+
5+

    <div class="avatar-group">
        <div class="avatar-item">
            <img class="img-fluid avatar-lg" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-lg" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-lg" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-lg" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-lg" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item avatar-lg fw-semibold avatar-title bg-primary">
            5+
        </div>
    </div>
    <div class="avatar-group">
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-md" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item avatar-md fw-semibold avatar-title bg-primary">
            5+
        </div>
    </div>
    <div class="avatar-group">
        <div class="avatar-item">
            <img class="img-fluid avatar-sm" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-sm" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-sm" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-sm" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item">
            <img class="img-fluid avatar-sm" src="assets/images/avatar/avatar-3.jpg" alt="avatar image">
        </div>
        <div class="avatar-item avatar-sm fw-semibold avatar-title bg-primary">
            5+
        </div>
    </div>

Theme Customization

###### Layout:

##### Vertical

##### Horizontal

##### Semi Box

###### Content Width:

##### Default

##### Box

###### Layout Direction:

##### LTR

##### RTL

###### Layout Mode:

##### Light

##### Dark

##### System

###### Sidebar Size:

##### Default

##### Medium

##### Icon

##### Icon hover

###### Sidebar Color:

##### Light

##### Dark