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.
The two icons should have the same size
Please make sure to select 2 .svg files
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.
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.