<Card>
  <CardHeader>
    <h5>Colors</h5>
    <p className="text-muted">
      Use color <code>bg-*</code> to change the background theme color of avatar.
    </p>
  </CardHeader>
  <CardBody>
    <div className="d-flex gap-3 flex-wrap">
<span className="bg-primary h-45 w-45 d-flex-center b-r-50">
        FontAwesomeIcon icon={faUser}
      </span>
<span className="bg-secondary h-45 w-45 d-flex-center b-r-50">
        FontAwesomeIcon icon={faUser}
      </span>
<span className="bg-success h-45 w-45 d-flex-center b-r-50">
        FontAwesomeIcon icon={faUser}
      </span>
<span className="bg-info h-45 w-45 d-flex-center b-r-50">
        FontAwesomeIcon icon={faUser}
      </span>
<span className="bg-warning h-45 w-45 d-flex-center b-r-50">
        P
      </span>
<span className="bg-danger h-45 w-45 d-flex-center b-r-50">
        AD
      </span>
    </div>
  </CardBody>
</Card>

<Card>
  <CardHeader>
    <h5>Light Background</h5>
    <p className="text-muted">
      For light style use <code>text-light-*</code> class.
    </p>
  </CardHeader>
  <CardBody>
    <div className="d-flex gap-3 flex-wrap">
      <span className="text-light-primary h-45 w-45 d-flex-center b-r-50">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-secondary h-45 w-45 d-flex-center b-r-50">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-success h-45 w-45 d-flex-center b-r-50">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-info h-45 w-45 d-flex-center b-r-50">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-warning h-45 w-45 d-flex-center b-r-50">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-danger h-45 w-45 d-flex-center b-r-50">
        <FontAwesomeIcon icon={faUser} />
      </span>
    </div>
  </CardBody>
</Card>

<Card>
  <CardHeader>
    <h5>Radius</h5>
    <p className="text-muted">
      Radius avatar text in soft color example
    </p>
  </CardHeader>
  <CardBody>
    <div className="d-flex gap-3 flex-wrap">
      <span className="text-light-primary h-45 w-45 d-flex-center b-r-0">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-secondary h-45 w-45 d-flex-center b-r-6">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-success h-45 w-45 d-flex-center b-r-10">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-info h-45 w-45 d-flex-center b-r-14">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-warning h-45 w-45 d-flex-center b-r-20">
        <FontAwesomeIcon icon={faUser} />
      </span>
      <span className="text-light-danger h-45 w-45 d-flex-center b-r-30">
        <FontAwesomeIcon icon={faUser} />
      </span>
    </div>
  </CardBody>
</Card>

<div className="d-flex gap-3 flex-wrap">
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-primary">
    <img src="/images/avatar/1.png" alt="" className="img-fluid">
  </div>
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-secondary">
    <img src="/images/avatar/2.png" alt="" className="img-fluid">
  </div>
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success">
    <img src="/images/avatar/3.png" alt="" className="img-fluid">
  </div>
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-info">
    <img src="/images/avatar/4.png" alt="" className="img-fluid">
  </div>
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success">
    <img src="/images/avatar/5.png" alt="" className="img-fluid">
  </div>
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger">
    <img src="/images/avatar/6.png" alt="" className="img-fluid">
  </div>
</div>

<div className="d-flex gap-3 flex-wrap">
  <span className="bg-danger h-45 w-45 d-flex-center b-r-50 position-relative">
    &lt;i className="fa fa-user"&gt;&lt;/i&gt;
    <span className="position-absolute top-0 start-1 p-1 bg-danger border border-light rounded-circle"></span>
  </span>
  <span className="bg-success h-45 w-45 d-flex-center b-r-50 position-relative">
    &lt;i className="fa fa-user"&gt;&lt;/i&gt;
    <span className="position-absolute bottom-0 start-1 p-1 bg-success border border-light rounded-circle"></span>
  </span>
  <span className="bg-warning h-45 w-45 d-flex-center b-r-50 position-relative">
    &lt;i className="fa fa-user"&gt;&lt;/i&gt;
    <span className="position-absolute bottom-0 end-0 p-1 bg-warning border border-light rounded-circle"></span>
  </span>
  <span className="bg-secondary h-45 w-45 d-flex-center b-r-50 position-relative">
    &lt;img src="/images/avatar/1.png" alt="" className="img-fluid b-r-50"&gt;
    <span className="position-absolute top-0 end-0 p-1 bg-success border border-light rounded-circle"></span>
  </span>
  <span className="bg-secondary h-45 w-45 d-flex-center b-r-50 position-relative">
    &lt;img src="/images/avatar/4.png" alt="" className="img-fluid b-r-50"&gt;
    <span className="position-absolute top-0 end-0 d-flex-center bg-warning border-light text-center h-20 w-20 f-s-10 start-30  rounded-circle">3</span>
  </span>
  <span className="bg-secondary h-45 w-45 d-flex-center b-r-50 position-relative">
    &lt;img src="/images/avatar/6.png" alt="" className="img-fluid b-r-50"&gt;
    <span className="position-absolute top-0 d-flex-center bg-danger border border-light text-center h-20 w-20 f-s-10 start-30  rounded-circle">&lt;IconMail /&gt;</span>
  </span>
</div>

<div className="d-flex gap-3 flex-wrap">
  <ul className="avatar-group">
    <li className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-primary" ">
      <img src="/images/avatar/4.png" alt="" className="img-fluid">
    </li>
    <li className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success" ">
      <img src="/images/avatar/5.png" alt="" className="img-fluid">
    </li>
    <li className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger" ">
      <img src="/images/avatar/6.png" alt="" className="img-fluid">
    </li>
  </ul>

  <ul className="avatar-group">
    <li className="text-bg-primary h-45 w-45 d-flex-center b-r-50">
      &lt;i className="fa fa-user"&gt;&lt;/i&gt;
    </li>
    <li className="text-bg-secondary h-45 w-45 d-flex-center b-r-50">
      &lt;i className="fa fa-user"&gt;&lt;/i&gt;
    </li>
    <li className="text-bg-success h-45 w-45 d-flex-center b-r-50">
      &lt;i className="fa fa-user"&gt;&lt;/i&gt;
    </li>
  </ul>

  <ul className="avatar-group">
    <li className="text-bg-danger h-45 w-45 d-flex-center b-r-50" >
      A
    </li>
    <li className="text-bg-dark h-45 w-45 d-flex-center b-r-50" >
      CD
    </li>
    <li className="text-bg-warning h-45 w-45 d-flex-center b-r-50" >
      XYZ
    </li>
    <li className="text-bg-secondary h-30 w-30 d-flex-center b-r-50" >
      2+
    </li>
  </ul>
</div>