Open-source animated SVG icons for micro-interactions
Product Overview
AnimateIcons is an open-source library of animated SVG icons designed to bring lively micro-interactions to your React projects. Instead of shipping static icons, you get icons that respond to hover, clicks, and state changes — perfect for adding polish to buttons, menus, and dashboards. Icons are crisp SVG, lightweight, and easy to drop into any React app. The project is free and open source, with a growing set of icons and animations contributed by the community. Because they're pure SVG, they scale to any size, stay sharp on retina screens, and play nicely with accessibility and reduced-motion preferences.
Best For
Best for React developers who want lightweight, animated icons with zero dependencies
Key Features
- Animated SVG icons for React projects
- Micro-interactions on hover, click, and state change
- Crisp, lightweight pure SVG
- Scales to any size, retina sharp
- Free and open source
- Growing set of community-contributed icons
- Respects reduced-motion preferences
Pros
- +Adds delightful motion without heavy animation libraries
- +Lightweight and scalable SVG
- +Open source and free
- +Easy React integration
Cons
- -Smaller set than major icon libraries
- -Primarily for React projects
- -Animation styles are consistent but limited
/// SPECS
- Pricing:Free
- Platform:Web
- Free and open source
VectorWiki
Search engine for thousands of free SVG vector icons
Macaron
Free collection of SVG UI elements and design assets
SpaceTypeGenerator
Kinetic typography and text animation generator
Aimu
Online subtitle editor with auto-generation
TikTokVoice
Text-to-speech AI voiceover with TikTok voices
OriginKit
Free animated component library for modern websites
Reicon
2,700+ open-source SVG icons for your next project
Koboyo Icons
130,000+ free hand-drawn SVG icons with an AI canvas
Icônes Desktop
A native Mac app to browse and copy 200,000+ icons
Dither Kit
Retro pixel-perfect charts and UI components for your site