Create 2-state, SVG-powered animated icons

We just released the Icon Transition Generator, an online tool that generates SVG-powered icon transitions. The tool accepts two SVG icons and exports a single SVG file that includes the JavaScript code for the animation.

If you are using the Nucleo app, you can upload and preview the animated icons generated by the tool directly within the app! 🙌

In this article, we’ll take a look at the code behind the animation: we are going to create an icon that, on click, switches from one state (in our example, a search icon) to another one (a close ‘X’ icon).

The tutorial

These are the steps we will follow to create our two-state icon:
1) Create an <svg> which includes both icon states (in our case, search and close); each state will be wrapped in a separate <g> element to preserve a logical separation;
2) On click, we will animate each group according to the selected state (making sure to update the aria-hidden attributes of the <g> elements as well).

Let’s start combining the two icons in a single <svg>; the icons I selected have the same width and height to ensure the transition between the two states works properly.

Open the first .svg file (the icon you want to be visible by default — in our case the search icon) in your text editor of choice, and wrap the content of that icon inside a g.js-transition-icon__state element:

Make sure the icon has a proper <title> tag for accessibility.
Then do the same for your second icon.

Now copy the content of your second icon (do not include the <svg> tag) and paste it in the first icon file, right below the <g> element; you’ll end up with something like this:

Insert the icon in your HTML file. You are ready to animate it!

In the above code, note that we added:
- the class ‘js-transition-icon’ to the <svg> element; this will be used in JavaScript to target all two-state icons in your page;
- ‘style=”display: none;”’ to the second <g> element (in our example, the close icon);
- ‘aria-hidden=”true”’ to the second <g> element (so that the icon is ignored by assistive technology).

We are now going to need a little bit of JavaScript to animate our icon.

First, let’s define a TransitionIcon object, and its init() method:

Here’s what the above JavaScript snippet does:
- For each .js-transition-icon element, we create a TransitionIcon object;
- The init() method takes care of listening to the click event on the .js-transition-icon element;
- When a click is detected, the triggerAnimation() method is used to animate the icon.

Here’s what the triggerAnimation method looks like:

Here’s the final result:

The Icon Transition Generator

Luckily, you don’t have to worry about manually creating those icons! The Icon Transition Generator does exactly what we’ve explained in the tutorial.

The tool provides also some options to customize the animation.
Precisely, you can:
- select the type of interaction (hover or click);
- select the kind of animation (scale or rotation).

The downloaded icon will be composed of visual elements (two <g> elements, one for each icon state), and a <script> tag that includes the JavaScript code for the animation.

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

Finally, what best place to store your animated icons than our app? 😉

Note: in the Nucleo app, when you hover over an animated icon, you’ll see a ‘play’ symbol in the top-left corner of the icon, which indicates the icon has a <script> tag in it. You can click/hover over the icon to see it animating!

I hope this article was helpful! Feedback/suggestions are more than welcome!

For more tutorials on icon design and icon systems, make sure to follow us here on Medium or Twitter ✌