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/[email protected]/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>

Don't want to download anything? Every icon also has a direct URL, e.g. https://useanimations.com/icons/checkmark.json — see Direct URLs. Using React? 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 as clean line icons, so they sit nicely next to other line icon sets. Being vector, they scale to any size without losing quality. Most files are 1.5–10 KB.

Direct URLs & icons.json

Every icon is also available as individual files with stable, CORS-enabled URLs — handy for prototypes, scripts and AI coding agents:

icons.json lists every icon with its id, title, category, search keywords, intended interaction (loop, click-toggle, click-replay, hover, hover-replay, hover-loop), file URLs, size, duration, the matching react-useanimations import and a ready-to-use lottie-web snippet.

const catalog = await fetch('https://useanimations.com/icons.json').then((r) => r.json());
const icon = catalog.icons.find((i) => i.keywords.includes('hamburger'));

lottie.loadAnimation({
  container: document.querySelector('.menu-icon'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: icon.lottie // https://useanimations.com/icons/menu.json
});

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();
});

Play once on hover

Some icons use a one-shot hover trigger. Leaving does not stop playback, and entering while it is already playing does not restart it:

el.addEventListener('mouseenter', () => {
  if (!matchMedia('(prefers-reduced-motion: reduce)').matches && animation.isPaused) {
    animation.playSegments([0, animation.totalFrames], true);
  }
});

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

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

For icons whose desired initial state is the final frame (e.g. an already-checked checkbox), jump to the last frame without playing: animation.goToAndStop(animation.totalFrames - 1, true). Switch-style icons such as Wifi Off, Mic Off or Zap Off start in their "on" state at frame 0.

React

The official react-useanimations package ships its current set as importable animations. The react field in icons.json identifies which icons are available there; icons without a package import can use the shadcn registry or direct Lottie URL.

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.

shadcn/ui

Every icon is also in a shadcn registry, so the shadcn CLI copies a ready-made component into your project (plus lottie-web and the shared UseAnimation player):

npx shadcn@latest add https://useanimations.com/r/checkmark.json

import { AnimatedCheckmark } from '@/components/animations/checkmark';

<AnimatedCheckmark size={24} />;

The component is named Animated + the icon id in PascalCase (check-box → AnimatedCheckBox) and lands in components/animations/<id>.tsx. The registry URL is https://useanimations.com/r/<id>.json; the full index is /r/registry.json. Props: size (24), strokeColor (currentColor, so the icon follows the text color), fillColor, speed, interaction (override the icon's default), active (controlled end state for click-toggle icons) and any <span> attribute. Icons are aria-hidden unless you pass aria-label, and looping icons don't autoplay when the user prefers reduced motion.

To use the short form npx shadcn@latest add @useanimations/checkmark, add the registry to components.json:

{
  "registries": {
    "@useanimations": "https://useanimations.com/r/{name}.json"
  }
}

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 released under the MIT license, the same license used by the react-useanimations package. You can use, modify and redistribute them freely in personal and commercial work.

• Allowed: use, modification and redistribution, including inside an icon pack, template, theme, UI kit or component registry.
• Optional: crediting useAnimations with a link to https://useanimations.com, e.g. in your site footer, app "About" screen or README. Not required, but appreciated.
• No warranty: the icons are provided as-is, with no warranty of any kind.

Animated icons by <a href="/api/browser/proxy?url=https%3A%2F%2Fuseanimations.com">useAnimations</a>

Full terms: Licencing & Terms.