Avatar

The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.

Shapes

Default avatar is square in shape. For rounded and circle avatar add .avatar-rounded modifier classes respectively.

Preview

Jsx

Classes

import React from 'react';
//Images
import avatar1 from '../../../Assets/dist/img/avatar1.jpg';
import avatar2 from '../../../Assets/dist/img/avatar2.jpg';
import avatar3 from '../../../Assets/dist/img/avatar3.jpg';

const Shapes = () => {
  return (
    <>
        <div className="avatar avatar-rounded">
            <img src={avatar1} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-square">
            <img src={avatar2} alt="user" className="avatar-img" />
        </div>
        <div className="avatar">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
    </>
  );
}

export default Shapes;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="avatar avatar-[value]"`	rounded / square

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Sizing

Fancy larger or smaller avatar? Add .avatar-xl, .avatar-lg, .avatar-md, .avatar-sm or .avatar-xs for additional sizes. For custom sizes use sizing utilities - e.g. d-14 or d-20.

Preview

Jsx

Classes

import React from 'react';
//Images
import avatar3 from '../../../Assets/dist/img/avatar3.jpg';

const AvatarSizes = () => {
  return (
    <>
        <div className="avatar avatar-rounded avatar-xxxl">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-xxl">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-xl">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-lg">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-md">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-sm">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-xs">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
        <div className="avatar avatar-rounded avatar-xxs">
            <img src={avatar3} alt="user" className="avatar-img" />
        </div>
    </>
  );
}

export default AvatarSizes;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="avatar avatar-[value]"`	xxxl / xxl / xl / lg / md / xs / xxs

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Indicators on avatar

Fancy larger or smaller avatar? Add position-relative and position classes with badge Indicators.

Preview

Jsx

Classes

import React from 'react';
import { Badge } from 'react-bootstrap';
//Images
import avatar1 from '../../../Assets/dist/img/avatar1.jpg';
import avatar3 from '../../../Assets/dist/img/avatar3.jpg';
import avatar4 from '../../../Assets/dist/img/avatar4.jpg';
import avatar5 from '../../../Assets/dist/img/avatar5.jpg';

const IndicatorOnAvatar = () => {
  return (
    <>
        <div className="avatar position-relative">
            <img src={avatar1} alt="user" className="avatar-img" />
            <Badge bg="success" className="badge-indicator badge-indicator-lg position-bottom-end-overflow" />
        </div>
        <div className="avatar position-relative">
            <img src={avatar3} alt="user" className="avatar-img" />
            <Badge bg="success" className="badge-indicator badge-indicator-lg position-top-end-overflow" />
        </div>
        <div className="avatar avatar-rounded position-relative">
            <img src={avatar4} alt="user" className="avatar-img" />
            <Badge bg="success" className="badge-indicator badge-indicator-lg position-top-end-overflow-1" />
        </div>
        <div className="avatar avatar-rounded position-relative">
            <img src={avatar5} alt="user" className="avatar-img" />
            <Badge bg="success" className="badge-indicator badge-indicator-lg position-bottom-end-overflow-1" />
        </div>
    </>
  );
}

export default IndicatorOnAvatar;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`classNames="badge-indicator badge-indicator-xl position-[Value]"`	top-end-overflow-1 / bottom-end-overflow-1 / top-end-overflow / bottom-end-overflow

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Badge on avatar

Fancy larger or smaller avatar? Add position-relative and position classes with badge.

Preview

Jsx

Classes

import React from 'react';
import { Badge } from 'react-bootstrap';
//Images
import avatar from '../../../Assets/dist/img/avatar3.jpg';

const BadgeOnAvatar = () => {
  return (
    <>
        <div className="avatar avatar-xxxl avatar-rounded position-relative">
            <img src={avatar} alt="user" className="avatar-img" />
            <Badge bg="success" className="badge-xl position-bottom-end-overflow-1" >10</Badge>
        </div>
        <div className="avatar avatar-xxl avatar-rounded position-relative">
            <img src={avatar} alt="user" className="avatar-img" />
            <Badge bg="success" className="badge-xl position-bottom-end-overflow-1" >10</Badge>
        </div>
        <div className="avatar avatar-xl avatar-rounded position-relative">
            <img src={avatar} alt="user" className="avatar-img" />
            <Badge bg="success" className="badge-xl position-bottom-end-overflow-1" >5</Badge>
        </div>
        <div className="avatar avatar-lg avatar-rounded position-relative">
            <img src={avatar} alt="user" className="avatar-img" />
            <Badge bg="success" className="position-bottom-end-overflow-1" >5</Badge>
        </div>
        <div className="avatar avatar-md avatar-rounded position-relative">
            <img src={avatar} alt="user" className="avatar-img" />
            <Badge bg="success" className="position-bottom-end-overflow-1" >5</Badge>
        </div>
        <div className="avatar avatar avatar-rounded position-relative">
            <img src={avatar} alt="user" className="avatar-img" />
            <Badge bg="success" className="badge-sm position-bottom-end-overflow-1" >5</Badge>
        </div>
        <div className="avatar avatar-sm avatar-rounded position-relative">
            <img src={avatar} alt="user" className="avatar-img" />
            <Badge bg="success" className="badge-sm position-bottom-end-overflow-1" >5</Badge>
        </div>
        <div className="avatar avatar-xs avatar-rounded position-relative">
            <img src={avatar} alt="user" className="avatar-img" />
            <Badge bg="success" className="badge-sm position-bottom-end-overflow-1" >5</Badge>
        </div>
    </>
  );
}

