Animated Icons

Overview

Animated Icons brings fluid interactive animations and micro-interactions to over 3,600+ popular open-source vector icons across Lucide (1,933+), Iconoir (1,383+), and Heroicons (324+). Built for React and modern web apps, every icon features refined motion triggers—such as bounce, spin, draw, and morph—on hover or click.

Key Features

• 🎨 3,600+ Animated Icons: Complete animated coverage of Lucide, Iconoir, and Heroicons with identical naming conventions.
• 🕹️ Configurable Motion Triggers: Trigger animations effortlessly on hover, click, continuous loop, or programmatically via motion props.
• 🌈 Dual-Tone Color Customization: Live palette customizer supporting primary and secondary color tokens, opacity gradients, and Tailwind classes.
• 📦 Tree-Shakeable Packages: Modular NPM packages (@animated-color-icons/lucide-react) ensuring only imported icons are bundled.

Installation & Quick Start

# Install animated Lucide React package
npm install @animated-color-icons/lucide-react

import React from 'react';
import { Heart, Bell, Settings, Download } from '@animated-color-icons/lucide-react';

export function ActionToolbar() {
  return (
    <div className="flex items-center gap-4 p-4 rounded-2xl bg-neutral-900 border border-neutral-800">
      <button className="p-2 text-white hover:text-rose-400 transition-colors cursor-pointer">
        <Heart size={24} trigger="hover" />
      </button>
      <button className="p-2 text-white hover:text-amber-400 transition-colors cursor-pointer">
        <Bell size={24} trigger="hover" />
      </button>
      <button className="p-2 text-white hover:text-teal-400 transition-colors cursor-pointer">
        <Download size={24} trigger="click" />
      </button>
    </div>
  );
}

Why Choose Animated Icons?

• Navigation & Micro-Interactions: Instantly elevate sidebars, tab bars, and interactive buttons from static glyphs to engaging dynamic elements.
• Familiar Developer Experience: Retains the exact syntax, sizing, and stroke parameters of standard Lucide and Heroicons.