Sketch: A Perfect Icon workflow
Really quick, consistent way to use icon fonts in Sketch.
Sketch doesn’t offer a good solution for managing icons. So, I spent some time building an icon workflow to make it far simpler to use an icon library in all my projects.
My solution uses only one symbol, one artboard and one icon font. With this you can:
- Create a portable library of icons to use in all projects.
- Browse icons outside of sketch and import them, maintaining links to the original artwork.
- Share and sync the icons with team members.
And consistency!
Icon fonts: Quick summary
First of all, this workflow relies on a robust and well drawn icon font such as the Google’s Material Icons font or Font Awesome. Or, create your own font in Icomoon or Fontello.
Icon fonts are great because they scale as vectors, can be used on web and mobile apps very easily, and styling can be applied just like text. Management is simple for everyone, designer or developer; it requires only one font file to be installed and updated.
If you store the font file in a central location like a Dropbox you can share the latest icons with all your team very quickly.
We’re starting to use this workflow at Qumu and we really like it. I hope you will too.
The workflow
Construction of the base symbol
Your whole icon library uses one base symbol.
- Install an icon font. Restart Sketch.
- Draw a square artboard at a decent size.
- Place a text box inside it with the edges flush to the artboard bounds.
- Set the font to your icon font and insert any glyph.
- Save this artboard as a symbol called “glyphicon”.
So, the base symbol has a text box in it. This contains the default glyph, which I’ve set as a star. Just to make it clear, this is not an SVG or PNG graphic, this is a text-based glyph from a font.
My text box properties:
Height x Width: 17px *
Resizing: Float in place
Font size: 17px*
Line height: 17px*
Width: Auto and
Align: Center
Text color: Black*Set to same based on preferred size
Now, when you insert this base symbol in your workspace you can change your glyph using a text override as seen below.
The animation above shows my newly placed “Glyphicon” symbol instance. I am copying and pasting a new glyph into the “override” field on the right pane. (You’ll find out how I get glyphs in a minute).
Sketch shows the override field value with a question mark (because the GUI does not interpret the icon font here) but when you hit Return the glyph will immediately update in the working area.
We use this symbol as a “Base” symbol for all icons. So one Symbol is required for all your icons to live in, whatsmore your icons are stored externally to your project which is better in so many ways.
This forms the basic principle of my method. The benefits of this are:
- Management of only one base Symbol. Literally one. This can be copied between projects very easily.
- Not having to import SVG/PNGs and place them manually. It is perfectly placed in the middle of the artboard every time.
- Because all your icons are stored externally in the font file your project stays very clean and everyone can share the same asset.
Edit: Overrides made even easier
Tip: If you are using the Material Icon font, each glyph is named. So you can actually type this as the override. See some examples below.
This won’t work for all fonts though. Only if the icon author has kindly named them.
If a material icon has multiple words in it’s name (e.g. “add shopping cart”) use underscores (“add_shopping_cart”). Then it will show up fine.
Fontbook: Your handy glyph browser
To use the workflow you need to be able to paste the correct Glyph into the Symbol’s override box. Sketch doesn’t have a way of browsing glyphs like other apps. But there is a handy Glyph browser built into every Mac. Its called Fontbook.
Launch your handy glyph browser
- Press CMD+Space and type Fontbook into Spotlight.
- Find your icon font in Fontbook.
- Go to View > Repertoire from the toolbar to see all glyphs.
- Set the size in the top-right to a convenient scale. I use 18–24px.
- Copy and paste your Glyph from fontbook into Sketch’s symbol override field.
Fontbook makes a great glyph browser. Because it is external to the Sketch window you can browse and compare results without switching contexts. I have yet to find a simpler or more convenient solution.
Scaling it up
The method above is great for quickly placing icons, but it needs sizing and colour options. So here’s how I do that. I duplicate my base Symbols, rename and resize them to create some extra symbols with a range of styling combinations.
While this creates more options to choose from I also restricting myself to just a few options too. This actually is a good thing, it results in more consistency. Constraint is the mother of all design!
Storage
I have created a page named “Symbols / Icons”. This is where all the base symbols live (see top-left page menu above).
Saving sets of Symbols on separate pages is something I do as part of my workflow. This makes things very organised, whatsmore it makes “importing” your icon sets into new projects very easy — I can drag this entire page into another Sketch document and it will import them. It is super quick to do.
This page basically becomes a very lightweight library that I can use in all documents. The styles remain very consistent.
Edit: Sketch now supports Libraries so you can save your icon presets in an external file!
Naming convention
glyphicon / color size
This naming convention works for me because the symbols sort nicely in the menu.
I use the folder name “Glyphicons” rather than “Icons” to keep these separate from any other icon assets that might creep into my project. “Icon” is a very common name.
Sizes: xs, sm, md, lg, xl, xxl, etc
Colors: dark, light, mid, primary, success, danger, warning.
Example name: glyphicon / light xl
I find these classes very flexible. They also match the classes used by Bootstrap, which our design and development team use. They will understand them.
Tip: I set the background color of the artboards to the same as the icon color. This is to ensure the colors are visible in the “Insert Symbol” menu. If no background is set the preview is blank. (Make sure you disable “Include in Export” here too!).
Switching out glyphs, colors, sizes
You can then change color or size of your base symbol using the “Replace Symbol” dropdown in the sidebar. Even though you change the base symbol the glyph is kept in tact (text fields must be labelled identically).
Demo file
You can try it out. But if you like this method I encourage you to create your own presets to fully understand it. You will also gain a greater understanding of how Symbols work.
Symbols make Sketch great.
This is my icon workflow so far. It may develop over time, and would appreciate feedback on how it could be improved.
Thanks!
