DEV Community: Fazal Shah

10 Best Free Lottie Animation Tools for Developers in 2025

Fazal Shah — Sun, 31 May 2026 05:41:50 +0000

Lottie has become the standard format for web animations. Here are the 10 best free tools for working with Lottie files — ranked by usefulness for developers.

1. IconKing — Free Lottie Preview, Editor & Converter

iconking.net | Free | No login required

IconKing is the most complete free browser-based Lottie toolkit. In one place you can:

Preview .json and .lottie animations before downloading
Edit colors and layers directly in the browser
Convert between formats: Lottie → GIF, MP4, WebM, WebP, APNG, SVG, .lottie
Browse 700+ free animations
Download instantly — no account needed

Best for: Developers who want to grab, tweak, and drop in a Lottie without leaving the browser.

2. LottieFiles — The Largest Animation Library

lottiefiles.com | Free (with paid tier)

The original Lottie community platform. Thousands of free animations, plus tools like the Lottie Editor, Figma plugin, and an After Effects plugin. Requires an account for most features.

Best for: Browsing a huge library; sharing animations with a team.

3. lottie-web — The Core JavaScript Library

github.com/airbnb/lottie-web | Free | npm

The original lottie-web library by Airbnb. Renders Lottie JSON via SVG, Canvas, or HTML. Full programmatic API: play, pause, stop, seek, speed, events.

npm install lottie-web

Best for: Maximum control and framework-agnostic usage.

4. @lottiefiles/dotlottie-web — Modern Lightweight Runtime

github.com/LottieFiles/dotlottie-web | Free | npm

The modern successor to lottie-web. Uses WebAssembly for ~100KB bundle size (vs ~500KB for lottie-web). Supports the newer compressed .lottie format. Better performance for mobile.

npm install @lottiefiles/dotlottie-web

Best for: Performance-critical projects; .lottie format users.

5. lottie-react — React Wrapper

github.com/Gamote/lottie-react | Free | npm

Clean React wrapper for lottie-web. Provides a <Lottie> component and a useLottie hook for full API access. Works with both JSON imports and URL paths.

npm install lottie-react

Best for: React and Next.js projects.

6. @lottiefiles/dotlottie-vue — Vue 3 Component

Official Vue 3 component for the dotLottie format. Tiny, tree-shakeable, and supports the full DotLottie player API.

npm install @lottiefiles/dotlottie-vue

Best for: Vue 3 and Nuxt 3 projects.

7. ng-lottie — Angular Component

Angular-native wrapper with two-way binding and full lottie-web API support. Works with Angular 14+.

npm install ng-lottie lottie-web

Best for: Angular projects.

8. Lottielab — Browser-Based Animation Editor

lottielab.com | Free tier available

A full animation editor that runs in the browser — create animations from scratch or edit existing ones. Exports to Lottie JSON and the interactive Lottielab format.

Best for: Designers who want to create or modify animations without After Effects.

9. Lordicon — Animated Icon Library

lordicon.com | Free tier

Library of 1,500+ animated icons in Lottie format. Supports interactivity modes (hover, click, morph). Free tier covers basic use.

Best for: UI icon animation — buttons, navbars, states.

10. Canva Lottie Export

Canva supports exporting animations as Lottie JSON. If you design in Canva, this is a zero-friction way to get animations into Lottie format for your web app.

Best for: Designers already working in Canva.

Quick Comparison

Tool	Type	Free	No Login
IconKing	Preview + Editor + Converter	✅	✅
LottieFiles	Library + Editor	✅ (limited)	❌
lottie-web	JS Library	✅	✅
dotlottie-web	JS Library (WASM)	✅	✅
lottie-react	React Component	✅	✅
Lottielab	Full Editor	Partial	❌

TL;DR

If you just need to grab and use a free Lottie animation right now, start at IconKing — it's the only tool that covers preview, editing, format conversion, and download in one place with zero signup friction.

For your project's runtime, use lottie-react for React/Next.js, @lottiefiles/dotlottie-vue for Vue, ng-lottie for Angular, and lottie-web directly for everything else.

Lottie Animations with Vanilla JavaScript — No Framework Needed

Fazal Shah — Sun, 31 May 2026 05:39:31 +0000

You don't need React or any framework to use Lottie. With plain JavaScript and a CDN script, you can add beautiful animations to any HTML page in minutes.

Step 1: Get a Free Lottie Animation

Go to IconKing — a free browser-based tool where you can preview, customize colors, and download Lottie animations as .json files. No account needed. Save the file as animation.json.

Step 2: Add the Script

Include lottie-web via CDN in your HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>

Step 3: Basic Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Lottie Demo</title>
</head>
<body>
  <div id="animation" style="width:200px;height:200px;"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
  <script>
    const anim = lottie.loadAnimation({
      container: document.getElementById("animation"),
      renderer: "svg",
      loop: true,
      autoplay: true,
      path: "./animation.json"
    });
  </script>
