# lucide-animated

> For the complete documentation index, see [llms.txt](https://lucide-animated.com/llms.txt). Per-icon markdown is at `https://lucide-animated.com/icons/<name>.md`. An MCP server is available at `https://lucide-animated.com/mcp`.

> Free animated React icons library with 350+ smooth Motion-powered icons based on Lucide. MIT licensed, copy-paste ready.

Beautifully crafted animated icons — an open-source ([MIT License](https://github.com/pqoqubbw/icons/blob/main/LICENSE)) collection of smooth animated icons for your projects. Feel free to use them, share your feedback, and let's make this library awesome together.

Crafted with [Motion](https://motion.dev) & [Lucide](https://lucide.dev). These icons were a way to practice what the author learned from the [animations.dev](https://animations.dev) course; it really helped to understand how to turn simple transitions into the polished motion you see here.

Free open-source library of 350+ beautifully crafted animated React icons. Built with Motion and Lucide. Copy-paste ready, MIT licensed, fully customizable SVG icons with smooth animations.

## Links

- Website: https://lucide-animated.com
- GitHub: https://github.com/pqoqubbw/icons
- License: https://github.com/pqoqubbw/icons/blob/main/LICENSE
- Author: @pqoqubbw (https://x.com/pqoqubbw)

## Tech Stack

- React components written in TypeScript
- Animations powered by [Motion](https://motion.dev)
- Visual design based on [Lucide](https://lucide.dev)

## Installation

Install a single icon via the shadcn CLI. Replace `<icon-name>` with the desired icon name in kebab-case:

```bash
npx shadcn@latest add "https://lucide-animated.com/r/<icon-name>.json"
```

Supported package managers: npm, pnpm, yarn, bun. The CLI drops a single React component file into `components/icons/<icon-name>.tsx` and adds `motion` to dependencies if missing.

## Usage

```tsx
import { Activity } from "@/components/icons/activity";

export function Demo() {
  return <Activity className="size-6" />;
}
```

Each icon is a React component that animates on hover. All standard SVG props are forwarded — pass `className`, `onClick`, `aria-label`, etc. Component names are PascalCase versions of the kebab-case file name (e.g. `arrow-right` → `ArrowRight`).

## Discover

- Index of every page: https://lucide-animated.com/llms.txt
- Full corpus for long-context agents: https://lucide-animated.com/llms-full.txt
- Agent skill: https://lucide-animated.com/skill.md
- Nested icons index: https://lucide-animated.com/icons/llms.txt
- Per-icon markdown: https://lucide-animated.com/icons/<name>.md

## MCP

A Model Context Protocol server is available at `https://lucide-animated.com/mcp` (Streamable HTTP). Tools: `search_icons`, `list_icons`, `get_icon`. Connect any MCP-compatible client (Cursor, Claude Desktop, etc.) directly to this URL.

## Ports

- Svelte: https://www.movingicons.dev/ by @jis3r
- Vue: https://imfenghuang.github.io/icons/ by @imfenghuang
- Angular: https://github.com/ajitzero/animated-icons by @ajitzero
- Flutter: https://pub.dev/packages/flutter_lucide_animated by @ravikovind

## Stats

- 428 animated icons available
- MIT licensed — free for personal and commercial use