Avatar

Use the .avatar class to create an avatar. You can also use the

Basic Avatars


                            <div class="d-flex flex-wrap gap-3 align-items-center" id="preview-basic-avatar">
                                <div class="avatar avatar-80">
                                    <img src="../assets/images/user/01.jpg" alt="">
                                </div>
                                <div class="avatar avatar-80">
                                    <img src="../assets/images/user/01.jpg" class="rounded" alt="">
                                </div>
                                <div class="avatar avatar-80">
                                    <img src="../assets/images/user/01.jpg" class="rounded-4" alt="">
                                </div>
                                <div class="avatar avatar-80">
                                    <img src="../assets/images/user/01.jpg" class="rounded-circle" alt="">
                                </div>
                            </div>

Avatars Size

  
<div class="d-flex flex-wrap gap-3 align-items-center" id="preview-avatar-size">
    <div class="avatar avatar-100">
    <img src="../assets/images/user/01.png" alt="">
    </div>
    <div class="avatar avatar-90">
        <img src="../assets/images/user/02.png" alt="">
    </div>
    <div class="avatar avatar-80">
        <img src="../assets/images/user/03.png" alt="">
    </div>
    <div class="avatar avatar-70">
        <img src="../assets/images/user/04.png" alt="">
    </div>
    <div class="avatar avatar-50">
        <img src="../assets/images/user/05.png" alt="">
    </div>
    <div class="avatar avatar-40">
        <img src="../assets/images/user/06.png" alt="">
    </div>
    <div class="avatar avatar-30">
        <img src="../assets/images/user/07.png" alt="">
    </div>
</div>

Avatars With Status


<div class="d-flex flex-wrap gap-3 align-items-center" id="preview-avatar-status">
    <div class="avatar avatar-100">
        <img src="../assets/images/user/01.png" alt="">
        <div class="avatar-status bg-success rounded-circle p-2"></div>
    </div>
    <div class="avatar avatar-90">
        <img src="../assets/images/user/02.png" alt="">
        <div class="avatar-status bg-success rounded-circle p-2"></div>
    </div>
    <div class="avatar avatar-80">
        <img src="../assets/images/user/03.png" alt="">
        <div class="avatar-status bg-success rounded-circle p-2"></div>
    </div>
    <div class="avatar avatar-70">
        <img src="../assets/images/user/04.png" alt="">
        <div class="avatar-status bg-success rounded-circle p-1"></div>
    </div>
    <div class="avatar avatar-50">
        <img src="../assets/images/user/05.png" alt="">
        <div class="avatar-status bg-success rounded-circle p-1"></div>
    </div>
    <div class="avatar avatar-40">
        <img src="../assets/images/user/06.png" alt="">
        <div class="avatar-status bg-success rounded-circle p-1"></div>
    </div>
    <div class="avatar avatar-30">
        <img src="../assets/images/user/07.png" alt="">
        <div class="avatar-status bg-success rounded-circle p-1"></div>
    </div>
</div>

Avatars Icon

add
add
add 
<div class="d-flex flex-wrap gap-3 align-items-center" id="preview-avatar-icon">
<div class="avatar avatar-100">
        <img src="../assets/images/user/01.png" alt="">
        <div class="avatar-status bg-success rounded-circle p-2">
            <span class="material-symbols-outlined">add</span>
        </div>
    </div>
    <div class="avatar avatar-90">
        <img src="../assets/images/user/02.png" alt="">
        <div class="avatar-status bg-success rounded-circle p-2">
            <span class="material-symbols-outlined">add</span>
        </div>
    </div>
    <div class="avatar avatar-80">
        <img src="../assets/images/user/03.png" alt="">
        <div class="avatar-status bg-success rounded-circle p-2">
            <span class="material-symbols-outlined">add</span>
        </div>
    </div>
    <div class="avatar avatar-70">
        <img src="../assets/images/user/04.png" alt="">
        <div class="avatar-status bg-success rounded-circle p-1"></div>
    </div>
    <div class="avatar avatar-50">
        <img src="../assets/images/user/05.png" alt="">
        <div class="avatar-status bg-success rounded-circle p-1"></div>
    </div>
    <div class="avatar avatar-40">
        <img src="../assets/images/user/06.png" alt="">
        <div class="avatar-status bg-success rounded-circle p-1"></div>
    </div>
    <div class="avatar avatar-30">
        <img src="../assets/images/user/07.png" alt="">
        <div class="avatar-status bg-success rounded-circle p-1"></div>
    </div>
</div>