Icon Transition Generator
Create a snappy transition between two icons and download the SVG code. Upload the generated code to Nucleo or import it into your web project.
How to use the exported icon?
Import and preview animated icons in Nucleo
If you are using the Nucleo app, you can upload and preview animated icons directly within the app!
Note: if the selected icons have the same CSS classes and/or mask IDs, the exported animated icon may look corrupted when used in the browser or imported in Nucleo. Make sure to inspect the code and remove unnecessary classes or IDs. You can do that by importing the icons in Nucleo before animating them (Nucleo runs your icons through SVGO).
Learn how to create 2-states icons
If you want to learn more about the script that powers the animation, take a look at this tutorial on our blog.