Avatars

Use avater of different shapes and sizes with a single component.

Circular

<div class="avatar avatar-xl ">
  <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
</div>

Square

<div class="avatar avatar-xl ">
  <img class="rounded-none" src="../../assets/img/team/30.png" alt="" />
</div>

Soft

<div class="avatar avatar-xl ">
  <img class="rounded-soft" src="../../assets/img/team/30.png" alt="" />
</div>

Content

<div class="avatar avatar-xl ">
  <div class="avatar-name rounded-circle "><span>+2</span></div>
</div>
+2

Name

<div class="avatar avatar-xl ">
  <div class="avatar-name rounded-circle"><span>A</span></div>
</div>
A

Emoji

<div class="avatar avatar-xl ">
  <div class="avatar-emoji rounded-circle "><span role="img" aria-label="Emoji">🎁</span></div>
</div>
🎁

Status

<div class="avatar avatar-xl status-online  me-4">
  <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
</div>
<div class="avatar avatar-xl status-offline  me-4">
  <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
</div>
<div class="avatar avatar-xl status-away  me-4">
  <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
</div>
<div class="avatar avatar-xl status-do-not-disturb  me-4">
  <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
</div>

Sizes

<div class="avatar avatar-4xl avatar-bordered me-4">
  <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
</div>
<div class="avatar avatar-3xl avatar-bordered me-4">
  <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
</div>
<div class="avatar avatar-2xl avatar-bordered me-4">
  <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
</div>
<div class="avatar avatar-xl avatar-bordered me-4">
  <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
</div>
<div class="avatar avatar-l avatar-bordered me-4">
  <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
</div>
<div class="avatar avatar-m avatar-bordered me-4">
  <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
</div>
<div class="avatar avatar-s avatar-bordered me-4">
  <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
</div>

Avatar Group

<div class="avatar-group mb-4">
  <div class="avatar avatar-4xl ">
    <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
  </div>
  <div class="avatar avatar-4xl ">
    <img class="rounded-circle" src="../../assets/img/team/57.png" alt="" />
  </div>
  <div class="avatar avatar-4xl ">
    <img class="rounded-circle" src="../../assets/img/team/25.png" alt="" />
  </div>
  <div class="avatar avatar-4xl ">
    <img class="rounded-circle" src="../../assets/img/team/8.png" alt="" />
  </div>
  <div class="avatar avatar-4xl ">
    <img class="rounded-circle" src="../../assets/img/team/58.png" alt="" />
  </div>
  <div class="avatar avatar-4xl ">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group mb-4">
  <div class="avatar avatar-3xl ">
    <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
  </div>
  <div class="avatar avatar-3xl ">
    <img class="rounded-circle" src="../../assets/img/team/57.png" alt="" />
  </div>
  <div class="avatar avatar-3xl ">
    <img class="rounded-circle" src="../../assets/img/team/25.png" alt="" />
  </div>
  <div class="avatar avatar-3xl ">
    <img class="rounded-circle" src="../../assets/img/team/8.png" alt="" />
  </div>
  <div class="avatar avatar-3xl ">
    <img class="rounded-circle" src="../../assets/img/team/58.png" alt="" />
  </div>
  <div class="avatar avatar-3xl ">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group mb-4">
  <div class="avatar avatar-2xl ">
    <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
  </div>
  <div class="avatar avatar-2xl ">
    <img class="rounded-circle" src="../../assets/img/team/57.png" alt="" />
  </div>
  <div class="avatar avatar-2xl ">
    <img class="rounded-circle" src="../../assets/img/team/25.png" alt="" />
  </div>
  <div class="avatar avatar-2xl ">
    <img class="rounded-circle" src="../../assets/img/team/8.png" alt="" />
  </div>
  <div class="avatar avatar-2xl ">
    <img class="rounded-circle" src="../../assets/img/team/58.png" alt="" />
  </div>
  <div class="avatar avatar-2xl ">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group">
  <div class="avatar avatar-xl ">
    <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
  </div>
  <div class="avatar avatar-xl ">
    <img class="rounded-circle" src="../../assets/img/team/57.png" alt="" />
  </div>
  <div class="avatar avatar-xl ">
    <img class="rounded-circle" src="../../assets/img/team/25.png" alt="" />
  </div>
  <div class="avatar avatar-xl ">
    <img class="rounded-circle" src="../../assets/img/team/8.png" alt="" />
  </div>
  <div class="avatar avatar-xl ">
    <img class="rounded-circle" src="../../assets/img/team/58.png" alt="" />
  </div>
  <div class="avatar avatar-xl ">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group mb-4">
  <div class="avatar avatar-l ">
    <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
  </div>
  <div class="avatar avatar-l ">
    <img class="rounded-circle" src="../../assets/img/team/57.png" alt="" />
  </div>
  <div class="avatar avatar-l ">
    <img class="rounded-circle" src="../../assets/img/team/25.png" alt="" />
  </div>
  <div class="avatar avatar-l ">
    <img class="rounded-circle" src="../../assets/img/team/8.png" alt="" />
  </div>
  <div class="avatar avatar-l ">
    <img class="rounded-circle" src="../../assets/img/team/58.png" alt="" />
  </div>
  <div class="avatar avatar-l ">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group mb-4">
  <div class="avatar avatar-m ">
    <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
  </div>
  <div class="avatar avatar-m ">
    <img class="rounded-circle" src="../../assets/img/team/57.png" alt="" />
  </div>
  <div class="avatar avatar-m ">
    <img class="rounded-circle" src="../../assets/img/team/25.png" alt="" />
  </div>
  <div class="avatar avatar-m ">
    <img class="rounded-circle" src="../../assets/img/team/8.png" alt="" />
  </div>
  <div class="avatar avatar-m ">
    <img class="rounded-circle" src="../../assets/img/team/58.png" alt="" />
  </div>
  <div class="avatar avatar-m ">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group mb-4">
  <div class="avatar avatar-s ">
    <img class="rounded-circle" src="../../assets/img/team/30.png" alt="" />
  </div>
  <div class="avatar avatar-s ">
    <img class="rounded-circle" src="../../assets/img/team/57.png" alt="" />
  </div>
  <div class="avatar avatar-s ">
    <img class="rounded-circle" src="../../assets/img/team/25.png" alt="" />
  </div>
  <div class="avatar avatar-s ">
    <img class="rounded-circle" src="../../assets/img/team/8.png" alt="" />
  </div>
  <div class="avatar avatar-s ">
    <img class="rounded-circle" src="../../assets/img/team/58.png" alt="" />
  </div>
  <div class="avatar avatar-s ">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
+50
+50
+50
+50
+50
+50
+50
On this page