Add more than 350 animated React icons to projects with this open-source icon library.
heroicons-animated
Add animated Heroicons to React projects with this free, open-source icon library.
About heroicons-animated
heroicons-animated is a free, MIT-licensed library of animated SVG icons built specifically for React projects. It pairs the popular Heroicons icon set with smooth, pre-built animations created using the Motion library, and includes 316 unique icons in its collection.
Developers can add the library to their projects via common package managers including pnpm, npm, yarn, and bun, or copy-paste individual icons directly into their code. All icons are fully customizable, so users can adjust animation timing, SVG styling, and other properties to align with their project's design requirements.
The tool is ideal for React developers, UI/UX designers, and web creators who need ready-to-use animated icons without building custom animations from scratch. It is supported by the Vercel OSS Program, and the project creator invites community feedback to help improve the library over time.
Key features
- 316 pre-built animated SVG icons for React projects
- MIT licensed for free personal and commercial use
- Installable via pnpm, npm, yarn, and bun
- Smooth animations built with the Motion library
- Copy-paste ready for quick project integration
- Fully customizable SVG and animation properties
Best for: It is most useful for React developers and web designers looking for free, customizable animated SVG icons for their projects.
Good for
- Free to use with an MIT license, no usage restrictions
- Pre-built smooth animations reduce development time
- Compatible with all common React package managers
- Fully customizable to fit project design systems
Watch out for
- Only compatible with React projects, not other frontend frameworks
heroicons-animated at a glance
- Website
- heroicons-animated.com
- Category
- Design & Creative › Design Assets & Inspiration
- Type
- Website
- Pricing
- Free
- Platforms
- Web
- Open source
- Not stated
- Language
- English
- Last checked
- Oct 5, 2026 · Online when checked
- Listed
- Oct 5, 2026
heroicons-animated alternatives
Tools and sites you could use instead, ranked by how closely they match.
Browse animated icons for websites, apps and designs, including free and paid collections.
useAnimations offers Lottie animated icons for use in applications and websites.
Free
24 alternativesSearch SVG icons and add popular icon sets to React projects with this icon tool.
Browse open-source SVG icons for Amazon Web Services products and copy icons into projects with this AWS-specific library.
Search over 300,000 free SVG icons from 236 icon libraries in one interface.
Free
24 alternativesPopular in Design Assets & Inspiration
Well-known listings from the same topic.
Arts and Cultureartsandculture.google.comFigmafigma.comUI Discoveryuidiscovery.comLS Graphicsls.graphicsToools.designtoools.designArtveeartvee.com
heroicons-animated FAQ
Is heroicons-animated free to use?
Yes, it is free for both personal and commercial use under the MIT license.
What package managers support heroicons-animated?
It supports installation via pnpm, npm, yarn, and bun for React projects.
Are the animated icons customizable?
Yes, all icons are fully editable SVG files, so you can adjust animations and styling as needed.
Is something wrong or out of date?
Tell us and an editor will check it.
Own this website?
Claim this listing
Claim the listing and suggest updates yourself. An editor checks every claim first.