Live Preview

Avatars

Examples for opting different size of image classes.

Sizes

Use avatar sizing via class on avatar-* xl, lg, sm, xs

#
#
#
#
#

Indicator

Add an online or offline status indicator to show user's status.

#
#
#
#
#

Initials

You won't always have an image for every user, so easily use initials instead.

A
B
C
D
E

Groups

Easily group avatars of any size and content with a single component.

#
#
D
#
#
D
#
#
D
#
#
D
#
#
D
#
#
D
#
#
D
#
#
D
#
#
D
#
#
D

Badges

#
#
#
#
# 
                    
                            <!-- Avatar -->
                            <div class="avatar avatar-xl me-3">
                                <img src="../assets/img/avatars/9.jpg" alt="#" class="avatar-img">

                                <div class="badge border-outline badge-xl badge-circle bg-primary position-absolute bottom-0 end-0">
                                    @@include("../../img/icons/settings.svg")
                                </div>
                            </div>

                            <!-- Avatar -->
                            <div class="avatar avatar-lg me-3">
                                <img src="../assets/img/avatars/9.jpg" alt="#" class="avatar-img">

                                <div class="badge border-outline badge-lg badge-circle bg-primary position-absolute bottom-0 end-0">
                                    @@include("../../img/icons/settings.svg")
                                </div>
                            </div>

                            <!-- Avatar -->
                            <div class="avatar me-3">
                                <img src="../assets/img/avatars/9.jpg" alt="#" class="avatar-img">

                                <div class="badge border-outline badge-circle bg-primary position-absolute bottom-0 end-0">
                                    @@include("../../img/icons/settings.svg")
                                </div>
                            </div>

                            <!-- Avatar -->
                            <div class="avatar avatar-sm me-3">
                                <img src="../assets/img/avatars/9.jpg" alt="#" class="avatar-img">

                                <div class="badge badge-sm border-outline badge-circle bg-primary position-absolute bottom-0 end-0">
                                    @@include("../../img/icons/settings.svg")
                                </div>
                            </div>

                            <!-- Avatar -->
                            <div class="avatar avatar-xs me-3">
                                <img src="../assets/img/avatars/9.jpg" alt="#" class="avatar-img">

                                <div class="badge badge-xs border-outline badge-circle bg-primary position-absolute bottom-0 end-0">
                                    @@include("../../img/icons/settings.svg")
                                </div>
                            </div>