export default BadgeOnAvatar;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="badge-indicator-xl position-[Value]"`	top-end-overflow-1 / bottom-end-overflow-1 / top-end-overflow / bottom-end-overflow

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Avatar with initials

Wrap .initial-wrap with .avatar classess.

Preview

Jsx

Classes

import React from 'react';
const InitialAvatar = () => {
  return (
    <>
        <div className="avatar avatar-xxxl  avatar-primary avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-xxl  avatar-primary avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-xl avatar-primary avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-lg avatar-primary avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-md avatar-primary avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-primary avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-sm avatar-primary avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-xs avatar-primary avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-xxs avatar-primary avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
    </>
  );
}

export default InitialAvatar;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`classNames="avatar avatar-[value]"`	xxxl / xxl / xl / lg / md / xs / xxs

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Avatar with Icons

Add icons inside .initial-wrap classes.

Preview

Jsx

Classes

import React from 'react';
const InitialAvatarWithIcons = () => {
  return (
    <>
        <div className="avatar  avatar-icon avatar-xxxl avatar-primary avatar-rounded">
            <span className="initial-wrap">
                <span className="feather-icon">
                    <Settings />
                </span>
            </span>
        </div>
        <div className="avatar  avatar-icon avatar-xxl avatar-primary avatar-rounded">
            <span className="initial-wrap">
                <i className="ri-checkbox-line" />
            </span>
        </div>
        <div className="avatar  avatar-icon avatar-xl avatar-primary avatar-rounded">
            <span className="initial-wrap">
                <i className="ri-checkbox-line" />
            </span>
        </div>
        <div className="avatar  avatar-icon avatar-lg avatar-primary avatar-rounded">
            <span className="initial-wrap">
                <i className="ri-checkbox-line" />
            </span>
        </div>
        <div className="avatar  avatar-icon avatar-md avatar-primary avatar-rounded">
            <span className="initial-wrap">
                <i className="ri-checkbox-line" />
            </span>
        </div>
        <div className="avatar  avatar-icon avatar-primary avatar-rounded">
            <span className="initial-wrap">
                <i className="ri-checkbox-line" />
            </span>
        </div>
        <div className="avatar  avatar-icon avatar-sm avatar-primary avatar-rounded">
            <span className="initial-wrap">
                <i className="ri-checkbox-line" />
            </span>
        </div>
        <div className="avatar  avatar-icon avatar-xs avatar-primary avatar-rounded">
            <span className="initial-wrap">
                <i className="ri-checkbox-line" />
            </span>
        </div>
        <div className="avatar  avatar-icon avatar-xxs avatar-primary avatar-rounded">
            <span className="initial-wrap">
                <i className="ri-checkbox-line" />
            </span>
        </div>
    </>
  );
}

export default InitialAvatarWithIcons;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="avatar avatar-[value]"`	xxxl / xxl / xl / lg / md / xs / xxs

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Avatar color option

Add color classes like .avatar-primary,.avatar-info with avatar.

Preview

Jsx

Classes

import React from 'react';
const AvatarColors = () => {
  return (
    <>
        <div className="avatar avatar-primary avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-info  avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-success avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-pink avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-danger avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-warning avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-blue avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-light avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-dark avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
    </>
  );
}

export default AvatarColors;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="avatar avatar-[value]"`	primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke / light / dark

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Avatar soft

Add soft color classes like.avatar .avatar-soft-* for soft colors.

Preview

Jsx

Classes

import React from 'react';
const AvatarSoft = () => {
  return (
    <>
        <div className="avatar avatar-soft-primary  avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-soft-info  avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-soft-success avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-soft-pink avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-soft-danger avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-soft-warning avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-soft-blue avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-soft-light avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-soft-dark avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div><div className="avatar avatar-soft-primary  avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-soft-info  avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-soft-success avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-soft-pink avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-soft-danger avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-soft-warning avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-soft-blue avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-soft-light avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
        <div className="avatar avatar-soft-dark avatar-rounded">
            <span className="initial-wrap">PR</span>
        </div>
    </>
  );
}

export default AvatarSoft;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="avatar avatar-soft-[value]"`	primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke / light / dark

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Avatar with logo

Use .avatar-logo with avatar.

Preview

Jsx

Classes

import React from 'react';
import avatar from "../../../Assets/dist/img/logo4.jpg";

