Preparing and Exporting SVG Icons in Sketch

Published in

Design + Sketch

8 min readFeb 7, 2017

This article is going to assume that you already understand the fundamentals of icon design. And focus on how to prepare and export them for usage on Web, iOS and Android. We will use Sketch to organize, manage and export the icons.

We will also focus on monochrome icons that can be tinted dynamically on all platforms.

🎉 🎉 Sketch 42 🎉🎉

I started writing this article before Sketch 42 was released. It appears they have made some significant improvements. That have actually changed my workflow.
1. Pasting from illustrator, snaps to the pixel grid much more consistently.
2. Changing the fill-rule is much easier now. (more on this later)

🖋 Starting with Illustrator

Before diving into sketch I wanted to start with illustrator. I’ve been using illustrator for 15 years and some habits are hard to break. I am just way faster with the pen tool in illustrator than sketch. I typically design my icons in illustrator and move them over to sketch.

Reasons for NOT using illustrator for the whole process:

1. Illustrator files are limited to 100 artboards. If you have a large iconset you can’t even keep them in one file.

2. Bulk exporting is limited.

3. If your team uses sketch for design, you will want them in sketch anyway

🚦 Let’s Get Started

I will be designing the icons at 24x24. I like to create a 24x24 artboard for each icon.

If you are like me, you tend to mix paths and shapes to create the icon. In the end we will want to convert the strokes into paths. And simplify the paths down to single shapes.

Outline Paths

You’ll want to convert any paths in to shapes.

Merge Shapes

Merge all shapes in to their simplest form. You should be able to select the entire icon with one click.

💎 Moving over to Sketch

Lets start by creating a 24x24 artboard for our icon. And add a 24x24 square.

If you have read any of my other articles you will know I like to add guides to my symbols. This will also serve as a bounding box for the symbol.

Lets Group this shape and Name it “Guides”, then group it again.

This will create the folder structure for our Symbols.

Now would be a good time to think about a naming convention for all of your icons as well as the symbols.

Here is an example of a naming convention I have used in the past. I chose to keep my symbol names slightly shorter then the exported files. We can use forward slashes to create hierarchy in both exports and symbols.

We will use the artboard for exporting and the layer group will become our symbol.

Importing from Illustrator

Now that we have our naming conventions and document structure sorted out. Let’s get back for importing the icons from illustrator. Start by copying and pasting our icon from illustrator to sketch.

Ok that one looks pretty good but lets take a look at a more complex shape

Well thats not quite what we were expecting, lets take a look at the layer list.

There are two square shapes that should not be here. These are some artifacts from illustrator, we could probably go back a fix it there. But its just as easy to fix it here in sketch. Simply delete the layers.

Looking better but the ultimate goal is a single combined shape. We’re going to merge all the layers. The easiest way to do this is to select all the layers and hit the union tool.

Once again we broke our icon so now we need to reorganize our layers and union types. We will also need to change the fill rule if we want to use these svg icons in android.

😕 What in the hell is Fill-Rule?

I thought the same thing when my android dev told me that my svg icons were not working. My first reaction was to open the svg in a text editor and delete the attribute. But that didn’t work, so I had to do some research.

Fill-Rule is an SVG property that basically defines how to determine what shapes are filled or subtracted from the shape. The default svg value is “nonzero”, and this is what Android requires. Unfortunately Sketch uses “evenodd”. Luckily Sketch provides all the features we need to convert our shapes from “evenodd” to “nonzero”. And its now even easier in Sketch 42

Let’s take a minute to understand how fill-rule works.

Fill-rule = “evenodd” starts from the outside of the shape and counts each path towards the middle, even paths get filled and odd paths are subtracted.

Fill-rule = “nonzero” means that any path drawn in the clockwise direction will be filled and any drawn in the counter clockwise direction will be subtracted.

And when I say drawn in a specific direction I literally mean the direction in which the points were drawn.

Now we typically don’t hand draw every point in our shapes, but it is important to understand how it works so we can fix our shapes when they break.

Luckily Sketch included a feature to change the fill rule. There is a cog icon next to the fill in the inspector.

Let’s go back to our “news” icon and change the fill rule to nonzero.

Great, still broken! Now this is another change I have noticed in 42. We need to make sure the layers are in the correct order. So I moved the outer most layer to the bottom. And changed the boolean types. Making sure that the subtracted areas are set to subtract and filled areas are union.

🗒 As a side note it appears that Sketch 42 fixes the path direction for us. In the past this was not the case, we would have had to either use the horizontal flip tool, on symmetrical objects. Or there is actually a reverse path option under Layer > Paths > Reverse Order.

So that’s it our Icon is complete, I have two final steps before exporting.

Because the default black is not #000000 in Illustrator and I always forget to change it. I like to apply a black layer style that I named ‘icon black.

And Finally lets create a symbol

You’ll want to select the artboard when exporting. Remember we named them according to out desired file structure.

You can now simply export PDF’s for iOS and SVG’s for Web and android at 1x to avoid all the screen density variations.

⚠️ Wait before we export any SVG’s ⚠️

Be sure to install the SVGO Compressor plugin by Bohemian Coding. This is a very important step and will fix 90% of your SVG issues.

https://github.com/BohemianCoding/svgo-compressor

Ok That’s It 💥

So there we have it! A beautiful pixel fitted SVG Icon Set with 24x24 bounding boxes. Monochrome with transparency so they can be tinted dynamically on Web, iOS, Android and even Sketch (Kind of 😉).

Pro Tip: You can tint black icons, but placing a colored shape above them and changing the blending mode to screen. Your background must be white.

A couple final notes on implementing your icons

Web

Because we have not strokes in our icons we can tint them by simply changing the fill in CSS. This also works great with svg sprites.

Android

You can use this tool to test your svg icons http://inloop.github.io/svg2android/

iOS

While the exported PDF’s are vector and xcode will generate the 2x, and 3x assets for use. If you want to use your icons at different sizes you will need to export them as separate pdfs.