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?
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
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.