Lucide Animated

Overview

Lucide Animated (lucide-animated.com / pqoqubbw/icons) is a celebrated open-source animated icon ecosystem with over 8,000+ GitHub Stars. It supercharges the standard Lucide icon suite by adding smooth, physics-based micro-animations powered by Motion (formerly Framer Motion), allowing developers to add tactile life to everyday buttons, indicators, and navigation links.

Key Features

• 350+ Handcrafted Animated Icons: Every standard Lucide icon reimagined with smooth, natural state and hover animations.
• Native shadcn CLI Registry: Add icons directly to your project using npx shadcn@latest add "https://lucide-animated.com/r/{icon}.json".
• Motion (Framer Motion) Powered: Built upon declarative animation primitives with precise spring dampening and timeline keyframes.
• TypeScript & React Native Ready: Zero TypeScript errors with complete prop interfaces and cross-platform flexibility.

Installation & Quick Start

# Install via shadcn CLI
npx shadcn@latest add "https://lucide-animated.com/r/bell.json"

import React from 'react';
import { BellIcon } from '@/components/icons/bell';

export function NotificationBell() {
  return (
    <button className="p-2 rounded-xl bg-card border border-border hover:bg-muted/80 transition-colors group cursor-pointer">
      <BellIcon size={20} className="text-foreground group-hover:text-primary transition-colors" />
    </button>
  );
}

Why Choose Lucide Animated?

1. Lucide Consistency: If your project already uses Lucide Icons, upgrading to Lucide Animated maintains 100% visual consistency while adding delightful dynamic micro-interactions.
2. Zero Maintenance: Self-contained React component files live directly in your source tree.