10 Animated Open Source Icon Libraries

You can add motion to your interface for free with 10 open source animated icon libraries, led by lucide-animated at 8,170 GitHub stars and 350+ icons. Nine of the 10 use the MIT license. Four React libraries animate with Motion; the rest use CSS, SMIL, Svelte, or Lottie.

Key Takeaways

• Best overall: lucide-animated pairs 350+ Lucide icons with Motion and installs per icon through the shadcn CLI.
• Largest React catalog: AnimateIcons ships 1,170 icons in Lucide and Huge styles from one npm package.
• Largest set overall: Material Line Icons (line-md) lists 1,218 MIT icons on Iconify, no attribution required.
• Lightest loaders: svg-spinners files start at 384 bytes and need no JavaScript.
• Widest framework support: heroicons-animated publishes 9 packages, from React and Vue to Astro and Flutter.
• Check the license: the Its Hover README calls the project MIT licensed, but its LICENSE file is Apache 2.0.

Top 10 Picks at a Glance

Ordered by GitHub stars, checked on October 8, 2026.

1. lucide-animated: best overall for React and shadcn/ui projects
2. SVG-Loaders: best for drop-in loading indicators with zero dependencies
3. SVG Spinners: best for tiny 24 x 24 spinners in CSS or SMIL
4. Its Hover: best for brand, tech, and crypto logos that animate on hover
5. Meteocons: best for weather apps, on web and native via Lottie
6. AnimateIcons: best for the largest React catalog from a single npm package
7. hamburger-react: best for an accessible animated menu toggle
8. moving icons: best for Svelte 5
9. Material Line Icons (line-md): best for framework-agnostic SVG through Iconify
10. heroicons-animated: best for Heroicons users and multi-framework teams

How These Libraries Were Evaluated

Each pick had to meet five criteria:

• OSI-approved license (MIT or Apache 2.0) in the repository's LICENSE file
• Animated icons as the core product, not a side feature of a UI kit
• Public install path: npm, shadcn registry, CDN, or plain SVG files
• Documented framework support and animation technology
• Public GitHub repo with star count and push history

Popular free sources failed the license test. useAnimations uses Creative Commons Attribution and bans redistributing the files.

Animate UI adds a Commons Clause to MIT. Lordicon's free license is a modified CC BY-ND 4.0 that requires attribution and ties downloads to an active account.

Comparison Table

1. lucide-animated

lucide-animated is the most-starred animated icon library on this list, with 8,170 stars. It wraps 350+ Lucide icons in React components animated with Motion. You add one icon at a time with pnpm dlx shadcn add @lucide-animated/<icon>, so the code lives in your repo and you can edit it.

If Motion is new to you, start with how Framer Motion handles layout and exits.

Icons play on hover by default. Each component also exposes startAnimation and stopAnimation through a ref, so you can trigger motion from a parent button or a state change.

lucide-animated has also spawned community ports. You can get the same idea in Svelte, Angular, and Flutter. The README also links a Vue port.

Pros

• Copy-paste ownership through the shadcn registry, no runtime package lock-in
• Programmatic control via ref handles
• Active: last push in October 2026

Cons

• React only in the core repo; other frameworks depend on community ports
• The README terms say the tutorials and demos cannot be redistributed or resold, on top of the MIT code license

Pricing: Free under the MIT License.

2. SVG-Loaders

SVG-Loaders by Sam Herbert is the oldest pick, created in November 2014, and still has 7,031 stars. It ships 12 loading animations built in pure SVG, so you drop them into an <img> tag with no JavaScript.

You change the color by editing the fill attribute in each file. The animations use SMIL, which Chrome once planned to deprecate before it suspended that plan. SMIL now works for 97.28% of global users, per Can I Use.

Pros

• Zero dependencies and zero build step
• Works in any framework or static HTML
• React adaptation available

Cons

• Only 12 loaders, no general-purpose icons
• Install path is a ZIP download or Bower; there is no npm package from the author
• Last push in January 2025

Pricing: Free under the MIT License.

3. SVG Spinners

SVG Spinners by Utkarsh Verma offers 46 spinners on a 24 x 24 dp grid, each in a CSS version and a SMIL version. The files are tiny: the 90-degree ring is 428 bytes in CSS and 384 bytes in SMIL.

