---
name: animated-icons
description: Find and add animated UI icons (dotLottie) from the Generative Icons library by LottieFiles to web, React, iOS or Android apps: search by meaning, get the file and code, and create a missing icon in the same style.
---

# Animated icons from Generative Icons

Use this when an app needs an animated UI icon: a status, an action, a navigation or toolbar control, an empty state, a loader, or a toggle that plays between two states. The library has 1,161 icons in one style; each is a native dotLottie file with Light and Strong motion and Outline (weights 1 to 3), Solid and Duotone styles, recolored at runtime.

## Find an icon

Search by what the icon should mean, not how it looks ("delete", "upload failed", "interrupt the bot"); synonyms, UI slang and typos work.

- MCP: connect to https://generativeicons.com/mcp (Streamable HTTP, no sign-in). Call `search_icons` with `{ "query": "..." }`, then `get_icon` with the id.
- REST: `GET https://generativeicons.com/api/v1/icons?q=<meaning>` lists matches; `GET https://generativeicons.com/api/v1/icons/<id>` returns the file URL and hash, install commands and code. The API is described at https://generativeicons.com/openapi.json.

## Add it to the app

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add <icon-id>
```

`get_icon` and every icon page (https://generativeicons.com/icons/<id>/) give the code for JavaScript, React, iOS and Android. Color, style, outline weight and motion are runtime options; keep one style across an app. The npm packages go live at launch; until then, download the file from `get_icon`.

## When nothing fits

Create the icon in the project with the generative-icons CLI, in the same drawing and motion style: https://generativeicons.com/docs/creating-icons.md. The guides are searchable over MCP at https://generativeicons.com/mcp/docs.