Main Menu
Boost your work

Upgrade to premium here

Upgrade Now
Kleon Admin Dashboard
Made with by WPThemeBooster
Theme Customizer
Theme Color Mode
Navigation Layout
Vertical Navigation Styles
Header Position
Topbar Style

Avatar

Lorem ipsum dolor sit amet

Avatar Default
Avatar A Avatar Avatar Avatar 

        <!-- Avatar Default -->
        <span class="avatar bg-info rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
        </span>
        <span class="avatar bg-blue text-white rounded-circle">
        <span class="avatar-initials rounded-circle">A</span>
        </span>
        <span class="avatar rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/2.jpg" alt="Avatar">
        </span>
        <span class="avatar rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/3.jpg" alt="Avatar">
        </span>
        <span class="avatar rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/2.jpg" alt="Avatar">
        </span>
Avatar Group
Avatar A Avatar Avatar 2+ 

        <!-- Avatar Group -->
        <span class="avatar bg-info rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
        </span>
        <span class="avatar bg-blue text-white rounded-circle">
        <span class="avatar-initials rounded-circle">A</span>
        </span>
        <span class="avatar rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/2.jpg" alt="Avatar">
        </span>
        <span class="avatar rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/3.jpg" alt="Avatar">
        </span>
        <span class="avatar bg-gray-300 rounded-circle">
        <span class="avatar-initials rounded-circle">2+</span>
        </span>
Avatar Label
VP VP VP VP 

    <!-- Avatar Label -->
    <span class="avatar bg-blue text-white rounded-circle">
        <span class="avatar-initials">VP</span>
    </span>
    <span class="avatar bg-dark text-white rounded-circle">
        <span class="avatar-initials">VP</span>
    </span>
    <span class="avatar bg-danger text-white rounded-circle">
        <span class="avatar-initials">VP</span>
    </span>
    <span class="avatar bg-gray text-white rounded-circle">
        <span class="avatar-initials">VP</span>
    </span>
Avatar Styles
Avatar VP Avatar VP Avatar VP Avatar VP 

    <!-- Avatar Styles -->
    <span class="avatar rounded-0">
        <img class="avatar-img" src="assets/img/2.jpg" alt="Avatar">
    </span>
    <span class="avatar bg-blue text-white">
        <span class="avatar-initials">VP</span>
    </span>
    <span class="avatar rounded-circle">
        <img class="avatar-img" src="assets/img/3.jpg" alt="Avatar">
    </span>
    <span class="avatar bg-gray text-white rounded-circle">
        <span class="avatar-initials">VP</span>
    </span>
    
    <span class="avatar rounded-1">
        <img class="avatar-img" src="assets/img/2.jpg" alt="Avatar">
    </span>
    <span class="avatar bg-blue text-white">
        <span class="avatar-initials">VP</span>
    </span>
    <span class="avatar rounded-circle avatar-outline-primary">
        <img class="avatar-img" src="assets/img/3.jpg" alt="Avatar">
    </span>
    <span class="avatar rounded-circle bg-light avatar-outline-primary">
        <span class="avatar-initials">VP</span>
    </span>
Avatar Sizes
Avatar Avatar Avatar Avatar Avatar Avatar Avatar 

    <!-- Avatar Sizes -->
    <span class="avatar avatar-xs rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
    </span>
    <span class="avatar avatar-sm rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
    </span>
    <span class="avatar rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
    </span>
    <span class="avatar avatar-lg rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
    </span>
    <span class="avatar avatar-xl rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
    </span>
    <span class="avatar avatar-xxl rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
    </span>
    <span class="avatar avatar-xxxl rounded-circle">
        <img class="avatar-img rounded-circle" src="assets/img/1.jpg" alt="Avatar">
    </span>
Avatar Status with Shape
VP VP Avatar Avatar
VP VP VP VP
VP VP Avatar Avatar 

    <!-- Avatar Status with Shape -->
    <span class="avatar avatar-sm bg-blue text-white rounded-circle">
        <span class="avatar-initials">VP</span>
        <span class="avatar-status avatar-sm-status bg-primary"></span>
    </span>
    <span class="avatar avatar-sm bg-dark text-white rounded-circle">
        <span class="avatar-initials">VP</span>
        <span class="avatar-status avatar-sm-status bg-success"></span>
    </span>
    
    <span class="avatar avatar-sm avatar-outline-primary rounded-1 ms-5">
        <img class="avatar-img rounded-1" src="assets/img/2.jpg" alt="Avatar">
        <span class="avatar-status avatar-sm-status bg-primary"></span>
    </span>
    <span class="avatar avatar-sm avatar-outline-danger rounded-1">
        <img class="avatar-img rounded-1" src="assets/img/3.jpg" alt="Avatar">
        <span class="avatar-status avatar-sm-status bg-danger"></span>
    </span>
    <hr>
    <span class="avatar bg-danger text-white rounded-circle">
        <span class="avatar-initials">VP</span>
        <span class="avatar-status avatar-status bg-blue"></span>
    </span>
    <span class="avatar bg-gray text-white rounded-circle">
        <span class="avatar-initials">VP</span>
        <span class="avatar-status avatar-status bg-info"></span>
    </span>
    
    <span class="avatar bg-danger text-white rounded-1 ms-5">
        <span class="avatar-initials">VP</span>
        <span class="avatar-status avatar-status bg-blue"></span>
    </span>
    <span class="avatar bg-gray text-white rounded-1">
        <span class="avatar-initials">VP</span>
        <span class="avatar-status avatar-status bg-info"></span>
    </span>
    <hr>
    <span class="avatar avatar-lg bg-success text-white rounded-circle">
        <span class="avatar-initials">VP</span>
        <span class="avatar-status avatar-lg-status bg-blue"></span>
    </span>
    <span class="avatar avatar-lg bg-info text-white rounded-circle">
        <span class="avatar-initials">VP</span>
        <span class="avatar-status avatar-lg-status bg-info"></span>
    </span>
    
    <span class="avatar avatar-lg bg-success text-white rounded-circle ms-5">
        <img class="avatar-img  rounded-circle" src="assets/img/1.jpg" alt="Avatar">
        <span class="avatar-status avatar-lg-status bg-primary"></span>
    </span>
    <span class="avatar avatar-lg bg-info text-white rounded-circle">
        <img class="avatar-img  rounded-circle" src="assets/img/2.jpg" alt="Avatar">
        <span class="avatar-status avatar-lg-status bg-danger"></span>
    </span>