</body>
</html>

That's all — no build step, no npm, no bundler.

Play, Pause, and Speed Controls

<div id="animation" style="width:200px;height:200px;"></div>
<button onclick="anim.play()">Play</button>
<button onclick="anim.pause()">Pause</button>
<button onclick="anim.stop()">Stop</button>
<button onclick="anim.setSpeed(2)">2x Speed</button>

<script>
  const anim = lottie.loadAnimation({
    container: document.getElementById("animation"),
    renderer: "svg",
    loop: true,
    autoplay: false,
    path: "./animation.json"
  });
</script>

Play Animation on Hover

const container = document.getElementById("animation");
const anim = lottie.loadAnimation({
  container,
  renderer: "svg",
  loop: false,
  autoplay: false,
  path: "./icon.json"
});

container.addEventListener("mouseenter", () => anim.play());
container.addEventListener("mouseleave", () => anim.stop());

Play on Scroll (IntersectionObserver)

const anim = lottie.loadAnimation({
  container: document.getElementById("animation"),
  renderer: "svg",
  loop: false,
  autoplay: false,
  path: "./hero.json"
});

const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    anim.play();
    observer.disconnect();
  }
}, { threshold: 0.3 });

observer.observe(document.getElementById("animation"));

npm Alternative (With a Bundler)

If you're using Webpack, Vite, or Parcel:

npm install lottie-web

import lottie from "lottie-web";
const anim = lottie.loadAnimation({ ... });

Where to Get Free Animations

IconKing — free Lottie preview, editor, and downloader. Supports .json and .lottie formats. Edit colors directly in the browser before downloading. Zero signup required.

LottieFiles — large community library of free and premium animations.

Both are free. IconKing is faster for quick downloads since there's no login wall.

How to Use Lottie Animations in Svelte and SvelteKit

Fazal Shah — Sun, 31 May 2026 05:36:45 +0000

Svelte's onMount lifecycle hook is perfect for integrating Lottie — it guarantees DOM availability before the animation loads. Here's how to set it up.

Get a Lottie File

Download a free animation from IconKing — no login needed, just preview and download .json or .lottie files. Place it in your static/animations/ folder (SvelteKit) or public/animations/ folder.

Install lottie-web

npm install lottie-web

Basic Svelte Component

Create src/lib/LottiePlayer.svelte:

<script>
  import { onMount, onDestroy } from "svelte";
  import lottie from "lottie-web";

  export let src = "/animations/default.json";
  export let loop = true;
  export let autoplay = true;
  export let width = "200px";
  export let height = "200px";

  let container;
  let animation;

  onMount(() => {
    animation = lottie.loadAnimation({
      container,
      renderer: "svg",
      loop,
      autoplay,
      path: src,
    });
  });

  onDestroy(() => animation?.destroy());
</script>

<div bind:this={container} style="width:{width};height:{height}"></div>

Use it anywhere in your app:

<script>
  import LottiePlayer from "$lib/LottiePlayer.svelte";
</script>

<LottiePlayer src="/animations/success.json" loop={false} />

Adding Controls

Export the animation instance so parent components can control playback:

<script>
  import { onMount, onDestroy } from "svelte";
  import lottie from "lottie-web";

  export let src;
  let container;
  export let animation = null;

  onMount(() => {
    animation = lottie.loadAnimation({
      container,
      renderer: "svg",
      loop: true,
      autoplay: false,
      path: src,
    });
  });

  onDestroy(() => animation?.destroy());
</script>

<div bind:this={container} style="width:200px;height:200px"></div>

Parent component:

<script>
  import LottiePlayer from "$lib/LottiePlayer.svelte";
  let animation;
</script>

<LottiePlayer src="/animations/loading.json" bind:animation />
<button on:click={() => animation?.play()}>Play</button>
<button on:click={() => animation?.pause()}>Pause</button>

SvelteKit SSR Note

onMount only runs in the browser, so lottie-web never runs on the server. This means no window is not defined errors — no extra configuration needed.

Where to Find Free Lottie Animations

IconKing is a free tool for previewing, editing, and downloading Lottie animations. You can tweak colors directly in the browser before downloading — handy for matching your Svelte app's design system. No account required.

Using Lottie Animations in Next.js (App Router & Pages Router)

Fazal Shah — Sun, 31 May 2026 05:33:45 +0000

Adding Lottie to Next.js has one key gotcha: lottie-web and lottie-react are client-only libraries that access the DOM, so you need to handle SSR carefully. Here's how.

Step 1: Get Your Animation File

Download a free .json Lottie file from IconKing — preview and download with no signup. Save it to public/animations/ in your Next.js project so it's served as a static asset.

