Avatar

An avatar is a graphical representation of a user, mostly in the form of an icon or sometimes in initials.

            
              <img class="avatar avatar-xsm" src="/images/avatar.png" alt="avatar-image" />

              <img class="avatar avatar-sm" src="/images/avatar.png" alt="avatar-image" />

              <img class="avatar avatar-md" src="/images/avatar.png" alt="avatar-image" />

              <img class="avatar avatar-lg" src="/images/avatar.png" alt="avatar-image" />

              <img class="avatar avatar-xl" src="/images/avatar.png" alt="avatar-image" />
            
          

Avatar with badge

In some cases, like social apps we need to show a badge on the right corner of the avatar. Below are some examples which shows whether the user is online, offline or any other set status.

            
              <div class="img-icon-container">
                <img class="avatar avatar-xsm" src="/images/avatar.png" alt="avatar-image" />
                <div class="xsm-badge bdg-green xsm-bdg-position"></div>
              </div>

              <div class="img-icon-container">
                <img class="avatar avatar-sm" src="/images/avatar.png" alt="avatar-image" />
                <div class="sm-badge bdg-green sm-bdg-position"></div>
              </div>

              <div class="img-icon-container">
                <img class="avatar avatar-md" src="/images/avatar.png" alt="avatar-image" />
                <div class="md-badge bdg-green md-bdg-position"></div>
              </div>