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.

Drop two .SVG icons here

The two icons should have the same size

Please make sure to select 2 .svg files

How to use the exported icon?

The downloaded icon is composed of visual elements (<g> elements), and a <script> tag with the JavaScript code for the animation.

If you plan on including multiple two-state icons in your web project, make sure to remove the <script> tag from the <svg> and include its content in your .js file; this way you won't duplicate the javascript code.

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.

arrow-left Back to Homepage

Icon management, solved.

Mac, Windows, All Downloads

Nucleo app preview