#What is Lucide Animated?

Lucide Animated is an open-source extension of the beloved Lucide icon set, adding smooth, carefully crafted animations to enhance user interfaces without the overhead of custom work—ideal for React developers building interactive dashboards, landing pages, SaaS tools, or any app where subtle motion delights users. Created by Dmytro, a design-focused engineer, it leverages Framer Motion for declarative animations on Lucide's consistent, stroke-based SVGs, delivering hover effects, loops, and transitions that feel premium and purposeful. Perfect for Next.js or Vite projects using shadcn/ui, it allows you to add animated icons directly to your codebase via a simple CLI command, owning the full source while maintaining compatibility with static Lucide icons for mixed usage.

#Features ⚡

• Framer Motion Animations: Elegant, hardware-accelerated effects like stroke drawing, pulsing, bouncing, and hover triggers.

• Shadcn/UI Integration: Add icons as components with remote JSON configs for instant setup and full customization.

• Consistent with Lucide: Matches the original library's style, size, and stroke width for seamless blending of static and animated icons.

• Performant SVGs: Lightweight, tree-shakable, and optimized for fast rendering in production apps.

• Community-Driven: Open for feedback, issues, and contributions to prioritize new animated icons.

• Easy Customization: Inherit Lucide props for color, size, and stroke, plus Motion variants for animation control.

#Pros ✅

• Adds delightful motion to interfaces instantly, elevating UX without bloating your bundle.

• Perfect synergy with shadcn/ui ecosystem—feels native in Tailwind-based projects.

• Free and open-source with MIT license, no restrictions or vendor lock-in.

• High-quality, thoughtful animations that avoid gimmicks and focus on usability.

#Cons ⚠️

• Growing collection—covers popular icons but may not yet have every Lucide variant animated.

• Requires Framer Motion and shadcn/ui setup; less ideal for non-React or vanilla projects.

• Animations are predefined—advanced tweaks need Motion knowledge.

#Included Components - Templates

• Navigation Icons: Animated menu toggles, arrows (up/down/left/right), chevrons, and ellipsis.

• Action Icons: Refresh, loader spins, checkmarks with draw-in effects, and plus/minus expands.

• Status Icons: Alerts, info, success/failure states with subtle pulses or fills.

• Media Controls: Play/pause, volume, and share icons with smooth transitions.

• UI Essentials: Dashboard grids, search magnifiers, settings gears, and layout switches.

• Interactive Primitives: Hover-activated icons like hearts, stars, and bookmarks.

• Growing Library: Community-requested additions via GitHub issues for arrows, downloads, and more.

#Pricing 💸

Lucide Animated is 100% free and open-source under the MIT license—no costs, tiers, or restrictions for personal or commercial use. As a community passion project, it welcomes sponsorships and stars on GitHub to support faster growth, but everything is accessible without payment.

#Integrations 🧰

• Frameworks: Optimized for React with Next.js, Vite, or Remix via shadcn/ui CLI.

• Animation: Powered by Framer Motion for variants, gestures, and springs.

• Icons Base: Direct fork/extension of Lucide for perfect compatibility.

• Styling: Tailwind CSS and shadcn/ui theming for dark mode and custom colors.

• Deployment: Works anywhere React does—Vercel, Netlify, or static hosts.