How to use useAnimations icons

Quick start

The fastest way to get an animated icon on a web page:

1. Pick an icon on the homepage and click Download. Unzip it — you'll get e.g. checkmark.json.
2. Load the lottie-web player from a CDN (or npm install lottie-web).
3. Point lottie.loadAnimation() at an empty element and the JSON file.

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

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

Using React? Skip the download entirely and jump to react-useanimations.

What's in the download

Each icon downloads as a ZIP with two files:

• Lottie JSON (e.g. alertCircle.json) — the animation. Works with any Lottie runtime: lottie-web, Lottie iOS, Lottie Android, React Native and others.
• SVG (e.g. alert-circle.svg) — a static version of the same icon, handy as a fallback or for places that can't animate.

Icons are drawn on a 24 px or 32 px artboard in the style of Feather, so they sit nicely next to Feather and similar line icon sets. Being vector, they scale to any size without losing quality. Most files are 1.5–10 KB.

HTML & vanilla JS

Install the player

Use the CDN build from the quick start, or install it with a package manager:

npm install lottie-web

import lottie from 'lottie-web/build/player/lottie_light';

const animation = lottie.loadAnimation({
  container: document.querySelector('.icon'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: '/icons/checkmark.json' // or animationData: importedJson
});

Useful options

Click & hover triggers

These are the exact patterns the icons on useanimations.com use. Create the animation with autoplay: false and loop: false, then:

Toggle on click (menu ↔ close, play ↔ pause, checkbox)

Play forward on the first click and backward on the next one:

let direction = 1;
button.addEventListener('click', () => {
  animation.setDirection(direction);
  animation.play();
  direction = -direction;
});

Play on hover

el.addEventListener('mouseenter', () => {
  animation.setDirection(1);
  animation.play();
});
el.addEventListener('mouseleave', () => {
  animation.setDirection(-1);
  animation.play();
});

Replay once on every click (download, refresh, arrows)

button.addEventListener('click', () => {
  // [firstFrame, lastFrame], true = start immediately
  animation.playSegments([0, animation.totalFrames], true);
});

Need the icon to start in its "on" state (e.g. an already-checked checkbox)? Jump to the last frame without playing: animation.goToAndStop(animation.totalFrames - 1, true).

React

The official react-useanimations package (MIT) ships every icon as an importable animation, so there is nothing to download. Each animation is imported separately, so your bundle only includes the icons you use.

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import checkmark from 'react-useanimations/lib/checkmark';

export default function SaveButton() {
  return <UseAnimations animation={checkmark} size={32} strokeColor="#0C5B97" />;
}

Props

Controlled toggle

import { useState } from 'react';
import UseAnimations from 'react-useanimations';
import checkBox from 'react-useanimations/lib/checkBox';

export function Checkbox() {
  const [checked, setChecked] = useState(false);
  return (
    <UseAnimations
      animation={checkBox}
      reverse={checked}
      onClick={() => setChecked(!checked)}
      size={32}
    />
  );
}

Wrap the icon in a real button

import heart from 'react-useanimations/lib/heart';

<UseAnimations
  animation={heart}
  size={32}
  render={(eventProps, animationProps) => (
    <button type="button" aria-label="Add to favorites" {...eventProps}>
      <div {...animationProps} />
    </button>
  )}
/>

Available imports: activity, airplay, alertCircle, alertOctagon, alertTriangle, archive, arrowDown, arrowDownCircle, arrowLeftCircle, arrowRightCircle, arrowUp, arrowUpCircle, behance, bookmark, calendar, checkBox, checkmark, codepen, copy, download, dribbble, edit, error, explore, facebook, folder, github, heart, help, home, infinity, info, instagram, linkedin, loading, loading2, loading3, lock, mail, maximizeMinimize, maximizeMinimize2, menu, menu2, menu3, menu4, microphone, microphone2, notification, notification2, playPause, playPauseCircle, plusToX, pocket, radioButton, scrollDown, searchToX, settings, settings2, share, skipBack, skipForward, star, thumbUp, toggle, trash, trash2, twitter, userMinus, userPlus, userX, video, video2, visibility, visibility2, volume, youtube, youtube2, zoomIn, zoomOut.

Vue, Svelte & Angular

Any framework can use lottie-web directly: create the animation when the component mounts and destroy it when it unmounts. Vue 3 example:

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import lottie from 'lottie-web/build/player/lottie_light';
import checkmark from './icons/checkmark.json';

const el = ref(null);
let animation;

onMounted(() => {
  animation = lottie.loadAnimation({
    container: el.value,
    renderer: 'svg',
    loop: false,
    autoplay: false,
    animationData: checkmark
  });
});
onBeforeUnmount(() => animation?.destroy());
</script>

<template>
  <button type="button" aria-label="Save" @click="animation.goToAndPlay(0, true)">
    <span ref="el" style="display: block; width: 32px; height: 32px" />
  </button>
</template>

The same two calls — loadAnimation() on mount (onMount in Svelte, ngAfterViewInit in Angular) and destroy() on teardown — are all you need in other frameworks.

iOS (SwiftUI & UIKit)

Add lottie-ios with Swift Package Manager (https://github.com/airbnb/lottie-spm.git), then drag the downloaded checkmark.json into your Xcode project.

import Lottie
import SwiftUI

struct SavedBadge: View {
  var body: some View {
    LottieView(animation: .named("checkmark"))
      .playing()
      .frame(width: 32, height: 32)
  }
}

import Lottie

let animationView = LottieAnimationView(name: "checkmark")
animationView.frame = CGRect(x: 0, y: 0, width: 32, height: 32)
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .playOnce
view.addSubview(animationView)
animationView.play()

Android (Compose & XML)

Add lottie-android to your module and copy the JSON into res/raw/ (Android resource names must be lowercase, e.g. checkmark.json).

dependencies {
    implementation("com.airbnb.android:lottie-compose:6.7.1") // Jetpack Compose
    // or: implementation("com.airbnb.android:lottie:6.7.1")   // Views / XML
}

@Composable
fun SavedBadge() {
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.checkmark))
    LottieAnimation(
        composition = composition,
        iterations = 1,
        modifier = Modifier.size(32.dp)
    )
}

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/checkmark"
    android:layout_width="32dp"
    android:layout_height="32dp"
    app:lottie_rawRes="@raw/checkmark"
    app:lottie_autoPlay="true"
    app:lottie_loop="false" />

