Animated icons for React and websites
Single icons and icon packs that come alive on hover and click: springy hover icons, nav and line icon sets, a lock, a mute bell, travel and web icons, floating 3D game icons, emoji reactions and star ratings. Each one ships as a ready-made React component plus a prompt for Cursor, Claude Code, Lovable or v0.
- Live demos below
- React code included
- Keyboard and screen-reader ready
- Fully customisable
- Single icons €9.99
Animated icon prompts
Animated Emoji Reactions
A reaction bar of six emojis that come alive on hover, with click, keyboard and selected states.
€9.99€29.99
Star Rating Interaction
Bouncy star rating with spring-filled stars, a sparkle burst on the fifth star, and click or keyboard input.
€9.99€29.99
Line Icon Set
Ten one-colour line icons for app UIs, each with its own active animation on hover.
€19.99€49.99
3D Game Icons
Six faux-3D game icons (crown, heart, skull, coin, diamond, star) that float on a loop.
€19.99€49.99
Mute Bell Toggle
A notification bell that wobbles as its slash draws in and out, as an accessible on/off toggle.
€9.99€29.99
Springy Icon Hover
Four outline icons that pop with a springy bounce on hover, all driven by the Rive file.
€9.99€29.99
Lock Toggle Icon
A padlock whose shackle swings open and snaps shut, as an accessible lock toggle.
€9.99€29.99
Publish Button Icon
An upload button whose arrow lifts on hover and launches off like a rocket on click.
€9.99€29.99
Walking Figure Toggle
A little figure that starts and stops walking, as an accessible on/off toggle.
€9.99€29.99
Delivery Scooter Icon
A courier riding a scooter on a loop who hands off a package when you click.
€9.99€29.99
Star Burst Icon
A glowing star that spins slowly and jumps into a burst of light on click.
€9.99€29.99
Animated Nav Icons
Five navigation icons with their own hover moves: a puffing chimney, typing chat dots, a ringing bell.
€10.99€29.99
Basket & Cart Icons
An animated shopping basket and cart that come alive on hover, ready for any store header.
€12.99€29.99
Web Icons Pack
Six animated web icons on tiles: download, email, wifi, refresh, lock and website.
€16.99€39.99
Travel Icons Pack
Eight animated travel icons: car, gas, map, compass, coffee, location, walk and food.
€17.99€39.99
What are animated icons?
Animated icons are interface icons that move to tell people something: that a button can be pressed, that an action worked, or that a setting changed. A bell rings when notifications arrive, a heart pops when you like a post, a hamburger menu morphs into a close button.
Most animated icons fall into four groups:
- Hover icons react to the pointer, like the springy document, user, star and search icons above.
- Navigation icons give each tab its own movement, like the animated nav bar.
- State icons and toggles animate between two states, like the mute bell.
- Reaction and rating icons celebrate a choice, like emoji reactions and the star rating.
How to add animated icons to a React site
- Pick an animated icon. Choose the icon pattern you need: hover icons, nav icons, a toggle such as a mute bell, emoji reactions or a star rating. Each card on this page is the live component.
- Drop in the React code, or use the prompt. Copy the included component (.tsx) and animation file (.riv) into your project, or paste the prompt into Cursor, Claude Code, Lovable or v0 and let the agent install the runtime, add the files and place the icon where you asked.
- Customise it. Change size, labels and behaviour through props, recolour with CSS, or remix the artwork in the free Rive editor and export it back into the project.
CSS vs SVG vs Lottie vs Rive for animated icons
There is no single best format. Pick the lightest one that can do what the icon needs to do.
| Approach | Best for | Weight | Interactivity | How you edit it |
|---|---|---|---|---|
| CSS transitions | Hover lifts, spins, colour changes | 0 KB | Hover and focus only | Edit CSS |
| Animated SVG | Stroke drawing, morphing, line icons | Icon size only | Hover, focus, class toggles | Edit SVG and CSS |
| Motion (Framer Motion) | Spring physics, state changes, exit animations | About 35 KB once | Any React state | Edit code |
| Lottie | Designer timelines exported from After Effects | Player plus 10-100 KB per icon | Play, pause, seek | After Effects round-trip |
| Rive | Interactive icons with state machines | Runtime plus 3-60 KB per icon | Hover, click, inputs, states | Free Rive editor |
The icons on this page use Rive because they need real interactivity: hover states, toggles and selections driven by a state machine, in files from 3 KB to 130 KB.
Accessible animated icons
- Interactive icons are real
<button>elements with anaria-label, and toggles report their state witharia-pressed. - Keyboard focus plays the same animation as hover, so keyboard users get the same feedback.
- Decorative icons are marked as images with a label, or hidden from screen readers entirely.
Animated icon guides
- Animated Icons in React: 5 Ways to Add ThemCSS, SVG, Motion, Lottie and Rive compared, with code for each.
- Icon Hover Animation with CSS: 8 Effects with CodeBounce, wiggle, ring, draw-on and more, copy-paste ready.
- Animated SVG Icons: How to Make Icons MoveStroke drawing, morphing and transform tricks for SVG icons.
- How to Animate Lucide Icons in ReactHover, click and loop animations for lucide-react icons.
- Lottie vs Rive vs CSS for Animated IconsFile size, interactivity and workflow, side by side.
Animated icons FAQ
What are animated icons?
Animated icons are small interface icons that move to give feedback: a bell that rings when you hover it, a heart that pops when you like something, a menu icon that morphs into a close icon. They are built with CSS transitions, animated SVG, JavaScript animation libraries such as Motion, or runtime formats such as Lottie and Rive.
How do I add animated icons to a React app?
For simple hover effects, animate the icon's transform with CSS (for example a scale or rotate on :hover). For state changes such as mute/unmute, use Motion (Framer Motion) or a Rive state machine. Every icon on this page comes with a ready-made React component (.tsx) and its animation file, plus a prompt that has Cursor, Claude Code, Lovable or v0 wire it in for you.
Where can I get free animated icons?
Free options include animated icon sets on the Rive Community and LottieFiles, and open-source React libraries that animate Lucide-style icons. Free sets usually need wiring, accessibility and state handling added yourself; the prompts here include that work and are credited to their original artists where the artwork comes from the Rive Community (CC BY 4.0).
How do I animate an icon on hover with CSS?
Give the icon a transition on transform, then change the transform on hover: .icon { transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1) } .button:hover .icon { transform: scale(1.15) rotate(-8deg) }. Animate only transform and opacity so the browser can keep it at 60fps, and turn it off under prefers-reduced-motion.
Are animated SVG icons better than Lottie or Rive?
Animated SVG with CSS is the lightest option and is ideal for simple hover effects. Lottie plays designer-made timelines exported from After Effects but is mostly non-interactive. Rive files are small, run state machines and react to hover, clicks and inputs, which makes them the best fit for interactive icons such as toggles, nav icons and reactions.
Do animated icons hurt performance?
Not when they are built well. Animate transform and opacity rather than layout properties, keep looping animations off-screen paused, and load heavier runtimes (Lottie, Rive) only when the icon is visible. A Rive icon file is typically 3 to 130 KB.
Are animated icons accessible?
They can be. Interactive icons should be real buttons with an aria-label (and aria-pressed for toggles), keyboard focus should trigger the same animation as hover, and motion should be reduced or removed when the user enables prefers-reduced-motion.
Do I get the React code or only a prompt?
Both. Each download includes the prompt, the ready-made React component (.tsx) that runs the live demo, and the Rive animation file (.riv). Copy the files into your project and use the component directly, or paste the prompt into your AI coding tool and let it do the wiring.
Are there single icons and icon packs?
Yes. Single animated icons (a lock toggle, a publish button, a walking figure, a delivery scooter, a star burst and a mute bell) are €9.99 each. Packs cost a little more: basket and cart icons, six web icons, eight travel icons, ten line icons and six faux-3D game icons.
Can I change the colours and shapes of these animated icons?
Yes. Size, labels, layout and behaviour are props and code you can edit freely, and every prompt explains how to recolour with CSS filters or remix the artwork itself in the free Rive editor and export it back into your project.
Credits
The animated icon artwork is by drawsgood, Nibolz, JcToon, philippsedov, rishi.kumar.id, from the Rive Community under CC BY 4.0. The components and prompts are by UI Motion Prompts.