<Card>
  <Card.Header>
    <h5>Colors</h5>
    <p className="text-muted">
      Use color <code>bg-*</code> to change the background theme color of avatar.
    </p>
  </Card.Header>
  <Card.Body>
    <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>
  </Card.Body>
</Card>

<Card>
  <Card.Header>
    <h5>Light Background</h5>
    <p className="text-muted">
      For light style use <code>text-light-*</code> class.
    </p>
  </Card.Header>
  <Card.Body>
    <div className="d-flex gap-3 flex-wrap">
      <span className="text-light-primary h-45 w-45 d-flex-center b-r-50">
        <User size={18} weight="fill" />
      </span>
      <span className="text-light-secondary h-45 w-45 d-flex-center b-r-50">
        <User size={18} weight="fill" />
      </span>
      <span className="text-light-success h-45 w-45 d-flex-center b-r-50">
        <User size={18} weight="fill" />
      </span>
      <span className="text-light-info h-45 w-45 d-flex-center b-r-50">
        <User size={18} weight="fill" />
      </span>
      <span className="text-light-warning h-45 w-45 d-flex-center b-r-50">
        <User size={18} weight="fill" />
      </span>
      <span className="text-light-danger h-45 w-45 d-flex-center b-r-50">
        <User size={18} weight="fill" />
      </span>
    </div>
  </Card.Body>
</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">
       <User size={18} weight="fill" />
      </span>
      <span className="text-light-secondary h-45 w-45 d-flex-center b-r-6">
       <User size={18} weight="fill" />
      </span>
      <span className="text-light-success h-45 w-45 d-flex-center b-r-10">
       <User size={18} weight="fill" />
      </span>
      <span className="text-light-info h-45 w-45 d-flex-center b-r-14">
       <User size={18} weight="fill" />
      </span>
      <span className="text-light-warning h-45 w-45 d-flex-center b-r-20">
       <User size={18} weight="fill" />
      </span>
      <span className="text-light-danger h-45 w-45 d-flex-center b-r-30">
       <User size={18} weight="fill" />
      </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">
    <Image width={0}
                      height={0}
                      sizes="100vw" src="/images/avatar/1.png" alt="" className="w-100 h-100 img-fluid">
  </div>
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-secondary">
    <Image width={0}
                      height={0}
                      sizes="100vw" src="/images/avatar/2.png" alt="" className="w-100 h-100 img-fluid">
  </div>
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success">
    <Image width={0}
                      height={0}
                      sizes="100vw" src="/images/avatar/3.png" alt="" className="w-100 h-100 img-fluid">
  </div>
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-info">
    <Image width={0}
                      height={0}
                      sizes="100vw" src="/images/avatar/4.png" alt="" className="w-100 h-100 img-fluid">
  </div>
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success">
    <Image width={0}
                      height={0}
                      sizes="100vw" src="/images/avatar/5.png" alt="" className="w-100 h-100 img-fluid">
  </div>
  <div className="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger">
    <Image width={0}
                      height={0}
                      sizes="100vw" src="/images/avatar/6.png" alt="" className="w-100 h-100 img-fluid">
  </div>
</div>

3

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

<ul className="avatar-group d-flex gap-2">
  <li className="rounded-circle bg-primary">
    <Image src="/images/avatar/4.png"  width={0} height={0} alt="img" className="w-100 h-100 img-fluid" />
  </li>
  <li className="rounded-circle bg-success">
    <Image src="/images/avatar/5.png"  width={0} height={0} alt="img" className="w-100 h-100  img-fluid" />
  </li>
  ...
</ul>