Step 2: Install lottie-react

npm install lottie-react

Step 3: Create a Client Component (App Router)

In Next.js App Router, any component using browser APIs must be a Client Component. Create components/LottieAnimation.tsx:

"use client";

import Lottie from "lottie-react";
import successAnim from "@/public/animations/success.json";

export default function LottieAnimation() {
  return (
    <Lottie
      animationData={successAnim}
      loop={true}
      style={{ width: 200, height: 200 }}
    />
  );
}

Then use it in any Server Component or page:

import LottieAnimation from "@/components/LottieAnimation";

export default function HomePage() {
  return (
    <main>
      <h1>Welcome</h1>
      <LottieAnimation />
    </main>
  );
}

Alternative: Dynamic Import (Zero SSR Bundle)

If you want to keep the animation completely out of the server bundle, use next/dynamic with ssr: false:

import dynamic from "next/dynamic";

const LottieAnimation = dynamic(
  () => import("@/components/LottieAnimation"),
  { ssr: false, loading: () => <div style={{ width: 200, height: 200 }} /> }
);

export default function HomePage() {
  return <LottieAnimation />;
}

This is the cleanest approach — the Lottie runtime only loads in the browser, keeping your server response fast.

Loading from a URL (Instead of Importing JSON)

For large files or dynamic animations fetched from an API, pass a URL via the path prop using lottie-web directly:

"use client";

import { useEffect, useRef } from "react";
import lottie from "lottie-web";

export default function RemoteLottie({ src }: { src: string }) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!ref.current) return;
    const anim = lottie.loadAnimation({
      container: ref.current,
      renderer: "svg",
      loop: true,
      autoplay: true,
      path: src,
    });
    return () => anim.destroy();
  }, [src]);

  return <div ref={ref} style={{ width: 200, height: 200 }} />;
}

Pages Router

If you're on the Pages Router, the "use client" directive is not needed — just use dynamic import with ssr: false and you're set.

Finding Free Animations

IconKing lets you preview, edit colors, and download free Lottie animations in both .json and .lottie formats — no account needed. It's the fastest way to go from "I need a loading spinner" to a production-ready asset.

How to Add Lottie Animations to Angular (2025 Guide)

Fazal Shah — Sun, 31 May 2026 05:29:04 +0000

Lottie animations are a great fit for Angular — smooth, scalable, and tiny compared to GIFs. This guide covers the two main approaches for Angular 17+.

Getting a Lottie File

First, grab a free .json or .lottie animation. IconKing is a free browser-based tool — preview, edit colors, and download animations with no account required. LottieFiles is also a good source for community animations.

Save the downloaded JSON to your src/assets/animations/ folder.

Option 1: ng-lottie (Recommended)

ng-lottie is an Angular-native wrapper that works well with the Angular component model.

npm install ng-lottie lottie-web

In your app.module.ts (or standalone component), import the module:

import { LottieModule } from "ng-lottie";
import { AnimationOptions } from "ngx-lottie";

@NgModule({
  imports: [
    LottieModule
  ]
})
export class AppModule {}

Then in your component:

import { Component } from "@angular/core";
import { AnimationOptions } from "ngx-lottie";

@Component({
  selector: "app-animation",
  template: `
    <ng-lottie
      [options]="options"
      width="200px"
      height="200px"
    ></ng-lottie>
  `
})
export class AnimationComponent {
  options: AnimationOptions = {
    path: "/assets/animations/success.json",
    loop: true,
    autoplay: true
  };
}

Option 2: lottie-web Directly

For full control without a wrapper, use lottie-web with AfterViewInit:

import { Component, ElementRef, AfterViewInit, ViewChild } from "@angular/core";
import lottie from "lottie-web";

@Component({
  selector: "app-lottie-raw",
  template: `<div #container style="width:200px;height:200px"></div>`
})
export class LottieRawComponent implements AfterViewInit {
  @ViewChild("container") container!: ElementRef;

  ngAfterViewInit() {
    lottie.loadAnimation({
      container: this.container.nativeElement,
      renderer: "svg",
      loop: true,
      autoplay: true,
      path: "/assets/animations/loader.json"
    });
  }
}

Lazy Loading Animations

For large animation files, load them only when the component enters the viewport using IntersectionObserver:

ngAfterViewInit() {
  const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      lottie.loadAnimation({
        container: this.container.nativeElement,
        renderer: "svg",
        loop: true,
        autoplay: true,
        path: "/assets/animations/hero.json"
      });
      observer.disconnect();
    }
  });
  observer.observe(this.container.nativeElement);
}

Performance Tips

Keep JSON files under 100KB (compress in the editor at iconking.net before downloading). Use renderer: "svg" for best quality. Destroy animations on component destroy to prevent memory leaks: call anim.destroy() in ngOnDestroy().

Conclusion

