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

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.18.0

Demo widget
Request a callbackSearch in chatShow historyReport to AdminClose Support

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

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