Today we’re going to create a dynamic icon library in Sketch. This could be a pretty complicated process, but we’re going to save ourself a lot of time and stress by using a plugin called Sketch Icons. Let’s dive in!
Sketch Icons
Sketch Icons is a plugin for Sketch which allows you to import a bunch of icons, then automatically set a color mask. Let’s walk through how that works.
1. Install the Plugin
Begin by downloading and installing the plugin. I personally enjoy using Runner to install my Sketch plugins, so you can use that method too if you wish.
2. Declare Some Colors
Start a new document and declare a few colors. Do this by making a few artboards and giving them suitable color names. Place a shape on each one, with whatever color you see fit, then convert each artboard into a symbol. You should end up with something like this:
3. Import Some Icons
I’m going to bulk import a few icons by going to Plugins > Sketch Icons > Import icons... Sketch Icons will ask what size I’d like the artboard for each one to be, so in this case I settle on artboards of 24px with padding of 3px. I also make sure the checkbox is checked to convert each one to a symbol, and that Add color mask is also checked.
As we’re using a color mask, we’re given the choice to take the initial color from a color picker, or from symbols in our own library. As you can see in the image below, I’m able to select the three symbols in my current document–perfect!
Once we’re happy with our settings, we click Continue and head over to select the icon files we want to import. Your icons will be added to your document, neatly arranged in suitably named artboards, and available as symbols.
4. Using Your Icon Symbols
If you look at the layers in the image above, each of these icon symbols is essentially a color layer, with the icon underneath acting as a mask.
When you add one of these icon symbols to a page in your document you can change its color using the color Override in the right hand sidebar. The color symbols already prepared are available in a handy dropdown.
Additionally, if you need to change any of the colors you set as symbols initially, you can go to that symbol, change the color of the rectangle within it, and that change will be reflected across all the affected icons in your document.
5. Setting Up An Icon Library
But let’s talk a bit about building a dynamic library. Recently we published a tutorial about using Sketch Libraries:
These libraries make single Sketch files available globally, including all the symbols and shared styles within them. To have your icons made part of a library, go to Preferences > Libraries > Add Library. Select your newly created icon document and it will be added to your libraries list.
Now you can create a new document (feel free to close your icon document too) and have all the icons, with their colors, readily available for use.
Conclusion
The Sketch Icons plugin gives us huge flexibility where managing icons in Sketch is concerned. This tutorial scratches the surface and has started you off in the right direction; let us know how else you work with icons in Sketch!
And before I go, check out some of the icon sets available on Envato Elements; all ready and waiting to be added to your dynamic Sketch icon libraries!