The two versions behave differently. Per the README, SMIL animations do not start until the page finishes loading, while CSS animations play during load. If your spinner shows during initial page load, use the CSS files.

Pros

• Sub-kilobyte files with no JavaScript
• Sized to match 24 px icon sets
• React component wrapper by a community maintainer

Cons

• Loaders only
• No commits since May 2023
• The README notes rendering glitches in WebKit at zoom levels other than 100% when loaded via <img>

Pricing: Free under the MIT License.

4. Its Hover

Its Hover bills itself as "icons that move with intent", and its README lists 186+ animated React icons. Beyond UI essentials, it covers social logos (GitHub, Discord, LinkedIn), tech logos (Docker, Node.js, Python), and currencies (Bitcoin, Ethereum). You add icons with npx shadcn@latest add https://itshover.com/r/<icon>.json or copy them manually after installing motion.

Vercel picked Its Hover for its Open Source Program winter 2026 cohort, citing rapid adoption in its first week. The repo reached 2,679 stars within 10 months of its December 2025 creation.

Pros

• Rare animated brand and tech logos
• shadcn CLI install, editable source
• startAnimation and stopAnimation handles for programmatic control

Cons

• React only
• License mismatch: a README bullet says MIT, but the LICENSE file is Apache 2.0. Treat it as Apache 2.0.

Pricing: Free under the Apache License 2.0.

5. Meteocons

Meteocons by Bas Milius is a dedicated weather set with 500+ animated icons in 4 styles: fill, flat, line, and monochrome. Each icon ships as animated SVG, static SVG, and Lottie JSON, so the same art works on the web and in iOS or Android apps. To pick between the two, see when Lottie animations beat CSS and video.

You install with npm install @meteocons/svg or @meteocons/lottie, or hotlink from cdn.meteocons.com. The SVG package had 6,188 npm downloads in the week ending October 8, 2026.

Pros

• Complete weather coverage in 4 visual styles
• Lottie output for native apps and After Effects
• CDN option with versioned URLs

Cons

• Weather only
• Last push in April 2026

Pricing: Free under the MIT License.

6. AnimateIcons

AnimateIcons by Avijit Dey has the largest React catalog here: 1,170 animated SVG icons in Lucide and Huge styles. Unlike the shadcn-first libraries, it installs as a normal package with pnpm add @animateicons/react and bundles motion for you.

Props cover size, color, duration, and isAnimated. A useIconHover hook plays the icon when you hover or click a parent button or card. You can still copy single icons with npx animateicons add bell-ring, and the docs include an MCP server for AI coding agents.

The package had 13,064 npm downloads in the week ending October 8, 2026.

Pros

• 1,170 icons from one dependency
• Hover, click, or imperative triggers
• Active: pushed on October 8, 2026

Cons

• React only
• Package is still pre-1.0 (v0.12.0), so expect API changes

Pricing: Free under the MIT License.

7. hamburger-react

hamburger-react does one thing: animated menu toggles. It adds about 1.5 KB min + gzip per hamburger and uses CSS transitions instead of JavaScript animation. You choose from 14 types such as Tilt, Squash, Cross, and Spiral.

It is the most-downloaded package on this list, with 92,031 npm downloads in the week ending October 8, 2026. Accessibility is built in: a 48 x 48 px tap area, Enter key support, and a label prop for the ARIA label.

Pros

• Tiny bundle, no animation dependency
• Accessible defaults
• Props for size, direction, duration, and controlled state

Cons

• Menu icons only
• Last push in December 2024; stable rather than growing

Pricing: Free under the MIT License.

8. moving icons

moving icons is the Svelte counterpart to lucide-animated, with 500+ hand-crafted Lucide icons built natively for Svelte 5. It has zero dependencies and is tree-shakeable, so you only ship the icons you import.

You can install the full set with npm i @jis3r/icons, add single icons through the shadcn-svelte registry, or copy them from the site. Icons accept size, color, strokeWidth, and an animate boolean for controlled playback. The package had 8,885 npm downloads in the week ending October 8, 2026.

Pros

• Native Svelte 5, no Motion dependency
• Three install paths: npm, registry, or copy
• Active: last push in October 2026

Cons

• Svelte only
• Smaller community: 461 GitHub stars

Pricing: Free under the MIT License.

9. Material Line Icons (line-md)

