## 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

##### Demo widget

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

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize