### Animated Icons

Falcon uses Lottie Web for animated icons. Lottie web render After Effects animations natively on Web, Android, and iOS, and React Native.

Lottie Documentation

##### Javascript

    <script src="vendors/lottie/lottie.min.js"></script>

##### Example

You can update colors, animation duration, and other stuff from this excellent editor.

Lottie Editor

    <div class="row align-items-center">
      <div class="col-lg-4">
        <div class="lottie mx-auto" style="width: 120px; height: 120px" data-options='{"path":"../../assets/img/animated-icons/check-primary-light.json"}'></div>
      </div>
      <div class="col-lg-4 mt-5 mt-lg-0">
        <div class="lottie mx-auto" style="width: 130px; height: 130px" data-options='{"path":"../../assets/img/animated-icons/warning-light.json"}'></div>
      </div>
      <div class="col-lg-4">
        <div class="lottie mx-auto" style="width: 220px; height: 220px" data-options='{"path":"../../assets/img/animated-icons/heart.json"}'></div>
      </div>
    </div>

##### Loading Animation Example

Get More Animations

    <div class="row align-items-center">
      <div class="col-lg-4">
        <div class="lottie mx-auto" style="width: 120px; height: 120px" data-options='{"path":"../../assets/img/animated-icons/infinite-loop.json"}'></div>
      </div>
      <div class="col-lg-4 mt-5 mt-lg-0">
        <div class="lottie mx-auto" style="width: 130px; height: 130px" data-options='{"path":"../../assets/img/animated-icons/loading-square.json"}'></div>
      </div>
      <div class="col-lg-4">
        <div class="lottie mx-auto" style="width: 220px; height: 220px" data-options='{"path":"../../assets/img/animated-icons/loading.json"}'></div>
      </div>
    </div>

##### Featured Animation Example

Get More Animations

    <div class="row align-items-center">
      <div class="col-lg-4">
        <div class="lottie mx-auto" style="width: 120px; height: 120px" data-options='{"path":"../../assets/img/animated-icons/shopping-list.json"}'></div>
      </div>
      <div class="col-lg-4 mt-5 mt-lg-0">
        <div class="lottie mx-auto" style="width: 130px; height: 130px" data-options='{"path":"../../assets/img/animated-icons/sleeping-404.json"}'></div>
      </div>
      <div class="col-lg-4">
        <div class="lottie mx-auto" style="width: 220px; height: 220px" data-options='{"path":"../../assets/img/animated-icons/star-feedback.json"}'></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