For most Angular projects, ng-lottie is the cleanest approach. Use lottie-web directly when you need full API control. Either way, start by previewing and downloading your animation from IconKing or LottieFiles — pick something lightweight and your users will barely notice the extra asset.

CSS Animation vs Lottie: Which Should You Use in 2025?

Fazal Shah — Sun, 31 May 2026 04:48:40 +0000

When adding motion to a web UI, two tools dominate: CSS animations and Lottie. Both are capable, but they serve different use cases.

What Is a CSS Animation?

CSS animations use keyframes in your stylesheet to transition between property values. No libraries, no extra assets — just the browser.

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.loader { animation: spin 1s linear infinite; }

CSS animations are perfect for simple transitions, loading spinners, hover effects, and anything expressible in CSS properties.

What Is a Lottie Animation?

Lottie is a JSON-based animation format exported from Adobe After Effects. It renders complex motion paths, morphing shapes, and multi-layer compositions — things CSS cannot do.

lottie.loadAnimation({
  container: document.getElementById("anim"),
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "/animations/success.json"
});

When to Use CSS Animations

CSS is the right choice when the animation is simple (fade, slide, scale, rotate), when you want zero JavaScript, when performance is critical (CSS animations run on the compositor thread), or when you need :hover/:focus triggers.

Best for: loading spinners, button hovers, skeleton screens, progress bars, page transitions.

When to Use Lottie

Lottie wins when the animation was designed in After Effects, involves complex paths or masks, requires pixel-perfect fidelity to a brand asset, or needs programmatic control (play, pause, scrub, speed).

Best for: onboarding illustrations, empty states, success/error confirms, animated logos, hero animations.

Quick Comparison

Feature	CSS Animation	Lottie
Extra file size	0 KB	10–200 KB JSON
JS required	No	~100 KB runtime
Designer handoff	CSS code	.json / .lottie file
Complexity	Simple transforms	Full After Effects motion
Programmatic control	Via classList	Full API

Free Tools for Lottie

If you go the Lottie route, you need a .json file. IconKing is a free browser-based Lottie preview, editor, and format converter — no sign-up needed. Use it to test animations before dropping them into your project.

The Verdict

Use CSS for simple, stateless UI polish. Use Lottie when a designer hands you a file or when the animation is complex enough that CSS would take hundreds of lines to approximate.

Most production apps use both: CSS for micro-interactions, Lottie for hero and empty-state moments. Pick the right tool per job.

How to Add Lottie Animations to Vue.js (2025 Guide)

Fazal Shah — Sun, 31 May 2026 04:47:02 +0000

Lottie animations are the best way to add crisp, lightweight animations to your Vue app. This guide covers the two main approaches in Vue 3.

Option 1: @lottiefiles/dotlottie-vue (Recommended)

The DotLottie package is the modern approach — smaller runtime (~100KB vs ~500KB), supports the newer compressed .lottie format, and has a clean Vue 3 API.

npm install @lottiefiles/dotlottie-vue

<template>
  <DotLottieVue
    src="/animations/loader.lottie"
    :loop="true"
    :autoplay="true"
    style="width: 200px; height: 200px"
  />
</template>

<script setup>
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
</script>

For JSON files (not .lottie), use the same src prop pointing to your .json file.

Controlling Playback Programmatically

<template>
  <DotLottieVue
    ref="lottieRef"
    src="/animations/check.lottie"
    :loop="false"
    :autoplay="false"
  />
  <button @click="play">Play</button>
  <button @click="pause">Pause</button>
</template>

<script setup>
import { ref } from 'vue'
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'

const lottieRef = ref(null)

function play() {
  lottieRef.value?.play()
}
function pause() {
  lottieRef.value?.pause()
}
</script>

Option 2: lottie-web (Full Control)

For more granular control over frames, segments, and events:

npm install lottie-web

<template>
  <div ref="container" style="width: 200px; height: 200px" />
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import lottie from 'lottie-web'

const container = ref(null)
let anim = null

onMounted(() => {
  anim = lottie.loadAnimation({
    container: container.value,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: '/animations/loader.json',
  })
})

onBeforeUnmount(() => {
  anim?.destroy()
})
</script>

Always destroy the animation in onBeforeUnmount to prevent memory leaks.

Trigger Animation on User Interaction

A common pattern: play a success animation when a form submits.

<template>
  <div ref="container" style="width: 100px; height: 100px" />
  <button @click="handleSubmit">Submit</button>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import lottie from 'lottie-web'
import successData from '@/assets/success.json'

const container = ref(null)
let anim = null

onMounted(() => {
  anim = lottie.loadAnimation({
    container: container.value,
    renderer: 'svg',
    loop: false,
    autoplay: false,
    animationData: successData,
  })
})

function handleSubmit() {
  anim?.goToAndPlay(0)
}

