6 Tips for Designing Crisp, Readable Icons

After designing hundreds of vector icons that render beautifully at 14 pixels or less, I've learned a few things about designing crisp, readable icons. Here are a few of my secrets.

How Vectors Become Pixels

Before we start, let's chat a bit about how an icon font goes from a vector to individual pixels. Basically, it overlays your vector on top of your pixel grid, then looks at how much of the vector shape lies in each individual pixel. If the pixel has no vector shape overlaid, it renders as 100% of the background color. If it is 100% full, it renders as 100% of the vector shape color. When the pixel is exactly half full (or, ahem, half empty), it would render as 50% transparent. (Real font rendering is a good bit more complex than this, but this model will serve us for now.)

1. Render Crisp Straight Lines

This one is the most straightforward. When your lines are straight, you can make sure your icons are perfectly crisp at 14px. If we have lines that are exactly 1 pixel thick, we have a choice for how to render them. Let's look at the first example where we want to create a series of vertical lines that are each 1 pixel wide and 1 pixel apart. If we do it perfectly wrong, we can actually end up with a square with 50% opacity and no indication that we intended to render vertical lines:

Half-pixel offset in vector design (left) causes image to render blurred at 50% gray (right).

However, if we align the edges inside the pixels correctly, we can get perfectly crisp edges:

No pixel offset in vector design (left) causes image to render crisply (right).

2. Render Crisp Diagonals

Diagonals turn out to be a bit more complex than straight lines. In the good ole days of pixel editing, you could get a crisp diagonal by stair-stepping down an edge. Let's see what happens when we do something similar with our vector shape, creating a triangle with points at pixel corners:

Vector design splits pixel directly in half (left), causing image pixels to render blurred at 50% gray (right).

This makes sense when we think about it. We've split the line of pixel perfectly in half, so of course it renders blurred at 50% opacity! But if we shift the line any direction a half-pixel, we'll improve the result. We'll get one set of pixels that are 12.5% gray and another set that's 87.5% gray. Visually, that's pretty close to our stair-step, and we can keep our straight line:

Vector design splits offset by a half-pixel (left), causing image pixels to render crisply at 87.5% and 12.5% gray (right).

3. Keep Outer Edges Crisp

If you're choosing the width of a line, use whole pixels when you can to render crisp lines. But if you need a fractional width for a border, make the inner border blurry instead of the outer. This improves the crispness of the icon, as the eye is first drawn to the outer border.

Vector design offset by a half-pixel on the outside (left), causing blurred pixels on the outer border (right).

Vector design offset by a half-pixel on the inside (left), causing blurred pixels on the inner border (right).

4. Pathfinder is Your Friend

Often icon shapes quickly become complex and layered, but you'll need to get them down to just a single layer for consumption by your favorite font editor. Illustrator's Pathfinder tool (or the Sketch equivalent) is your friend. It allows you to easily take layers of shapes and do lots of helpful things like combine, find intersection, minus-front, and lots more. Learn it. It's invaluable.

5. Remember Retina, but Design for Non-Retina

Retina displays are gorgeous. And icon fonts are a great way to take advantage of them. But when creating icons, I recommend designing for non-Retina displays. If the icons look good on non-Retina, they'll also look great at 4x the resolution. Our examples above would all render perfectly crisp on Retina, but aren't nearly as good as they can be on non-Retina displays.

6. Experiment!

Most often, your shapes are more complex than straight lines and 45° diagonals. The best way to know how an icon is going to render at 14px is to just give it a shot and iterate, learning along the way. When designing an icon for Font Awesome, it isn't uncommon to go through twenty iterations and spend 8+ hours on a tricky icon. But it's worth it in the end to create crisp, readable icons that render great at small sizes.

This article builds off the seminal work of GitHub designer Cameron McEfee in his article The Making of Octicons. If you haven't read it, start there.

About Dave Gandy

Dave is a recent dad, web product designer, and the creator of Font Awesome.

fontawesome.iodavegandyPosts