Development · Web app
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.
What it's 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
- Topic
- UI Components
- 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: Drop-in animated icons (with shadcn CLI install) to add polished micro-interactions to any app or site.
- @toolfolio: Free, copy-paste animated icons for polished interfaces in web and app projects.
- @toolfolio: Written overview of the same tool.
Compare
Related
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animation library for React, Vue, and vanilla JavaScript
Open-source animated and interactive React UI components and backgrounds
Curated directory of crafted React, Tailwind, and shadcn UI components.
Animated React and Tailwind UI components designed for landing pages
Updated