Size & color

Size

The icon fills its container, so size the container — not the SVG. Icons are designed for 24–32 px but stay sharp at any size.

Color on the web

The icons are stroke-based, so with the 'svg' renderer you can recolor them with plain CSS — including hover states and dark mode:

.icon svg path {
  stroke: currentColor;   /* follow the surrounding text color */
}
.icon.is-active svg path {
  fill: #e11d48;          /* filled states, e.g. heart or star */
}
@media (prefers-color-scheme: dark) {
  .icon { color: #f5f5f5; }
}

Color in React and native apps

• React: strokeColor and fillColor props.
• iOS: animationView.setValueProvider(ColorValueProvider(LottieColor(r: 0.05, g: 0.36, b: 0.59, a: 1)), keypath: AnimationKeypath(keypath: "**.Color"))
• Android: animationView.addValueCallback(KeyPath("**"), LottieProperty.STROKE_COLOR) { Color.parseColor("#0C5B97") }

Performance

• Use the light player. lottie_light is ~40% smaller than the full build and plays all icons except Twitter and Error.
• Load icons only when they're visible. If a page has many icons, start each one with an IntersectionObserver instead of all at once on page load:

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (!entry.isIntersecting) continue;
    observer.unobserve(entry.target);
    lottie.loadAnimation({
      container: entry.target,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: entry.target.dataset.src
    });
  }
}, { rootMargin: '300px 0px' });

document.querySelectorAll('[data-src]').forEach((el) => observer.observe(el));

• Destroy what you remove. Call animation.destroy() when a component unmounts or a modal closes.
• Prefer one-shot animations for UI feedback. Endless loops are best reserved for loaders.

Accessibility

• Decorative icon next to visible text: add aria-hidden="true" to the container.
• Icon-only control: render a real <button> with an aria-label, and reflect toggle state with aria-pressed or aria-expanded.
• Respect reduced motion: show a static frame instead of playing.

const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const animation = lottie.loadAnimation({
  container: el,
  renderer: 'svg',
  loop: !reduceMotion,
  autoplay: !reduceMotion,
  path: '/icons/loading.json'
});
if (reduceMotion) {
  animation.addEventListener('DOMLoaded', () => animation.goToAndStop(0, true));
}

License & attribution

The icons are free for personal and commercial use under Creative Commons Attribution 4.0 (CC BY 4.0). You can modify them and use them in client work.

• Required: credit useAnimations with a link to https://useanimations.com, e.g. in your site footer, app "About" screen or README.
• Not allowed: redistributing or reselling the files themselves, e.g. inside an icon pack, template, theme or UI kit.

Animated icons by <a href="https://useanimations.com">useAnimations</a>

Full terms: Licencing & Terms. The react-useanimations source code is MIT-licensed.