Sketch Quick Tip: Avoid sub-pixels on the outline icons

I’m quite sure you’ve encountered the following situation. You’re designing an outline vector icon with an uneven border width, but it turns out blurry. The next few lines come especially handy when you’re about to design very small icons and the best option is to choose 1 px border width.

To begin with, always make sure you turn on ‘Show Pixels’ on 'Zoom' panel located under ‘View’ –> ‘Canvas’ (^P) to see how your icon is laying on the pixel grid.

If you’re creating icon as a closed shape, you can select border position to be either outside, in the centre, or inside the path. Let’s take this ‘Message’ icon as an example:

This small trick helps you avoid sub-pixels in a closed path. Yet in most cases you’ll need to use an open path for at least a part of the icon. Let’s draw a line of text inside our icon:

When you’re designing a path with uneven border width aligned to the pixel grid, the result looks blurry. What’s the problem? It happens because the border has a centre position with the vector path. We need to move the path by 0,5 px to get it in-between the two pixel edges.

So how can we fix it? There are a couple of ways:

• append the ,5 to the Y position input,
• use Move Half Pixel Sketch plugin,
• double-click on the path, select all anchor points you want to move and drag them to the desired position,
• click on the path you want to move and select 'Rotate' (⌘⇧R), then fine-tune it by moving it to the right position.

My recommendation to you is to try them all. You'll find out what's the best alternative when fighting with sub-pixels. I usually fine-tune a path using 'Rotate'. Yes, I know it sounds a little bit unconventional, but it proves to be the fastest and the most convenient way–at least for me.

Hope this helps!