Avatar

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

Circular
<div class="avatar avatar-4xl">
  <img class="rounded-full" 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-full "><span>12+</span></div>
</div>
Name
EW
<div class="avatar avatar-4xl">
  <div class="avatar-name rounded-full"><span>EW</span></div>
</div>
Emoji
🎁
<div class="avatar avatar-4xl">
  <div class="avatar-emoji rounded-full "><span role="img" aria-label="Emoji">🎁</span></div>
</div>
Status
<div class="row items-center">
  <div class="col-auto">
    <div class="avatar avatar-4xl avatar-status-online">
      <img class="rounded-full" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-4xl avatar-status-offline">
      <img class="rounded-full" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-4xl avatar-status-away">
      <img class="rounded-full" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto">
    <div class="avatar avatar-4xl avatar-status-busy">
      <img class="rounded-full" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
</div>
Sizes
<div class="row items-center">
  <div class="col-auto leading-0">
    <div class="avatar avatar-5xl">
      <img class="rounded-full" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto leading-0">
    <div class="avatar avatar-4xl">
      <img class="rounded-full" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto leading-0">
    <div class="avatar avatar-3xl">
      <img class="rounded-full" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto leading-0">
    <div class="avatar avatar-2xl">
      <img class="rounded-full" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto leading-0">
    <div class="avatar avatar-xl">
      <img class="rounded-full" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto leading-0">
    <div class="avatar avatar-l">
      <img class="rounded-full" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto leading-0">
    <div class="avatar avatar-m">
      <img class="rounded-full" src="../../../assets/img/team/1.jpg" alt="" />
    </div>
  </div>
  <div class="col-auto leading-0">
    <div class="avatar avatar-s">
      <img class="rounded-full" 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-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-s border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-s border-2 border-subtle rounded-full">
    <div class="avatar-name rounded-full "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group">
  <div class="avatar avatar-m border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-m border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-m border-2 border-subtle rounded-full">
    <div class="avatar-name rounded-full "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group">
  <div class="avatar avatar-l border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-l border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-l border-2 border-subtle rounded-full">
    <div class="avatar-name rounded-full "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group">
  <div class="avatar avatar-xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-xl border-2 border-subtle rounded-full">
    <div class="avatar-name rounded-full "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group">
  <div class="avatar avatar-2xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-2xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-2xl border-2 border-subtle rounded-full">
    <div class="avatar-name rounded-full "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group">
  <div class="avatar avatar-3xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-3xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-3xl border-2 border-subtle rounded-full">
    <div class="avatar-name rounded-full "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group">
  <div class="avatar avatar-4xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-4xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-4xl border-2 border-subtle rounded-full">
    <div class="avatar-name rounded-full "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group">
  <div class="avatar avatar-5xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-5xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-5xl border-2 border-subtle rounded-full">
    <div class="avatar-name rounded-full "><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-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-s border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-s border-2 border-subtle rounded-full">
    <div class="avatar-name rounded-full "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group avatar-group-dense">
  <div class="avatar avatar-m border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-m border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-m border-2 border-subtle rounded-full">
    <div class="avatar-name rounded-full "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group avatar-group-dense">
  <div class="avatar avatar-l border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-l border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-l border-2 border-subtle rounded-full">
    <div class="avatar-name rounded-full "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group avatar-group-dense">
  <div class="avatar avatar-xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-xl border-2 border-subtle rounded-full">
    <div class="avatar-name rounded-full "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group avatar-group-dense">
  <div class="avatar avatar-2xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-2xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-2xl border-2 border-subtle rounded-full">
    <div class="avatar-name rounded-full "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group avatar-group-dense">
  <div class="avatar avatar-3xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-3xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-3xl border-2 border-subtle rounded-full">
    <div class="avatar-name rounded-full "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group avatar-group-dense">
  <div class="avatar avatar-4xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-4xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-4xl border-2 border-subtle rounded-full">
    <div class="avatar-name rounded-full "><span>+50</span></div>
  </div>
</div>
<div class="avatar-group avatar-group-dense">
  <div class="avatar avatar-5xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/1-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-5xl border-2 border-subtle rounded-full">
    <img class="rounded-full" src="../../../assets/img/team/2-thumb.png" alt="" />
  </div>
  <div class="avatar avatar-5xl border-2 border-subtle rounded-full">
    <div class="avatar-name rounded-full "><span>+50</span></div>
  </div>
</div>

Thank you for creating with Falcon tailwind
2026 © ThemeWagon

v1.0.0-alpha

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 tailwind now and create beautiful dashboards with hundreds of widgets.

Purchase
customize