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-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-s border border-2 border-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-s border border-2 border-200 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-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-m border border-2 border-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-m border border-2 border-200 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-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-l border border-2 border-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-l border border-2 border-200 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-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-xl border border-2 border-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-xl border border-2 border-200 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-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-2xl border border-2 border-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-2xl border border-2 border-200 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-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-3xl border border-2 border-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-3xl border border-2 border-200 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-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-4xl border border-2 border-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-4xl border border-2 border-200 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-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-5xl border border-2 border-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-5xl border border-2 border-200 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-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-s border border-2 border-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-s border border-2 border-200 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-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-m border border-2 border-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-m border border-2 border-200 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-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-l border border-2 border-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-l border border-2 border-200 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-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-xl border border-2 border-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-xl border border-2 border-200 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-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-2xl border border-2 border-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-2xl border border-2 border-200 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-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-3xl border border-2 border-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-3xl border border-2 border-200 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-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-4xl border border-2 border-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-4xl border border-2 border-200 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-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-5xl border border-2 border-200 rounded-circle">
    <img class="rounded-circle" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-5xl border border-2 border-200 rounded-circle">
    <div class="avatar-name rounded-circle "><span>+50</span></div>
  </div>
</div>

Thank you for creating with Falcon |
2024 © Themewagon

v3.22.0

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.

RTL Mode

Switch your language direction

RTL Documentation
Fluid Layout

Toggle container layout system

Fluid Documentation
Navigation Position

Select a suitable navigation system for your web application

Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize