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.webp" alt="" />
</div>

Square

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

Soft

<div class="avatar avatar-xl ">
  <img class="rounded-soft " src="../../assets/img/team/30.webp" 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.webp" alt="" />
</div>
<div class="avatar avatar-xl status-offline  me-4">
  <img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-xl status-away  me-4">
  <img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>
<div class="avatar avatar-xl status-do-not-disturb  me-4">
  <img class="rounded-circle " src="../../assets/img/team/30.webp" alt="" />
</div>

Sizes

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

Avatar Group

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

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize