# lucide-animated

> For the complete documentation index, see [llms.txt](https://lucide-animated.com/llms.txt). Per-icon markdown is at `/icons/<name>.md` — for example https://lucide-animated.com/icons/activity.md. An MCP server is available at `/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. The example below installs `activity`; swap it for any icon name in kebab-case:

```bash
npx shadcn@latest add "https://lucide-animated.com/r/activity.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: `/icons/<name>.md` — for example https://lucide-animated.com/icons/activity.md

## MCP

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

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

## Icons

A selection of the 468 available icons — the complete index is at https://lucide-animated.com/icons/llms.txt

- [AArrowDownIcon](https://lucide-animated.com/icons/a-arrow-down.md)
- [AArrowUpIcon](https://lucide-animated.com/icons/a-arrow-up.md)
- [AccessibilityIcon](https://lucide-animated.com/icons/accessibility.md)
- [ActivityIcon](https://lucide-animated.com/icons/activity.md)
- [AirVentIcon](https://lucide-animated.com/icons/air-vent.md)
- [AirplaneIcon](https://lucide-animated.com/icons/airplane.md)
- [AirplayIcon](https://lucide-animated.com/icons/airplay.md)
- [AlarmClockIcon](https://lucide-animated.com/icons/alarm-clock.md)
- [AlarmClockCheckIcon](https://lucide-animated.com/icons/alarm-clock-check.md)
- [AlarmClockMinusIcon](https://lucide-animated.com/icons/alarm-clock-minus.md)
- [AlarmClockPlusIcon](https://lucide-animated.com/icons/alarm-clock-plus.md)
- [AlarmSmokeIcon](https://lucide-animated.com/icons/alarm-smoke.md)
- [AlignCenterIcon](https://lucide-animated.com/icons/align-center.md)
- [AlignHorizontalIcon](https://lucide-animated.com/icons/align-horizontal.md)
- [AlignLeftIcon](https://lucide-animated.com/icons/align-left.md)
- [AlignRightIcon](https://lucide-animated.com/icons/align-right.md)
- [AlignVerticalIcon](https://lucide-animated.com/icons/align-vertical.md)
- [AmbulanceIcon](https://lucide-animated.com/icons/ambulance.md)

## Stats

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