Avatars

## Avatar Sizes

Avatar classes are applied to the image to scale images properly.

    <img class="avatar-xs rounded-circle" src="../../assets/img/100x100/img4.jpg" alt="Image Description">
    <img class="avatar-sm rounded-circle" src="img/avatar-1.jpg" alt="Image Description">
    <img class="avatar rounded-circle" src="img/avatar-1.jpg" alt="Image Description">
    <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image Description">
    <img class="avatar-xl rounded-circle" src="img/avatar-1.jpg" alt="Image Description">

Copy

### Avatar Statuses

      <div class="d-inline-block position-relative">
        <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-secondary rounded-circle"></span>
        <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
      </div>

      <div class="d-inline-block position-relative">
        <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-primary-darker rounded-circle"></span>
        <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
      </div>

      <div class="d-inline-block position-relative">
        <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-danger rounded-circle"></span>
        <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
      </div>

      <div class="d-inline-block position-relative">
        <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-warning rounded-circle"></span>
        <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
      </div>

      <div class="d-inline-block position-relative">
        <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left bg-light rounded-circle"></span>
        <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
      </div>