Animated Icon Component Library for React/Vue/Svelte/Solid/Web Component

Animated Icons is an animated icon library that you can easily use as components in your React/Vue/Svelte/Solid/Web Component apps.

It currently includes 3,640 icons total from three major SVG icon sets (Lucide, Heroicons, and Iconoir) and runs all animations through CSS transitions and keyframes.

Features:

• Each icon accepts primaryColor and secondaryColor props or CSS custom properties for layered color control.
• Categories drive animation assignment: bells ring, hearts beat, gears rotate, shields fill. The motion matches the icon’s meaning.
• Built-in role="img", aria-label, and a <title> element.
• Animations fire on the icon itself or on any parent container that carries the wrapper class.

Installation:

All packages follow the same naming pattern under the @animated-color-icons npm scope. Pick the framework and icon set you need.

Replace lucide with heroicons or iconoir to get the other icon sets. The naming pattern stays identical.

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

# Lucide Vue
npm install @animated-color-icons/lucide-vue

# Lucide Svelte
npm install @animated-color-icons/lucide-svelte

# Lucide Solid
npm install @animated-color-icons/lucide-solid

# Lucide Web Components
npm install @animated-color-icons/lucide-wc

React Usage:

Import named icon components and wrap them with the library’s trigger class. The class activates hover animations on the container.

import { Bell, Settings, Trash } from '@animated-color-icons/lucide-react';
function Toolbar() {
  return (
    // al-icon-wrapper is the Lucide hover trigger class
    // Heroicons uses ah-icon-wrapper, Iconoir uses ai-icon-wrapper
    <div className="al-icon-wrapper">
      {/* primaryColor sets the main stroke/fill; secondaryColor sets accent elements */}
      <Bell size={28} primaryColor="#3b82f6" secondaryColor="#2563eb" />
      <Settings size={28} primaryColor="#8b5cf6" secondaryColor="#7c3aed" />
      <Trash size={28} primaryColor="#ef4444" secondaryColor="#dc2626" />
    </div>
  );
}

Vue Usage:

Vue components include scoped animation styles automatically.

<template>
  <!-- al-icon-wrapper activates animations on hover for this container -->
  <div class="al-icon-wrapper">
    <!-- Vue uses kebab-case prop names: primary-color, secondary-color -->
    <Bell :size="28" primary-color="#3b82f6" secondary-color="#2563eb" />
    <Settings :size="28" primary-color="#8b5cf6" secondary-color="#7c3aed" />
  </div>
</template>
<script setup>
// Named imports work the same way as in React
import { Bell, Settings } from '@animated-color-icons/lucide-vue';
</script>

Svelte Usage:

Svelte imports reference the individual .svelte component file directly.

<script>
  // Import the .svelte file for each icon you need
  import Bell from '@animated-color-icons/lucide-svelte/Bell.svelte';
  import Settings from '@animated-color-icons/lucide-svelte/Settings.svelte';
</script>
<!-- Wrap icons in the trigger class -->
<div class="al-icon-wrapper">
  <Bell size={28} primaryColor="#3b82f6" secondaryColor="#2563eb" />
  <Settings size={28} primaryColor="#8b5cf6" secondaryColor="#7c3aed" />
</div>

Solid Usage:

The Solid package mirrors the React API. The only difference is that Solid uses class rather than className.

import { Bell, Settings } from '@animated-color-icons/lucide-solid';
function Nav() {
  return (
    // Solid uses class="", not className=""
    <div class="al-icon-wrapper">
      <Bell size={28} primaryColor="#3b82f6" secondaryColor="#2563eb" />
      <Settings size={28} primaryColor="#8b5cf6" secondaryColor="#7c3aed" />
    </div>
  );
}

Web Component Usage:

Web Components use Shadow DOM. Each icon encapsulates its own styles, so no external CSS import is needed and the tags work in any HTML context or framework.

For Heroicons and Iconoir, replace lucide-wc with heroicons-wc or iconoir-wc. The tag prefix changes to animated-heroicon-* or animated-iconoir-* accordingly.

<!-- Load individual icon modules via CDN — no npm install required -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@animated-color-icons/lucide-wc/Bell.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@animated-color-icons/lucide-wc/Settings.js"></script>

