# lucide-animated

> Open-source collection of 428+ beautifully crafted animated React icons based on Lucide, powered by Motion. MIT licensed and copy-paste ready.

## Docs

- [Home](https://lucide-animated.com/index.md): Browse all icons and copy install commands
- [Sponsorship](https://lucide-animated.com/sponsorship.md): Support the project
- [Contributing Guide](https://github.com/pqoqubbw/icons/blob/main/CONTRIBUTING.md): How to add or improve icons
- [License (MIT)](https://github.com/pqoqubbw/icons/blob/main/LICENSE): License terms
- [GitHub Repository](https://github.com/pqoqubbw/icons): Source code and issue tracker

## Skills

- [Agent Skill](https://lucide-animated.com/skill.md): Operating guide for installing and using icons
- [Full Documentation](https://lucide-animated.com/llms-full.txt): Complete corpus of every icon and usage

## Icons

- [All icons (nested index)](https://lucide-animated.com/icons/llms.txt): Full list of 428 animated icons with per-icon markdown links

## MCP

A Model Context Protocol endpoint is available at `https://lucide-animated.com/mcp` (Streamable HTTP) and exposes `search_icons`, `list_icons`, and `get_icon` tools. Configure your MCP-compatible client to connect there directly. See `https://lucide-animated.com/skill.md` for usage notes.

## Installation

Install a single icon via the shadcn CLI. Replace `<icon-name>` with the desired icon name in kebab-case (e.g. `activity`, `arrow-right`):

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

## 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.

## Optional

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