# lucide-animated

> Open-source animated React icons built with Lucide and Motion

lucide-animated is an open-source library featuring over 350 animated React icons based on the Lucide icon set. Built using Motion, each icon includes smooth micro-interactions that trigger on hover. Icons can be copied directly or installed into React and Next.js projects using the shadcn CLI.

Website: https://lucide-animated.com/

Also at: https://toolfolio.com/tools/lucide-animated

## What it is for

- Add animated micro-interactions to buttons and navigation elements
- Install individual animated icons directly via the shadcn CLI
- Preview and test Lucide icon animations in a searchable web gallery

## Features

- 350+ animated SVG icons based on Lucide
- Built with Motion (formerly Framer Motion)
- Installable individually via shadcn CLI across npm, pnpm, yarn, and bun
- Interactive gallery with live animation previews on hover
- Direct copy-paste support for React components
- Fully customizable SVG properties and Tailwind CSS compatibility

## Pricing

Open source. Free (MIT License)

## Details

- Type: Web app
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Web, Code library
- For: React and Next.js developers looking for ready-to-use animated icons
- Alternative to: Lucide, Lordicon, Heroicons
- Tags: icons, react, motion, lucide, ui, animations, svg

## Why it was saved

- [@d__raptis, 2 January 2026](https://x.com/d__raptis/status/2007016827021672929): Drop-in animated icons (with shadcn CLI install) to add polished micro-interactions to any app or site.
- [@toolfolio, 28 February 2026](https://x.com/toolfolio/status/2027711729187029384): Free, copy-paste animated icons for polished interfaces in web and app projects.
- [@toolfolio, 28 February 2026](https://x.com/toolfolio/status/2027711729187029384): Written overview of the same tool.

## Compare

- [Alternatives to Heroicons](https://xiry.app/alternatives/heroicons.md)
- [Alternatives to Lucide](https://xiry.app/alternatives/lucide.md)
- [Alternatives to Lordicon](https://xiry.app/alternatives/lordicon.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [Magic UI](https://xiry.app/resources/magic-ui): Animated React and Tailwind UI components designed for landing pages (Website, Freemium)

Updated 11 October 2026. Page: https://xiry.app/resources/lucide-animated

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.