Published on | Prototyping: From UX to Front End — Medium Valentin Chrétien

Generate a dynamic icons library in Sketch in less than 5 minutes.

Since the arrival of nested symbols and Sketch libraries, our worfklow has been incredibly improved.

Today, Sketch allows you to build libraries containing your colors, your icons or your components. It’s super convenient if you work in a team and on different projects.

There are a lot of methods to efficiently build your symbols and libraries.

One of these methods is to create a dynamic icons library. For those who are not familiar with this technique, I recommend you to read these articles.

This method is really powerful: it allows you to nest your icons in your components and thus change the icon and its color on the fly thanks to the right panel.

Sketch overrides panel allows to select and edit your icon.

This also allows you to avoid inconsistencies as much as possible. By applying your colors only through the right panel, you limit the use of new colors that do not belong to your initial palette.

Ok, fine. So, what’s the problem?

Creating a dynamic icons library is time-consuming!
To create it correctly, you will certainly go through these steps:

Create symbols with your colors 🎨👩‍🎨
Import your icons individually 😓
Apply on each of the icons a color mask (from your previously created color symbols) 😰
Sometimes, icons have multiple layers, so you need to assemble them to apply the color mask 😭

If you have a few hundred icons to import, be prepared to spend very long days repeating your actions…

… That’s why we have created Sketch Icons. 🤓✨

To avoid having to spend time doing line work, we have created Sketch Icons plugin that allows you to automate these steps.

⬇️ Import your icons with Sketch Icons

As basic as it sounds, selecting and dropping a group of icons in Sketch does not work. If you want to create symbols for each of your icons, you will have to import manually.

With Sketch Icons plugin, just go to Plugins -> Sketch Icons -> Import icons… and select your folder or your icons. You can also use the keyboard shortcut Cmd + Shift + I.

Set an artboard size, select a color library and import your icons.

And… Voilà! Your dynamic icons library is ready.

🎨 Apply a color mask on several icons

If in the past you have already imported all of your icons without making them dynamic, do not worry.

You can apply a color mask to an icon, or a set of icons, using this feature: Plugins -> Sketch Icons -> Apply a color mask… You can also use the keyboard shortcut Cmd + Shift + M.

Turn your imported icons into dynamic icons.

✏️ Replace several icons

To save you even more time, we have designed a feature that allows you to replace or update icons already imported into your library. You will find this feature in Plugins -> Sketch Icons -> Replace icons…

It will be useful if you want to edit your icons without losing their nesting in your components.

Replace your icons without losing their nesting in your components.

⌛️ Bonus tip: Organize your icons with Rename It

Once your icons are imported as a symbol, you will notice that they are displayed below each other in your symbol panel.

To tidy them quickly and efficiently, I use the famous Rename It plug-in created by Rodrigo Soares.

I select my icons by category and rename them in this way:

Tadaaaaa! You just created an entire dynamic icons library in less than 5 minutes. 🎉

Thanks for reading! ❤️🤗

Give some claps 👏🏻 if you enjoyed the article, it might encourage us to keep creating tools!

Did this plugin save you a lot of time? Feel free to share your experience on Twitter! We love your feedback.

Introducing Sketch Icons was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Introducing Sketch Icons

Cool stuff, every week

More Articles