onBeforeUnmount(() => anim?.destroy())
</script>

Global Registration (Nuxt / Large Apps)

// plugins/lottie.js
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('DotLottie', DotLottieVue)
})

Then use <DotLottie /> anywhere without importing.

Performance Tips for Vue

Lazy-load animation JSON outside your main bundle. Use dynamic imports or fetch in onMounted.
Use .lottie format instead of JSON — ~80% smaller file size, loads faster.
Add v-if to mount/unmount the animation based on visibility, rather than hiding with CSS.
Set explicit dimensions on the container div — avoids layout shifts during load.

Free Lottie Animations for Your Vue App

You need a Lottie file to get started. Here are the best free sources:

500+ free animated icons: iconking.net/all-assets?type=lottie&price=free — UI icons, loaders, social icons, illustrations
Preview before using: iconking.net/preview — drag-and-drop preview, no signup
Customize colors/speed: iconking.net/editor — adapt any Lottie to your brand in-browser
LottieFiles community: lottiefiles.com — large community library

Converting Lottie for Non-App Contexts

Need the same animation as a GIF for email, or MP4 for social? The free converter at iconking.net/tools/lottie-to-gif exports to GIF, MP4, WebM, SVG, WebP, APNG, or .lottie — all in the browser.

The Best Free Lottie Animation Resources for Developers in 2025

Fazal Shah — Sun, 31 May 2026 04:30:41 +0000

Lottie has become the standard for animations in modern web and mobile apps. Here's a curated list of the best free resources — libraries, tools, and communities — for developers working with Lottie in 2025.

Free Lottie Animation Libraries

1. IconKing — 500+ Free Animated Icons

URL: iconking.net/all-assets?type=lottie&price=free

500+ free Lottie animations covering:

UI icons (arrows, checkmarks, loaders, toggles)
Social media icons (animated)
Business and finance illustrations
Food, travel, and lifestyle icons
Country flags (animated)

All free to download. No account required for most assets. Each animation comes as both Lottie JSON and the newer .lottie format.

What's unique: IconKing also has static SVG versions of many of the same icons — so you can use the static SVG as a fallback while the Lottie plays.

2. LottieFiles Community

URL: lottiefiles.com

The largest community-driven Lottie library. Thousands of animations — some free, many premium. The free tier is still extensive. Strong on character animations, loading indicators, and UI micro-interactions.

3. Icons8 Animated Icons

URL: icons8.com/animated-icons

Consistent style, high-quality animated icons. The free tier includes many useful sets. Good for product UI work.

Free Lottie Tools

Preview: IconKing Lottie Preview

URL: iconking.net/preview

Drag-and-drop any Lottie JSON or .lottie file to preview it instantly in the browser. No upload, no account. Shows the animation playing and lets you toggle loop/speed.

Use case: Before adding an animation to your codebase, use this to verify it looks correct and check frame counts.

Edit Colors and Speed: IconKing Editor

URL: iconking.net/editor

Free browser-based editor for Lottie files. Lets you:

Swap colors to match your brand
Adjust playback speed
Retime keyframes
Preview the result in real-time

No After Effects needed. This is the quickest way to adapt a Lottie file without touching the source animation.

Convert to Other Formats: Lottie to GIF/MP4

URL: iconking.net/tools/lottie-to-gif

Export Lottie animations to: GIF, MP4, WebM, SVG, WebP, APNG, or .lottie format.

Useful when you need to use a Lottie animation in an environment that doesn't support the Lottie runtime — like email, Slack, presentations, or social media.

LottieFiles Editor (Web)

URL: lottiefiles.com/editor

LottieFiles' own web editor. More full-featured than IconKing's but requires an account. Good for teams that need version control and sharing.

Lottie Runtime Libraries

lottie-web

URL: github.com/airbnb/lottie-web
Size: ~500KB minified

The original Lottie runtime for web. Maintained by Airbnb. Supports SVG, Canvas, and HTML renderers.

npm install lottie-web

@lottiefiles/dotlottie-web

URL: github.com/LottieFiles/dotlottie-web
Size: ~100KB

The newer, lighter runtime. Uses WebAssembly for rendering. Optimized for the .lottie format. Significantly smaller than lottie-web.

npm install @lottiefiles/dotlottie-web

Framework-specific packages

Framework	Package
React	`@lottiefiles/dotlottie-react` or `lottie-react`
Vue	`@lottiefiles/dotlottie-vue` or `vue-lottie`
Svelte	`@lottiefiles/dotlottie-svelte`
Angular	`ngx-lottie`

Quick Performance Checklist

Before shipping a Lottie animation in production:

