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-5xl avatar-bordered me-4">
  <img class="rounded-circle " src="../../assets/img/team/30.png" alt="" />
</div>
<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-5xl ">
    <img class="rounded-circle " src="../../assets/img/team/30.png" alt="" />
  </div>
  <div class="avatar avatar-5xl ">
    <img class="rounded-circle " src="../../assets/img/team/57.png" alt="" />
  </div>
  <div class="avatar avatar-5xl ">
    <img class="rounded-circle " src="../../assets/img/team/25.png" alt="" />
  </div>
  <div class="avatar avatar-5xl ">
    <img class="rounded-circle " src="../../assets/img/team/8.png" alt="" />
  </div>
  <div class="avatar avatar-5xl ">
    <img class="rounded-circle " src="../../assets/img/team/58.png" 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.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>+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.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>+3</span></div>
  </div>
</div>
<div class="avatar-group">
  <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>+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.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>+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.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>+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.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>+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.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>+3</span></div>
  </div>
</div>
+3
+3
+3
+3
+3
+3
+3
+3
On this page

Thank you for creating with Phoenix|
2022 ©Themewagon

v1.6.0

Theme Customizer

Explore different styles according to your preferences

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