# useAnimations documentation

How to use the free useAnimations animated icons (Lottie) on the web, in React, Vue, iOS and Android.

- Website: https://useanimations.com
- HTML version of this page: https://useanimations.com/documentation
- License: icons CC BY 4.0 (attribution required), react-useanimations code MIT
- Last updated: 2026-10-05

## Quick start (HTML)

1. Pick an icon on https://useanimations.com/#explore and click **Download**. Unzip it — you get e.g. `checkmark.json`.
2. Load the lottie-web player.
3. Call `lottie.loadAnimation()` on an empty element.

```html
<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>
```

## What's in the download

Each icon is a ZIP with:

- a **Lottie JSON** animation (works in any Lottie runtime: lottie-web, Lottie iOS, Lottie Android, React Native, …)
- a static **SVG** of the same icon

Icons are drawn on a 24 px or 32 px artboard in the Feather style. Most JSON files are 1.5–10 KB (median ~4 KB).

## HTML & vanilla JS

```bash
npm install lottie-web
```

```js
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
});
```

`lottie_light` (~47 KB gzipped) plays every icon except **Twitter** and **Error**, which use After Effects expressions and need the full `lottie.min.js` build (~77 KB gzipped).

## Click & hover triggers

Create the animation with `autoplay: false, loop: false`, then:

Toggle on click (menu/close, play/pause, checkbox):

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

Play on hover:

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

Replay once on every click:

```js
button.addEventListener('click', () => {
  animation.playSegments([0, animation.totalFrames], true);
});
```

Start in the "on" state: `animation.goToAndStop(animation.totalFrames - 1, true)`.

## React

The official `react-useanimations` package ships every icon as an importable animation; only imported icons end up in the bundle.

```bash
npm install react-useanimations
```

```jsx
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:

| Prop | Default | Description |
| --- | --- | --- |
| `animation` | — | Imported animation (required) |
| `size` | `24` | Width and height in px |
| `strokeColor` | `'inherit'` | Stroke color |
| `fillColor` | `''` | Fill color for filled states |
| `speed` | `1` | Playback speed |
| `reverse` | `false` | Start in the end state (controlled toggles) |
| `autoplay` / `loop` | `false`* | *`true` for loaders |
| `wrapperStyle` | `{}` | Wrapper inline styles |
| `pathCss` | `''` | CSS applied to the SVG path |
| `render` | — | Render prop to wrap the icon in your own element |
| `options` | `{}` | Extra lottie-web options |

Controlled toggle:

```jsx
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} />
  );
}
```

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

Use lottie-web directly: `loadAnimation()` on mount, `destroy()` on unmount.

```vue
<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>
```

## iOS (lottie-ios, SwiftUI & UIKit)

Add lottie-ios via Swift Package Manager (`https://github.com/airbnb/lottie-spm.git`) and add `checkmark.json` to the Xcode project.

```swift
import Lottie
import SwiftUI

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

```swift
let animationView = LottieAnimationView(name: "checkmark")
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .playOnce
animationView.play()
```

## Android (lottie-android, Compose & XML)

Copy the JSON into `res/raw/` (lowercase file name).

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

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

```xml
<com.airbnb.lottie.LottieAnimationView
    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 container; the icon scales without quality loss.
- Web (`renderer: 'svg'`): icons are stroke-based, recolor with CSS: `.icon svg path { stroke: currentColor; }`, filled states via `fill`.
- React: `strokeColor` / `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

- Prefer `lottie_light`.
- With many icons on a page, start each one with an `IntersectionObserver` when it scrolls into view instead of all on page load.
- Call `animation.destroy()` when removing an icon.
- Keep endless loops for loaders; use one-shot animations for UI feedback.

## Accessibility

- Decorative icon next to text: `aria-hidden="true"`.
- Icon-only control: real `<button>` with `aria-label`; reflect state with `aria-pressed` / `aria-expanded`.
- Respect `prefers-reduced-motion`: don't autoplay or loop, show a static frame (`animation.goToAndStop(0, true)` after `DOMLoaded`).

## License & attribution

- Icons: Creative Commons Attribution 4.0 (CC BY 4.0) — free for personal and commercial use, modification allowed.
- Required: credit with a link to https://useanimations.com (footer, About screen or README), e.g. `Animated icons by <a href="https://useanimations.com">useAnimations</a>`.
- Not allowed: redistributing or reselling the files themselves (icon packs, templates, themes, UI kits).
- Full terms: https://useanimations.com/licencing-and-terms

## FAQ

**Is useAnimations free for commercial projects?** Yes, under CC BY 4.0 with attribution; no redistribution or resale of the files themselves.

**What formats are included?** A ZIP with a Lottie JSON animation and a static SVG.

**How do I use it in React?** `npm install react-useanimations`, then `<UseAnimations animation={checkmark} size={32} />` with `import checkmark from 'react-useanimations/lib/checkmark'`.

**How do I change the color?** CSS `stroke` on the web, `strokeColor`/`fillColor` in React, Lottie dynamic properties on iOS/Android.

**How large are the files?** 1.5–10 KB per icon (median ~4 KB); lottie_light player ~47 KB gzipped.

**Do I need After Effects?** No — only to change the motion itself.

**Vue, Svelte, Angular?** Yes, via lottie-web: `loadAnimation()` on mount, `destroy()` on unmount.