The basic flow
- Click an icon in the gallery to select it
- Set the color, export size, speed and loop count in the panel on the left
- Download it as an animated SVG, a static SVG or a PNG
Cards in the gallery play three times when they scroll into view, then stop. Hover a card, or press “Play all”, to watch again.
Which format to pick
| Format | Animated | Best for |
|---|---|---|
| Animated SVG | Yes | Sites where you can host files. Around 1KB and scales without losing quality |
| Static SVG | No | Design tools and print. Stays editable as a vector |
| PNG | No | Anywhere SVG is not available. The background is transparent |
Embedding the animated SVG
Upload the file to your server and reference it from an img element. That is all it takes.
<img src="/assets/check-animated.svg" alt="" width="48" height="48">
The animation lives inside the file, so there is no extra CSS or JavaScript to add. It also animates when
loaded through a CSS background-image.
Using it in WordPress
WordPress blocks SVG uploads by default. This is deliberate, because an SVG file can contain scripts. To allow it you need one of the following.
- Install a plugin such as Safe SVG
- Add SVG to
upload_mimesin your theme’sfunctions.php
If you cannot change that setting, use the PNG instead (it does not animate).
License
Icons generated with this tool are free to use, for personal and commercial projects alike.
- ✅ Free for commercial use
- ✅ No attribution required
- ✅ Modification allowed (color, size, shape)
- ❌ Redistributing or selling the icons themselves as an icon pack is not allowed
The only thing that is off limits is handing out or selling the icons as a product in their own right. Using them inside client work or your own service is completely fine.
FAQ
Can I change the icon color?
Yes. Use the icon color setting and the exported file picks it up. You can also open the downloaded SVG in a
text editor and edit the stroke and color values.
Do the speed and loop settings apply to the downloaded file?
They do. Both are written into the CSS inside the animated SVG, so the icon behaves the same wherever you embed it. Cards in the gallery always stop after three plays regardless of the setting.
Can I change the stroke width?
Not from the tool, but you can edit stroke-width="2" in the downloaded SVG to adjust it.
Will more icons be added?
Yes, more are added over time, and they are covered by the same license.
I want CSS code rather than a file
This tool focuses on downloadable files. If you want code to copy and paste, try the
CSS Animation Gallery or the
CSS Hover Effects Gallery. That said, opening a downloaded
animated SVG in a text editor shows you the @keyframes directly.