[ ] Verify file size — aim for under 50KB for icon-level animations
[ ] Preview at target size — animations that look fine at 200px may look different at 40px
[ ] Test loop behavior — check the loop start/end frames are clean
[ ] Consider the .lottie format — ~80% smaller than JSON for the same animation
[ ] Lazy load — don't bundle animation JSON with your main JS bundle
[ ] Destroy on unmount — call anim.destroy() in cleanup functions to prevent memory leaks

Lottie vs Other Animation Formats

Format	File Size	Quality	Interactivity	Email/Slack
Lottie JSON	Small	Vector	Yes	No
.lottie	Very small	Vector	Yes	No
GIF	Large	Bitmap	No	Yes
MP4	Medium	Bitmap	No	No
SVG+CSS	Tiny	Vector	Limited	No

Bottom line: Use Lottie for anything in your app. Use GIF when you need universal compatibility (email, chat platforms).

Convert between formats easily with the free tools at iconking.net.

How to Use Lottie Animations in React (Complete Guide)

Fazal Shah — Sun, 31 May 2026 04:28:36 +0000

Lottie animations are lightweight JSON files that render as crisp vector animations at any resolution. In this guide, I'll show you the fastest way to get them running in React.

What You Need

A Lottie JSON file. If you don't have one, grab a free one from IconKing's free Lottie library — 500+ free animated icons, no signup.

Method 1: @lottiefiles/dotlottie-react (Recommended)

This is the modern approach. DotLottie is the newer .lottie format — it's a zipped version of Lottie JSON with ~80% smaller file sizes.

npm install @lottiefiles/dotlottie-react

import { DotLottieReact } from '@lottiefiles/dotlottie-react';

export default function App() {
  return (
    <DotLottieReact
      src="/animations/loader.lottie"
      loop
      autoplay
    />
  );
}

For plain JSON files, use the src prop with a .json path instead.

Method 2: lottie-web (Classic)

If you need more control or are working with older JSON files:

npm install lottie-web

import { useEffect, useRef } from 'react';
import lottie from 'lottie-web';
import animationData from './animation.json';

export default function LottieAnimation() {
  const container = useRef(null);

  useEffect(() => {
    const anim = lottie.loadAnimation({
      container: container.current,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData,
    });
    return () => anim.destroy();
  }, []);

  return <div ref={container} style={{ width: 200, height: 200 }} />;
}

Controlling Playback

With lottie-web, you have full control:

const anim = lottie.loadAnimation({ ... });

// Play
anim.play();

// Pause
anim.pause();

// Set speed (1 = normal, 2 = 2x)
anim.setSpeed(1.5);

// Go to specific frame
anim.goToAndStop(30, true); // frame 30

// Play a segment (frames 0–60)
anim.playSegments([0, 60], true);

Lazy Loading Animations

For performance, lazy load animation JSON files instead of bundling them:

import { useEffect, useRef, useState } from 'react';
import lottie from 'lottie-web';

export default function LazyLottie({ src }) {
  const container = useRef(null);

  useEffect(() => {
    let anim;
    fetch(src)
      .then(res => res.json())
      .then(data => {
        anim = lottie.loadAnimation({
          container: container.current,
          renderer: 'svg',
          loop: true,
          autoplay: true,
          animationData: data,
        });
      });
    return () => anim?.destroy();
  }, [src]);

  return <div ref={container} />;
}

Converting Lottie to Other Formats

Need to export to GIF, MP4, or WebP for use outside your app? The free Lottie to GIF converter at IconKing handles all conversions in the browser — no upload needed.

Supported exports: GIF, MP4, WebM, SVG, WebP, APNG, .lottie

Editing Lottie Colors and Speed

Before using an animation in your app, you might want to adjust colors to match your brand or tweak the playback speed. The free IconKing Lottie editor lets you do this in-browser without touching After Effects.

Performance Tips

Use SVG renderer for most UI animations — it's the sharpest and most flexible.
Use canvas renderer for complex animations with many layers or particle effects.
Destroy animations when components unmount to avoid memory leaks (the useEffect cleanup above handles this).
Prefer .lottie format over JSON when possible — the compressed format loads significantly faster.

File Size Reference

Animation type	Typical JSON size	Typical .lottie size
Simple icon (2–3 layers)	15–40KB	5–15KB
UI loader	20–60KB	8–20KB
Complex illustration	80–300KB	25–80KB

Free Resources

500+ free Lottie animations: iconking.net/all-assets?type=lottie&price=free
Preview your Lottie files: iconking.net/preview
Edit colors and speed: iconking.net/editor
Convert to GIF/MP4/etc: iconking.net/tools/lottie-to-gif
LottieFiles community animations: lottiefiles.com

Animated Icons for Web Apps — The Complete 2025 Guide

Fazal Shah — Sun, 31 May 2026 03:33:52 +0000

Static icons are fine. Animated icons are better — they communicate state changes, guide attention, and make interfaces feel alive. Here's how to do it right.

