Ynex - Avatars

Avatars


<span className="avatar me-2 avatar-radius-0">
<img src={face1} alt="img"/>
</span>
<span className="avatar me-2">
<img src={face2} alt="img"/>
</span>
<span className="avatar me-2 avatar-rounded">
<img src={face3} alt="img"/>
</span>

Avatar Sizes

Avatars of different sizes


 <span className="avatar avatar-xs me-2">
 <img src={face4} alt="img"/>
</span>
<span className="avatar avatar-sm me-2">
 <img src={face5} alt="img"/>
</span>
<span className="avatar avatar-md me-2">
 <img src={face6} alt="img"/>
</span>
<span className="avatar avatar-lg me-2">
 <img src={face7} alt="img"/>
</span>
<span className="avatar avatar-xl me-2">
 <img src={face8} alt="img"/>
</span>
<span className="avatar avatar-xxl me-2">
 <img src={face9} alt="img"/>
</span>

Avatar With Icons

Avatar contains icons to perform respective action.


 <span className="avatar avatar-xs me-2 avatar-rounded">
 <img src={face2} alt="img"/>
 <Link href="#!" className="badge bg-success rounded-pill avatar-badge">
 <i className="fe fe-camera"></i></Link>
</span>
<span className="avatar avatar-sm me-2 avatar-rounded">
 <img src={face3} alt="img"/>
 <Link href="#!" className="badge rounded-pill bg-secondary avatar-badge">
 <i className="fe fe-edit"></i></Link>
</span>
<span className="avatar avatar-md me-2 avatar-rounded">
 <img src={face14} alt="img"/>
 <Link href="#!" className="badge rounded-pill bg-warning avatar-badge">
 <i className="fe fe-plus"></i></Link>
</span>
<span className="avatar avatar-lg me-2 avatar-rounded">
 <img src={face13} alt="img"/>
 <Link href="#!" className="badge rounded-pill bg-info avatar-badge">
 <i className="fe fe-edit"></i></Link>
</span>
<span className="avatar avatar-xl me-2 avatar-rounded">
 <img src={face15} alt="img"/>
 <Link href="#!" className="badge rounded-pill bg-success avatar-badge">
 <i className="fe fe-camera"></i></Link>
</span>
<span className="avatar avatar-xxl me-2 avatar-rounded">
 <img src={face9} alt="img"/>
 <Link href="#!" className="badge rounded-pill bg-danger avatar-badge">
 <i className="fe fe-plus"></i></Link>
</span>

Avatar With Online Status Indicators

avatars having online status indicator.


  <span className="avatar avatar-sm online me-2 avatar-rounded">
  <img src={face10} alt="img"/>
</span>
<span className="avatar avatar-md me-2 online avatar-rounded">
  <img src={face12} alt="img"/>
</span>
<span className="avatar avatar-lg me-2 online avatar-rounded">
  <img src={face13} alt="img"/>
</span>
<span className="avatar avatar-xl me-2 online avatar-rounded">
  <img src={face14} alt="img"/>
</span>
<span className="avatar avatar-xxl me-2 online avatar-rounded">
  <img src={face15} alt="img"/>
</span>

Avatar With Offline Status Indicators

avatars having a offline status indicator.


  <span className="avatar avatar-sm offline me-2 avatar-rounded">
  <img src={face3} alt="img"/>
</span>
<span className="avatar avatar-md me-2 offline avatar-rounded">
  <img src={face4} alt="img"/>
</span>
<span className="avatar avatar-lg me-2 offline avatar-rounded">
  <img src={face5} alt="img"/>
</span>
<span className="avatar avatar-xl me-2 offline avatar-rounded">
  <img src={face6} alt="img"/>
</span>
<span className="avatar avatar-xxl me-2 offline avatar-rounded">
  <img src={face7} alt="img"/>
</span>

Avatars With Number Badges

Avatar numbers indicates the no. of unread notififactions/messages.


   <span className="avatar avatar-sm me-2 avatar-rounded">
   <img src={face3} alt="img"/>
   <span className="badge rounded-pill bg-secondary avatar-badge">5</span>
</span>
<span className="avatar avatar-md me-2 avatar-rounded">
   <img src={face14} alt="img"/>
   <span className="badge rounded-pill bg-warning avatar-badge">1</span>
</span>
<span className="avatar avatar-lg me-2 avatar-rounded">
   <img src={face13} alt="img"/>
   <span className="badge rounded-pill bg-info avatar-badge">7</span>
</span>
<span className="avatar avatar-xl me-2 avatar-rounded">
   <img src={face15} alt="img"/>
   <span className="badge rounded-pill bg-success avatar-badge">3</span>
</span>
<span className="avatar avatar-xxl me-2 avatar-rounded">
   <img src={face9} alt="img"/>
   <span className="badge rounded-pill bg-danger avatar-badge">9</span>
</span>

Avatar With Initials

Avatar contains intials when user profile doesn't exist.

XSSMMDLGXLXXL


<span className="avatar avatar-xs m-2 bg-primary">
 xs
</span>
<span className="avatar avatar-sm m-2 bg-secondary">
    SM
</span>
<span className="avatar avatar-md m-2 bg-warning">
    MD
</span>
<span className="avatar avatar-lg m-2 bg-danger">
    LG
</span>
<span className="avatar avatar-xl m-2 bg-success">
    XL
</span>
<span className="avatar avatar-xxl m-2 bg-info">
    XXL
</span>

Stacked Avatars

Group of avatars stacked together.


{Avatarstacked.map((idx)=>(
    <span className="avatar" key={Math.random()}>
        <img src={idx.src} alt="img"/>
    </span>
    ))}
<Link className="avatar bg-primary text-fixed-white" href="#!">
+8
</Link>

Rounded Stacked Avatars

Group of avatars stacked together.


{Avatarstacked.map((idx)=>(
<span className="avatar avatar-rounded" key={Math.random()}>
<img src={idx.src} alt="img"/>
</span>
))}
<Link className="avatar bg-primary avatar-rounded text-fixed-white" to="#">
+8
</Link>

Switcher

Avatars