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

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

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