How to use the exported icon?

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

If you plan on including multiple two-state icons in your web project, then make sure to remove the <script> tag from the <svg> and include its content in your .js file so that you do not duplicate the javascript code (the content of the <script> tag has to be included only once and it is going to work for all your icons).

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!

Please note that if the icons share CSS classes and mask IDs in their SVG code, the animated icon exported 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 accomplish this by importing the icons in Nucleo before animating them (Nucleo runs your icons through SVGO when you import them).

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.