<!-- Apply the wrapper class to the parent to trigger animations on hover -->
<div class="al-icon-wrapper">
  <!-- Web Components use kebab-case attributes: primary-color, secondary-color, stroke-width -->
  <animated-lucide-bell size="28" primary-color="#3b82f6" secondary-color="#2563eb"></animated-lucide-bell>
  <animated-lucide-settings size="28" primary-color="#8b5cf6" secondary-color="#7c3aed"></animated-lucide-settings>
</div>

Standalone SVG

Copy SVG files from the dist/ directories and paste the contents directly into HTML. Each SVG file carries its own embedded <style> block, so no external stylesheet is needed.

<!-- Wrap the SVG in the trigger class -->
<div class="al-icon-wrapper">
  <!-- Paste the full contents of dist/svg/bell.svg here -->
  <!-- The embedded <style> block handles all animation CSS -->
</div>

Customizing Colors

Colors are set through CSS custom properties or directly through component props.

CSS custom properties

/* Lucide icons inside .brand-nav will use these colors */.brand-nav {
  --animated-lucide-primary: #3b82f6;
  --animated-lucide-secondary: #2563eb;
}

/* Heroicons color variables */.brand-nav {
  --animated-heroicon-primary: #f59e0b;
  --animated-heroicon-secondary: #d97706;
}

/* Iconoir color variables */.brand-nav {
  --animated-iconoir-primary: #8b5cf6;
  --animated-iconoir-secondary: #7c3aed;
}

Component props

// Pass colors directly on the component for per-icon control
<Bell primaryColor="#3b82f6" secondaryColor="#2563eb" />

The library ships six built-in color presets:

Name	Primary	Secondary
Teal	#0d9488	#0f766e
Blue	#3b82f6	#2563eb
Red	#ef4444	#dc2626
Amber	#f59e0b	#d97706
Violet	#8b5cf6	#7c3aed
Pink	#ec4899	#db2777

Hover Trigger Configuration

Animations activate on two CSS selectors per icon set. One on the icon itself and one on a parent wrapper.

Icon Set	Icon selector	Wrapper selector
Lucide	.animated-lucide-icon:hover	.al-icon-wrapper:hover
Heroicons	.animated-heroicon:hover	.ah-icon-wrapper:hover
Iconoir	.animated-iconoir:hover	.ai-icon-wrapper:hover

The wrapper selector is the practical one for most UIs. Apply it to a button, card, or nav item and the icon animates on hover of the entire element.

<!-- The full button hover area triggers the bell animation -->
<button class="al-icon-wrapper">
  <animated-lucide-bell size="24"></animated-lucide-bell>
  Notifications
</button>

Component Props

All framework packages share the same prop API. Web Components use kebab-case attribute names for each prop.

• size (number): Width and height of the icon in pixels. Default: 24.
• color (string): SVG stroke color. Default: 'currentColor'.
• primaryColor (string): Primary tone color for two-tone rendering. Falls back to color if unset.
• secondaryColor (string): Secondary tone color for accent elements. Falls back to color if unset.
• strokeWidth (number): SVG stroke width. Lucide defaults to 2; Heroicons defaults to 1.5.
• className (string): Additional CSS classes to apply to the root SVG element. Default: ''.
• label (string): Accessible label. Default: the icon name derived from the component name.

Animation Types

The library assigns animations based on icon category. Here is the full catalog of animation types:

Animation	Effect	Typical icons
fill	Shape fills with translucent color	Shield, folder, file, user head
fade	Pop-in with subtle scale	Details, secondary elements
scale-pop	Bounce scale	Check, X, plus, eye pupil
spin	Full 360° rotation	Redo, refresh, loader
gear	Partial rotation	Settings, cog, sun, moon
nudge	Translate in a direction	Arrows, chevrons, truck
shake	Horizontal wobble	Send, cart, bars, menu, flag
bell-ring	Pendulum swing from top	Bell
heart-beat	Double-pulse scale	Heart
mail-flap	Envelope opens and closes	Mail, envelope
rocket-lift	Diagonal translate up-right	Rocket, navigation
bar	Grow from bottom with bounce	Bar chart elements
handle-lift	Lift upward	Trash lid
page-turn	Rotate on Y axis	Book pages
menu-line	Staggered scaleX	Hamburger menu
pulse	Opacity pulse	Alert indicators, signal, wifi
dot-appear	Pop scale on small elements	Map pin dot

The post Animated Icon Component Library for React/Vue/Svelte/Solid/Web Component appeared first on CSS Script.