Why Animated Icons?

Animation isn't decoration. When used correctly, it serves functional purposes:

State feedback. A checkbox that bounces when checked, a download icon that fills up, a delete icon that shakes on hover — each communicates state visually before the user reads any text.
Attention guidance. A pulsing notification dot draws the eye more reliably than a static badge.
Onboarding. Animated empty states or loading indicators reduce perceived wait time.

The rule: animate when the animation communicates something. Skip it when it's purely cosmetic.

Format Options

Lottie (Best for Most Use Cases)

Lottie JSON is vector-based, tiny (10-80KB for icon animations), and fully scriptable. You can pause, play, seek to any frame, and respond to user events. Works on web, iOS, and Android.

Use Lottie when:

The animation has multiple layers or timing
You need interactive control (hover, click to trigger)
File size matters (it always does)
You want the same animation on mobile and web

Get 500+ free Lottie icons: iconking.net/all-assets?type=lottie&price=free

CSS/SVG Animation

For simple interactions — a hamburger menu that becomes an X, a checkmark that draws itself, an icon that spins on load — CSS animation on an inline SVG is often the lightest approach. No library required.

Use CSS animation when:

The animation is simple (2-3 elements, single transition)
You want zero JavaScript overhead
The animation responds to CSS class changes (which React/Vue make easy)

GIF

Only use GIF when you have no control over the rendering environment: email, Slack, Notion, presentations.

GIF problems: huge file sizes, 256-color limit, no transparency anti-aliasing, no playback control.

If you need a GIF from a Lottie file, use the free Lottie-to-GIF converter.

Implementing Lottie Icons

Web (vanilla JS):

<script src="https://unpkg.com/@lottiefiles/dotlottie-web/dist/dotlottie-player.js"></script>
<dotlottie-player src="/icons/checkmark.json" autoplay style="width:32px;height:32px"></dotlottie-player>

React:

import { DotLottieReact } from '@lottiefiles/dotlottie-react';

function AnimatedIcon({ src, size = 32 }) {
  return (
    <DotLottieReact
      src={src}
      autoplay
      style={{ width: size, height: size }}
    />
  );
}

Trigger on interaction:

function HoverIcon({ src }) {
  const [dotLottie, setDotLottie] = useState(null);
  return (
    <span
      onMouseEnter={() => dotLottie?.play()}
      onMouseLeave={() => dotLottie?.stop()}
    >
      <DotLottieReact src={src} dotLottieRefCallback={setDotLottie} loop={false} style={{ width: 24, height: 24 }} />
    </span>
  );
}

The Tooling Workflow

Preview before integrating. Always check an animation at the actual size you'll use. Something that looks great at 200px can look choppy at 24px. Use iconking.net/preview — drag and drop any .json or .lottie file, check it in the browser.

Edit colors and speed. Brand colors matter. The IconKing editor lets you swap any color in a Lottie animation and adjust speed without touching JSON manually.

Export for other contexts. Need the same icon as a GIF for a newsletter? As MP4 for a tutorial video? Use the converters at iconking.net:

Common Mistakes

Overusing animation. Every animated element competes for attention. Pick the 2-3 interactions that matter most, animate those, leave the rest static.

Ignoring reduced motion. Always respect prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  dotlottie-player { display: none; }
  .static-fallback { display: block; }
}

Not testing on mobile. Lottie animations that look great on desktop can feel heavy on low-end mobile. Test at realistic network conditions.

The free Lottie icon library at iconking.net covers the most common UI animation patterns — checkmarks, loaders, toggles, arrows, social icons — with both free download and browser-based editing tools.

How to Use Lottie Animations in React (2025 Guide)

Fazal Shah — Sun, 31 May 2026 03:32:32 +0000

Lottie animations in React are straightforward once you know the two main libraries. Here's the complete setup — from installing the package to controlling playback with hooks.

Option 1: @lottiefiles/dotlottie-react (Recommended)

This is the modern approach. Supports both .json and .lottie files.

npm install @lottiefiles/dotlottie-react

Basic usage:

import { DotLottieReact } from '@lottiefiles/dotlottie-react';

export default function App() {
  return (
    <DotLottieReact
      src="/animation.json"
      loop
      autoplay
      style={{ width: 300, height: 300 }}
    />
  );
}

The src can point to a local file in your public/ folder or a remote URL.

Option 2: lottie-web + react-lottie

The older approach. Still widely used.

npm install react-lottie

import Lottie from 'react-lottie';
import animationData from './animation.json';

export default function App() {
  const options = {
    loop: true,
    autoplay: true,
    animationData,
  };
  return <Lottie options={options} height={300} width={300} />;
}

Controlling Playback

With dotlottie-react, use the dotLottie ref:

import { DotLottieReact } from '@lottiefiles/dotlottie-react';
import { useState } from 'react';

