v1.0.0 — 3,640 Animated Icons

Animated Icons v1.0.0

3,640 beautifully animated icons across 3 icon sets, available in 5 output formats.

Icon sets

Icon set	Icons	Source
Lucide	1,933	lucide.dev
Iconoir	1,383	iconoir.com
Heroicons	324	heroicons.com

Output formats

Each icon set is available as:

• React (.jsx) — import { Heart } from './dist/react'
• Vue (.vue) — import { Heart } from './dist/vue'
• Svelte (.svelte) — import Heart from './dist/svelte/Heart.svelte'
• Web Components (.js) — <animated-lucide-heart>
• SVG (.svg) — standalone with embedded CSS

Download packages

	React	Vue	Svelte	Web Components	SVG
Lucide	animated-lucide-react	animated-lucide-vue	animated-lucide-svelte	animated-lucide-wc	animated-lucide-svg
Iconoir	animated-iconoir-react	animated-iconoir-vue	animated-iconoir-svelte	animated-iconoir-wc	animated-iconoir-svg
Heroicons	animated-heroicons-react	animated-heroicons-vue	animated-heroicons-svelte	animated-heroicons-wc	animated-heroicons-svg

Features

• CSS-only hover animations — no Framer Motion, no JS runtime
• Two-tone color support via CSS custom properties
• 19 animation types: bell-ring, heart-beat, mail-flap, gear rotation, nudge, shake, spin, and more
• Accessible: role="img", aria-label, and <title> on every icon
• Semantic animations per category (bells ring, hearts beat, gears rotate, shields fill)
• Tree-shakeable barrel exports for React, Vue, Svelte, and Web Components

Live preview

Browse and preview all 3,640 icons at animated-icons.vercel.app