Animate it · on every icon page
Animated SVG icons, from any icon in the library
Pick any of 4,309 icons and it comes apart into its pieces, which move one after another: drawn on, popped in, cascading, wiggling or floating. Preview every motion free, then download it as animated SVG or Lottie.
- Seven motions
- No JavaScript to play
- SVG, Lottie and .lottie
The animated library
All 4,309 icons, animated
Every icon in the library, each in the motion that suits it: gears turn, bells ring, hearts beat. Point at one to play it, or switch to Loop. New icons join automatically. Open any icon for all seven motions.
Loading 4,309 icons…
How it works
Three clicks from icon to animation
Open an icon
Find it in the icon library and choose a style and colours. Line is free.
Choose Animate it
Every motion plays side by side with your colours. The icon is split into its parts, each on its own layer with its own centre.
Download or edit
Download animated SVG, Lottie JSON or .lottie (Pro), or open it in Hub Motion Studio to change the timing.
The motions
Seven ways to bring an icon to life
Five move the parts one after another; two move the whole icon. Every one loops seamlessly: the entrances build, hold and leave, so each cycle starts as cleanly as the last one ended.
| Motion | What moves | Works on |
|---|---|---|
| Draw on | Strokes draw themselves, hold, then fade | Icons drawn with strokes |
| Pop in | Parts spring into place one by one | Every icon |
| Cascade | Parts drop in from above, in order | Every icon |
| Wiggle | Each part rocks on its own centre | Every icon |
| Float | Parts bob gently, a beat apart | Every icon |
| Heartbeat | The whole icon beats | Every icon |
| Spin | The whole icon turns, then rests | Every icon |
Formats
One animation, three files
Made by Hub Motion Studio's own exporters, from the same project.
- Animated SVGThe motion lives inside the file. It plays in an
<img>or inline, with no script. - Lottie JSONFor lottie-web and other Lottie players, on websites and in apps.
- .lottieThe dotLottie package: the same animation, compressed into one smaller file.
- Hub Motion StudioOpen the motion as a project: one layer per part, keyframes, easing and a timeline to change.
Free and Pro
Try every motion free
Preview and edit
No card needed.
- All seven motions on every icon page
- The Line style
- Edit in Hub Motion Studio
Download and use
Your HubToolify Pro plan, nothing extra to buy.
- Animated SVG, Lottie JSON and .lottie downloads
- Solid, Duotone and the other Pro styles, animated too
- Every Hub Motion Studio export
See Pro plans · Need the icons as React components instead? React icons.
Questions
Frequently asked
Can I animate any HubToolify icon?
Yes. Open any of the 4,309 icons and choose Animate it. The icon is split into its parts and each motion plays them one after another. Draw on needs an icon drawn with strokes; the other six work on every icon. Free accounts animate the free Line style; Pro adds Solid, Duotone and the other Pro styles.
Is it free?
Previewing every motion and editing it in Hub Motion Studio are free. Downloading the animation as an animated SVG, Lottie JSON or .lottie file is part of HubToolify Pro.
Does the animated SVG need JavaScript?
No. The animation is inside the SVG file, so it plays wherever the SVG is shown, including in an ordinary <img> tag, as the examples on this page do.
Can I use the animations in apps?
Yes. Download Lottie JSON for players such as lottie-web, or .lottie (dotLottie), a smaller compressed package of the same animation.
Can I change the timing or make my own motion?
Choose Edit in Hub Motion Studio. The motion opens as an ordinary project, one layer per part, with keyframes, easing and a timeline you can change, and the Studio's own exports.
What happens to downloaded animations if my plan ends?
Files downloaded while Pro was active stay licensed for the projects you made with them. New downloads need an active plan. The licences page has the details.