Avatar

Use avater of different shapes and sizes with a single component.

Circular
<div class="avatar avatar-4xl">
  <img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
</div>
Square
<div class="avatar avatar-4xl">
  <img src="../../../assets/img/team/2.jpg" alt="" />
</div>
Soft
<div class="avatar avatar-4xl">
  <img class="rounded-soft" src="../../../assets/img/team/3.jpg" alt="" />
</div>
Content
12+
<div class="avatar avatar-4xl">
  <div class="avatar-name rounded-circle "><span>12+</span></div>
</div>
Name
EW
<div class="avatar avatar-4xl">
  <div class="avatar-name rounded-circle"><span>EW</span></div>
</div>
Emoji
🎁
<div class="avatar avatar-4xl">
  <div class="avatar-emoji rounded-circle "><span role="img" aria-label="Emoji">🎁</span></div>
</div>
Status
<div class="row align-items-center">
  <div class="col-auto">
    <div class="avatar avatar-4xl status-online">
      <img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-4xl status-offline">
      <img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-4xl status-away">
      <img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-4xl status-do-not-disturb">
      <img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
</div>
Sizes
<div class="row align-items-center">
  <div class="col-auto">
    <div class="avatar avatar-5xl">
      <img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-4xl">
      <img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-3xl">
      <img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-2xl">
      <img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-xl">
      <img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-l">
      <img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-m">
      <img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-s">
      <img class="rounded-circle" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
</div>
Avatar Group
+50
+50
+50
+50
+50
+50
+50
+50
<div class="avatar-group">
  <div class="avatar avatar-s border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-s border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-s border border-2 border-light rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group">
  <div class="avatar avatar-m border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-m border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-m border border-2 border-light rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group">
  <div class="avatar avatar-l border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-l border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-l border border-2 border-light rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group">
  <div class="avatar avatar-xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-xl border border-2 border-light rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group">
  <div class="avatar avatar-2xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-2xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-2xl border border-2 border-light rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group">
  <div class="avatar avatar-3xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-3xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-3xl border border-2 border-light rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group">
  <div class="avatar avatar-4xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-4xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-4xl border border-2 border-light rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group">
  <div class="avatar avatar-5xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-5xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-5xl border border-2 border-light rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
Avatar Group Dense
+50
+50
+50
+50
+50
+50
+50
+50
<div class="avatar-group avatar-group-dense">
  <div class="avatar avatar-s border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-s border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-s border border-2 border-light rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group avatar-group-dense">
  <div class="avatar avatar-m border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-m border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-m border border-2 border-light rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group avatar-group-dense">
  <div class="avatar avatar-l border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-l border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-l border border-2 border-light rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group avatar-group-dense">
  <div class="avatar avatar-xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-xl border border-2 border-light rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group avatar-group-dense">
  <div class="avatar avatar-2xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-2xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-2xl border border-2 border-light rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group avatar-group-dense">
  <div class="avatar avatar-3xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-3xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-3xl border border-2 border-light rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group avatar-group-dense">
  <div class="avatar avatar-4xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-4xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-4xl border border-2 border-light rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group avatar-group-dense">
  <div class="avatar avatar-5xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-5xl border border-2 border-light rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-5xl border border-2 border-light rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>

Thank you for creating with Falcon |
2021 © Themewagon

v3.2.0

customize