const AvatarWithLogo = () => {
  return (
    <>
        <div className="avatar avatar-logo avatar-rounded avatar-xxxl">
            <span className="initial-wrap">
                <img src={avatar} alt="logo" />
            </span>
        </div>
        <div className="avatar avatar-logo avatar-rounded avatar-xxl">
            <span className="initial-wrap">
                <img src={avatar} alt="logo" />
            </span>
        </div>
        <div className="avatar avatar-logo avatar-rounded avatar-xl">
            <span className="initial-wrap">
                <img src={avatar} alt="logo" />
            </span>
        </div>
        <div className="avatar avatar-logo avatar-rounded avatar-lg">
            <span className="initial-wrap">
                <img src={avatar} alt="logo" />
            </span>
        </div>
        <div className="avatar avatar-logo avatar-rounded avatar-md">
            <span className="initial-wrap">
                <img src={avatar} alt="logo" />
            </span>
        </div>
        <div className="avatar avatar-logo avatar-rounded">
            <span className="initial-wrap">
                <img src={avatar} alt="logo" />
            </span>
        </div>
        <div className="avatar avatar-logo avatar-rounded avatar-sm">
            <span className="initial-wrap">
                <img src={avatar} alt="logo" />
            </span>
        </div>
        <div className="avatar avatar-logo avatar-rounded avatar-xs">
            <span className="initial-wrap">
                <img src={avatar} alt="logo" />
            </span>
        </div>
        <div className="avatar avatar-logo avatar-rounded avatar-xxs">
            <span className="initial-wrap">
                <img src={avatar} alt="logo" />
            </span>
        </div>
    </>
  );
}

export default AvatarWithLogo;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`class="avatar avatar-[value]"`	xxxl / xxl / xl / lg / md / xs / xxs

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Groups

In need of an avatar, but not the image avatar? Replace the default modifier class with avatar-group avatar-group-* ones to create avatar with name initials.

Preview

Jsx

Classes

import React from 'react';
//Images
import avatar1 from '../../../Assets/dist/img/avatar1.jpg';
import avatar2 from '../../../Assets/dist/img/avatar2.jpg';
import avatar3 from '../../../Assets/dist/img/avatar3.jpg';

const AvatarGroup = () => {
  return (
    <>
        <div className="avatar-group avatar-group-lg me-5">
            <div className="avatar avatar-rounded" >
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar1} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar2} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar3} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-primary avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <span className="initial-wrap"><span>RD</span></span>
                </NubraTooltip>
            </div>
        </div>
        <div className="avatar-group  me-5">
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar1} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar2} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar3} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-primary avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <span className="initial-wrap"><span>RD</span></span>
                </NubraTooltip>
            </div>
        </div>
        <div className="avatar-group avatar-group-sm">
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar1} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar2} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar3} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-soft-primary avatar-rounded">
                <NubraTooltip title="Add Avatar" placement="top" >
                    <span className="initial-wrap">
                        <span className="feather-icon">
                            <Plus />
                        </span>
                    </span>
                </NubraTooltip>
            </div>
        </div>
    </>
  );
}

export default AvatarGroup;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="avatar-group avatar-group-[value]"`	lg / sm

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Overlapped Avatar Group

For overlapped group of avatars replace default modifier class with .avatar-group-overlapped.

Preview

Jsx

Classes

import React from 'react';
//Images
import avatar1 from '../../../Assets/dist/img/avatar1.jpg';
import avatar2 from '../../../Assets/dist/img/avatar2.jpg';
import avatar3 from '../../../Assets/dist/img/avatar3.jpg';

const AvatarGroupOverlapped = () => {
  return (
    <>
        <div className="avatar-group avatar-group-lg avatar-group-overlapped me-5">
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar1} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar2} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar3} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-soft-primary avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <span className="initial-wrap"><span>RD</span></span>
                </NubraTooltip>
            </div>
        </div>
        <div className="avatar-group avatar-group-overlapped me-5">
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar1} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar2} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar3} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-soft-primary avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <span className="initial-wrap"><span>RD</span></span>
                </NubraTooltip>
            </div>
        </div>
        <div className="avatar-group avatar-group-sm avatar-group-overlapped">
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar1} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar2} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-rounded">
                <NubraTooltip title="Tooltip text" placement="top" >
                    <img src={avatar3} alt="user" className="avatar-img" />
                </NubraTooltip>
            </div>
            <div className="avatar avatar-soft-primary avatar-rounded">
                <span className="initial-wrap">
                    <NubraTooltip title="Add Avatar" placement="top" >
                        <span className="feather-icon">
                            <Plus />
                        </span>
                    </NubraTooltip>
                </span>
            </div>
        </div>
    </>
  );
}

export default AvatarGroupOverlapped;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Class	Values
`className="avatar-group avatar-group-overlapped avatar-group-[value]"`	lg / sm

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Shapes
Sizing
Indicators on avatar
Badge on avatar
Avatar with initials
Avatar with Icons
Inverse initials
Inverse icons
Avatar with logo
Groups