#### Avatar

Use `.badge-collapsed-img` class on `ul` tag.

    <div class="avatar avatar-xl">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-lg">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>

#### Indicators

Use `.avatar-indicators` class on `div.avatar` element

    <div class="avatar avatar-xl avatar-indicators avatar-offline">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-lg avatar-indicators avatar-online">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-indicators avatar-offline">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>
    <div class="avatar avatar-sm avatar-indicators avatar-online">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>

#### Shapes

Use `.rounded` and `.rounded-circle` class to make avatar rounded and circlular respectively.

    <div class="avatar avatar-xl">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded" />
    </div>
    <div class="avatar avatar-xl">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>

    <div class="avatar avatar-lg">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded" />
    </div>
    <div class="avatar avatar-lg">
        <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle" />
    </div>

#### Icons

Use `span` with `.avatar-icon` class to make Icons avatar.

    <div class="avatar avatar-xl">
        <span class="avatar-icon rounded-circle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span>
    </div>
    <div class="avatar avatar-lg">
        <span class="avatar-icon rounded-circle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span>
    </div>
    <div class="avatar">
        <span class="avatar-icon rounded-circle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span>
    </div>
    <div class="avatar avatar-sm">
        <span class="avatar-icon rounded-circle"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg></span>
    </div>

#### Initials

Use `span` with `.avatar-title` class to make user name tags.

AG
AG
AG
AG

    <div class="avatar avatar-xl">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
    <div class="avatar avatar-lg">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
    <div class="avatar">
        <span class="avatar-title rounded-circle">AG</span>
    </div>
    <div class="avatar avatar-sm">
        <span class="avatar-title rounded-circle">AG</span>
    </div>

#### Group

Use `div` with `.avatar--group` class and put `div.avatar` inside it.

AG

    <div class="avatar--group">
        <div class="avatar avatar-sm">
            <img alt="avatar" src="../src/assets/img/profile-16.jpeg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-sm">
            <img alt="avatar" src="../src/assets/img/delete-user-4.jpeg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-sm">
            <img alt="avatar" src="../src/assets/img/profile-5.jpeg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-sm">
            <span class="avatar-title rounded-circle">AG</span>
        </div>
    </div>

#### Group with badge

Use `.avatar--group` with `.avatar-group-badge` class also, add `.badge` element with `.counter` class.

AG
7
AG

    <div class="avatar--group avatar-group-badge">
        <span class="badge badge-primary counter"></span>
        <div class="avatar avatar-sm">
            <img alt="avatar" src="assets/img/profile-16.jpeg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-sm">
            <img alt="avatar" src="assets/img/delete-user-4.jpeg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-sm">
            <img alt="avatar" src="assets/img/profile-5.jpeg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-sm">
            <span class="avatar-title rounded-circle">AG</span>
        </div>
    </div>

    <div class="avatar--group avatar-group-badge">
        <span class="badge badge-primary counter">9</span>
        <div class="avatar avatar-sm">
            <img alt="avatar" src="assets/img/profile-16.jpeg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-sm">
            <img alt="avatar" src="assets/img/delete-user-4.jpeg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-sm">
            <img alt="avatar" src="assets/img/profile-5.jpeg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-sm">
            <span class="avatar-title rounded-circle">AG</span>
        </div>
    </div>

#### Animate Y-axis

Use `.translateY-axis` class to make animate profile on Y-axis.

AG

    <div class="avatar--group">
        <div class="avatar avatar-sm translateY-axis">
            <img alt="avatar" src="../src/assets/img/profile-16.jpeg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-sm translateY-axis">
            <img alt="avatar" src="../src/assets/img/delete-user-4.jpeg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-sm translateY-axis">
            <img alt="avatar" src="../src/assets/img/profile-5.jpeg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-sm translateY-axis">
            <span class="avatar-title rounded-circle">AG</span>
        </div>
    </div>

#### Animate X-axis

Use `.translateX-axis` class to make animate profile on X-axis.

AG

    <div class="avatar--group">
        <div class="avatar avatar-sm translateX-axis">
            <img alt="avatar" src="../src/assets/img/profile-16.jpeg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-sm translateX-axis">
            <img alt="avatar" src="../src/assets/img/delete-user-4.jpeg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-sm translateX-axis">
            <img alt="avatar" src="../src/assets/img/profile-5.jpeg" class="rounded-circle" />
        </div>
        <div class="avatar avatar-sm translateX-axis">
            <span class="avatar-title rounded-circle">AG</span>
        </div>
    </div>

#### Tooltip

Use Bootstrap Tooltip on `img` tag and `span.avatar-title` tag

AG

    <div class="avatar--group">
        <div class="avatar avatar-sm">
            <img alt="avatar" src="../src/assets/img/profile-16.jpeg" class="rounded-circle  bs-tooltip" data-bs-original-title="Judy Holmes" />
        </div>
        <div class="avatar avatar-sm">
            <img alt="avatar" src="../src/assets/img/delete-user-4.jpeg" class="rounded-circle  bs-tooltip" data-bs-original-title="Judy Holmes" />
        </div>
        <div class="avatar avatar-sm">
            <img alt="avatar" src="../src/assets/img/profile-5.jpeg" class="rounded-circle  bs-tooltip" data-bs-original-title="Judy Holmes" />
        </div>
        <div class="avatar avatar-sm">
            <span class="avatar-title rounded-circle  bs-tooltip" data-bs-original-title="Alan Green">AG</span>
        </div>
    </div>

#### Avatar Chips

Kelly Mary Lisa Andy Daisy James Oscar

    <div class="avatar--group">
        <div class="avatar">
            <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
        </div>
        <div class="avatar">
            <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
        </div>
        <div class="avatar">
            <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
        </div>
        <div class="avatar">
            <span class="avatar-title rounded-circle  bs-tooltip" data-original-title="Alan Green">AG</span>
        </div>
    </div>

#### Dismissable Chips

Kelly × Mary × Lisa × Andy × Daisy × James × Oscar ×

    <div class="avatar--group">
        <div class="avatar">
            <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
        </div>
        <div class="avatar">
            <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
        </div>
        <div class="avatar">
            <img alt="avatar" src="../src/assets/img/profile-12.jpeg" class="rounded-circle  bs-tooltip" data-original-title="Judy Holmes" />
        </div>
        <div class="avatar">
            <span class="avatar-title rounded-circle  bs-tooltip" data-original-title="Alan Green">AG</span>
        </div>
    </div>