export default function ControlledAnimation() {
  const [dotLottie, setDotLottie] = useState(null);
  return (
    <div>
      <DotLottieReact
        src="/animation.json"
        dotLottieRefCallback={setDotLottie}
        style={{ width: 200, height: 200 }}
      />
      <button onClick={() => dotLottie?.play()}>Play</button>
      <button onClick={() => dotLottie?.pause()}>Pause</button>
      <button onClick={() => dotLottie?.stop()}>Stop</button>
    </div>
  );
}

Trigger on Hover

export default function HoverAnimation() {
  const [dotLottie, setDotLottie] = useState(null);
  return (
    <div
      onMouseEnter={() => dotLottie?.play()}
      onMouseLeave={() => dotLottie?.stop()}
    >
      <DotLottieReact
        src="/animation.json"
        dotLottieRefCallback={setDotLottie}
        loop={false}
        style={{ width: 100, height: 100 }}
      />
    </div>
  );
}

Where to Get Free Lottie JSON Files

IconKing has 500+ free Lottie animations — UI icons, loaders, social media, flags, illustrations. No signup required.

Use the Lottie preview tool to check timing before integrating. The editor lets you change colors and speed in-browser.

Converting to Other Formats

When you need the same animation in GIF (for email), MP4, or WebM:

All free at iconking.net.

Performance Tips

SVG renderer for small animations. For icons and UI elements, SVG is crisper than canvas at small sizes.

Bundle size. @lottiefiles/dotlottie-react is ~100KB. lottie-web is ~500KB. For production, dotLottie is the better choice.

Browse free animations at iconking.net/all-assets, preview at iconking.net/preview, drop the JSON in your public/ folder — done in under 5 minutes.

Lottie JSON vs .lottie Format — What's the Difference and Which Should You Use?

Fazal Shah — Sun, 31 May 2026 03:22:30 +0000

Two file formats. Same animations. Very different performance characteristics.

If you've used Lottie before, you know the .json file — you export it from After Effects with the Bodymovin plugin, drop it into lottie-web, done. But there's a newer format: .lottie. It's a binary container that replaces the JSON, and if you're starting a new project, it's worth understanding the difference.

What is Lottie JSON?

The original format. A .json file that describes vector animations: shapes, keyframes, layers, colors, timing. It's plain text, human-readable, and widely supported.

Pros:

Works everywhere Lottie is supported
Human-readable (you can inspect and edit it)
Supported by every tool and library

Cons:

Large files (uncompressed JSON with lots of repeated data)
No built-in support for multiple animations in one file
No metadata or preview image support

What is .lottie?

The .lottie format (sometimes called dotLottie) is a ZIP container with a .lottie extension. Inside it contains:

The animation data (compressed JSON)
A manifest.json describing the file
Optional preview images
Optional multiple animations in one container

It was developed by LottieFiles and adopted as the preferred format for modern Lottie tooling.

Pros:

~30-70% smaller than equivalent JSON (thanks to compression)
Can contain multiple animations in one file
Supports preview thumbnails
Cleaner API in the @lottiefiles/dotlottie-web renderer

Cons:

Binary format — not human-readable
Requires the dotLottie player (not the older lottie-web)
Slightly less universal support

File Size Comparison

For a typical 2-second UI animation:

Format	Typical Size
Lottie JSON (.json)	40 – 120 KB
dotLottie (.lottie)	15 – 50 KB

The size reduction comes from standard ZIP compression applied to the JSON content. It's meaningful on mobile connections.

Converting Between Formats

The easiest way to convert between .json and .lottie formats is using the free browser-based tools at IconKing.

No signup required, no file size limits. Just drag and drop.

Other format conversions available free at iconking.net:

Lottie to GIF — for email and Slack
Lottie to MP4 — for video players
Lottie to WebM — for web with alpha transparency
Lottie to SVG — static snapshot
Lottie to WebP — animated WebP
Lottie to APNG — animated PNG

Should You Migrate Existing Projects?

New project: Start with .lottie format and the dotLottie player. It's better in every dimension except universal support.

Existing project using lottie-web: Migrate only if file size is a concern. lottie-web + JSON works fine and will continue to be supported.

Email or Slack: Use GIF. Neither format works in these environments.

Getting Free Animations in Both Formats

IconKing's free Lottie library has 500+ animations available as .json — and the converter produces .lottie from any of them in one click.

Use the preview tool to check an animation before converting — it works with both .json and .lottie files.

The editor lets you change colors and timing before export.

Quick Reference

	Lottie JSON	dotLottie (.lottie)
File size	Larger	~50% smaller
Human readable	Yes	No
Multiple animations	No	Yes
Player needed	lottie-web	@lottiefiles/dotlottie-web

Both formats are free and open. The .lottie format is the future — but JSON still works everywhere today.