300 icons · Lottie JSON · MIT licensed

Free Lottie icons

Every useAnimations icon is a standard Lottie JSON animation, so any Lottie player can play it: lottie-web on the web, lottie-ios, lottie-android, Flutter and React Native. The files are free under the MIT license, with no sign-up, and served from stable URLs with CORS enabled, so you can load them directly or download them into your project.

Files and URLs

Each icon has a page at /icons/<id> with a preview and downloads. The files themselves:

https://useanimations.com/icons/<id>.json          # Lottie JSON animation
https://useanimations.com/icons/<id>.zip           # the JSON and static SVGs
https://useanimations.com/icons/<id>/<state>.svg   # static SVG of each state
https://useanimations.com/icons.json               # catalog of every icon

icons.json lists every icon with its id, title, category, keywords, interaction, size, duration and file URLs, which makes it easy to pick icons by keyword in a script or let a coding agent choose one. Lottie files weigh 2 kB at the median.

Web: lottie-web

The reference player from Airbnb. Load it from a CDN, point it at an icon URL and choose the SVG renderer, which keeps the icon sharp and lets CSS recolor it. Use the full build (lottie.min.js): the light build skips expressions.

<div id="icon" style="width: 48px; height: 48px"></div>

<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie.min.js"></script>
<script>
  lottie.loadAnimation({
    container: document.getElementById('icon'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'https://useanimations.com/icons/loading.json',
  });
</script>

Follow the text color (SVG renderer)

#icon path[stroke^='rgb']:not([stroke='rgb(255,255,255)']) { stroke: currentColor; }
#icon path[fill='rgb(0,0,0)'] { fill: currentColor; }

Web: hover and click interactions

lottie-web plays and stops, but the interactions are up to you. This is the menu icon's click toggle with reduced-motion support; every interaction follows the same pattern, and the React component below does all of it for you.

import lottie from 'lottie-web'; // npm install lottie-web

const el = document.querySelector('#menu-button');
const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/menu.json' });
const motion = matchMedia('(prefers-reduced-motion: reduce)');
let isOn = true; // Frame 0 is on; the final frame is off.
el.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });

Web: dotLottie web component

LottieFiles' player renders with a WebAssembly engine to a canvas and plays plain Lottie JSON as well as .lottie files. A canvas keeps the colors of the file, so the icons stay black unless you recolor the JSON.

<script type="module" src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-wc@0.10.0/dist/dotlottie-wc.js"></script>

<dotlottie-wc src="https://useanimations.com/icons/loading.json" autoplay loop style="width: 48px; height: 48px"></dotlottie-wc>

Or the JavaScript API: npm install @lottiefiles/dotlottie-web

import { DotLottie } from '@lottiefiles/dotlottie-web';

new DotLottie({
  canvas: document.querySelector('#icon-canvas'),
  src: 'https://useanimations.com/icons/loading.json',
  autoplay: true,
  loop: true,
});

React: react-useanimations

No Lottie player to install: the package has its own 8 kB player, plays each icon’s interaction, follows the text color and respects reduced motion. Each icon is a separate module, so you only ship the ones you import.

// npm install react-useanimations
import UseAnimations from 'react-useanimations';
import loading from 'react-useanimations/lib/loading';

<UseAnimations animation={loading} size={48} />

React Native: lottie-react-native

Bundle the JSON with require() for offline use, or load it from its URL.

// npm install lottie-react-native
import LottieView from 'lottie-react-native';

<LottieView
  source={{ uri: 'https://useanimations.com/icons/loading.json' }} // or require('./loading.json')
  autoPlay
  loop
  style={{ width: 48, height: 48 }}
/>

iOS: lottie-ios (SwiftUI)

Add the package from https://github.com/airbnb/lottie-spm.git with Swift Package Manager, then drop the JSON into your bundle or load it from its URL.

import Lottie
import SwiftUI

struct LoadingIcon: View {
  var body: some View {
    // Bundled file: LottieView(animation: .named("loading"))
    LottieView {
      await LottieAnimation.loadedFrom(url: URL(string: "https://useanimations.com/icons/loading.json")!)
    }
    .looping()
    .frame(width: 48, height: 48)
  }
}

Android: lottie-android (Jetpack Compose)

Add com.airbnb.android:lottie-compose (or com.airbnb.android:lottie for views). Put the JSON in res/raw for offline use with LottieCompositionSpec.RawRes.

// build.gradle.kts: implementation("com.airbnb.android:lottie-compose:6.7.1")
@Composable
fun LoadingIcon() {
  val composition by rememberLottieComposition(
    LottieCompositionSpec.Url("https://useanimations.com/icons/loading.json")
  )
  LottieAnimation(
    composition = composition,
    iterations = LottieConstants.IterateForever,
    modifier = Modifier.size(48.dp),
  )
}

Flutter: lottie

The lottie package is a pure Dart player for Android, iOS, web and desktop.

// pubspec.yaml: lottie: ^3.6.1
import 'package:lottie/lottie.dart';

Lottie.network(
  'https://useanimations.com/icons/loading.json',
  width: 48,
  height: 48,
) // or Lottie.asset('assets/loading.json')

Icons with expressions

2 icons use After Effects expressions (loopOut or wiggle). On the web, play them with lottie-web's full build, not lottie_light. Native players do not evaluate expressions, so test these on iOS, Android and Flutter or pick another icon; react-useanimations plays them as designed.

FAQ

Are these Lottie icons free for commercial use?

Yes. All 300 Lottie icons are MIT-licensed: use, modify and redistribute them in personal and commercial projects, with no attribution required and no account to download them.

What format are the Lottie files?

Standard Lottie JSON (the Bodymovin format) with shape layers only: no images, fonts or external assets. Each icon is drawn on a 24 or 32 px artboard, scales to any size and weighs 1 kB to 14 kB, 2 kB median.

Do I need lottie-web to use the icons in React?

No. react-useanimations has its own 8 kB player with no dependencies, so you install one package and import the icons you need. lottie-web is only needed outside React, on plain web pages or in other frameworks.

Which icons need the full lottie-web build?

2 icons use After Effects expressions (loopOut or wiggle): Error, Twitter. On the web they need lottie-web's full build; lottie_light ignores expressions. Native players (lottie-ios, lottie-android, Flutter's lottie) do not evaluate expressions either, so these icons may move differently there.

Can I change the color of a Lottie icon?

On the web, lottie-web's SVG renderer writes the colors as attributes, so a CSS rule on the paths recolors the icon. Native players use their dynamic property APIs: ColorValueProvider on iOS, LottieProperty.COLOR and STROKE_COLOR on Android, and ValueDelegate.color in Flutter.

Popular Lottie icons