Material Line Icons by Vjacheslav Trushkin offers 1,218 icons on Iconify, the largest count on this list. Most icons use a "rendering" animation that draws the shapes once and stops, instead of looping.

You get four formats: SVG with built-in SVG animations, SVG with CSS, static SVG, and frame-by-frame SVG at 120 fps. Through Iconify you can use them in any framework or copy the SVG directly.

The CSS versions respect prefers-reduced-motion. But the README, written at the end of 2025, warns that Safari lacks path() support for the d attribute. That makes the CSS versions unsafe for production, so use the plain SVG animations instead.

Pros

• 1,218 icons, MIT with no attribution required
• Framework-agnostic through Iconify
• Non-looping draw-in animations that keep CPU use low

Cons

• Pull requests with icons are not accepted; all icons come from the author's animation software
• Material Design style only

Pricing: Free under the MIT License.

10. heroicons-animated

heroicons-animated by Aniket Pawar animates 316 Heroicons with Motion. It has the widest framework coverage on this list: 9 packages for React, Vue, Svelte, Solid, Angular, React Native, Preact, Astro, and Flutter.

For React, you run pnpm add @heroicons-animated/react motion, or add single icons through the shadcn CLI. Vercel also included heroicons-animated in its winter 2026 Open Source Program cohort.

Pros

• Drop-in animated version of an icon set you may already use with Tailwind
• 9 framework packages from one repo
• Active: last push in September 2026

Cons

• 316 icons, smaller than the Lucide-based sets
• Low npm adoption so far: 551 weekly downloads for the React package

Pricing: Free under the MIT License.

Which Animated Icon Library Should You Pick?

Match the library to your framework, your icon style, and the design system you already ship.

• React + shadcn/ui, general UI icons: start with lucide-animated. Pick AnimateIcons if you want 1,170 icons from one npm install.
• Brand, tech, or crypto logos: Its Hover.
• Already on Heroicons or Tailwind UI: heroicons-animated.
• Svelte 5: moving icons.
• Vue, Angular, Astro, Solid, or Flutter: heroicons-animated packages, or line-md through Iconify.
• Loading states with no JavaScript: SVG Spinners for 24 px, SVG-Loaders for larger loaders.
• Weather apps, web or native: Meteocons.
• Mobile nav toggle: hamburger-react.

Trends in Animated Icons

Copy-paste distribution has replaced the classic icon package. lucide-animated, Its Hover, and heroicons-animated all install single icons through the shadcn CLI. moving icons does the same through shadcn-svelte.

Lucide has become the default base shape. lucide-animated, AnimateIcons, and moving icons all start from Lucide geometry, and lucide-animated alone has 4 community framework ports.

Infrastructure sponsors now back icon projects. Vercel included both Its Hover and heroicons-animated in its winter 2026 Open Source Program cohort, announced March 17, 2026.

FAQ

What is the best open source animated icon library?

For React, lucide-animated is the most popular, with 8,170 GitHub stars and 350+ Motion-powered icons. For the largest set, line-md has 1,218 MIT icons that work in any framework through Iconify.

Are these animated icons free for commercial use?

Yes. Nine of the 10 libraries use the MIT license and Its Hover uses Apache 2.0; both allow commercial use. Read the lucide-animated README terms, which bar redistributing or reselling its tutorials and demos.

Where can you find free animated icons?

Each library in this list has a browsable gallery, such as lucide-animated.com or animateicons.in. Iconify hosts line-md alongside 223 open source icon sets with 371,432 icons. Check the license file before using "free" icon sites; useAnimations, for example, requires attribution and bans redistribution.

Do animated icons hurt page performance?

They can, but the lightest options add under 2 KB. SVG Spinners files start at 384 bytes and hamburger-react adds about 1.5 KB. Motion-based libraries add the Motion runtime; line-md keeps CPU use down by drawing each icon once instead of looping.

How do you respect users who prefer reduced motion?

With Motion-based libraries, wrap icons with Motion's useReducedMotion hook, which returns true when the device has Reduced Motion enabled. line-md's CSS versions check prefers-reduced-motion automatically, but the README warns that Safari does not support them yet.

Can you use animated SVG icons without JavaScript?

Yes. SVG-Loaders, SVG Spinners, Meteocons, and line-md animate inside the SVG file itself, using SMIL or CSS. SMIL works for 97.28% of global users, per Can I Use.