Go to homepage

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 SVG icon contains the two icons (<g> elements), a <style> tag and a <script> tag with the code for the animation.

Each animation effect (e.g., rotate) use the same <style>. If you plan on including multiple two-state icons with the same effect (e.g., two animated icons with rotate effect), remove the <style> tag from the SVG and include its content in your CSS file so that you don't duplicate code. The same applies to the <script> tag

Important: the animation won't work in UI tools (e.g., Figma and Sketch). The animated icons should be integrated in web projects.

Import and preview animated icons in Nucleo

If you are using the Nucleo application, you can import and preview the animated icons directly within the app!

You can also create animated icons in the application, then export them as HTML/CSS/JS, Vue.js or React code.

Cookie Compliance

We use cookies to give you the best possible website experience. Learn more.