Better Icon Design in 6 Easy Steps

When I review icons submitted to Iconfinder, I have a responsibility to our designers and to our customers to make sure all premium icons on the site are the highest possible quality. But the difference between “not quite good enough” and “premium quality” is often very small and usually involves minimal changes. In this article I have distilled my design guidelines into Six Easy Steps to Better Icon Design. The steps follow the basics of sound icon design and should be seen as a guide, not a dogmatic rule book. The savvy designer knows when he or she can break the rules for the greatest benefit.

The three attributes of an icon design

Icons that are well-designed follow a methodical and deliberate approach to the three major attributes that make up any design. When designing a new icon set, I consider each of these attributes in an iterative approach. Even if I’m only creating a single icon, these three attributes are still implied and can be extrapolated from a single design.

The six steps

  1. Always start with a grid — The benefits of different grid sizes is best handled in a post of its own. For the purposes of this article we will use a 32 x 32 pixel grid. The grid I use also contains some basic guides to create an underlying form that I follow for each icon design.
32-pixel grid
Circular and Square Layouts
vertical and horizontal orientations
Diagonal orientation
blocked-in-dogs-head

Angles

In most cases, I stick to 45-degree angles, or multiples thereof. Anti-aliasing on a 45-degree angle is evenly stepped (the active pixels are aligned end-to-end) so the results are crisp and the perfectly diagonal nature of this angle is an easily-recognized pattern, which the human eye likes very much. This recognizable pattern builds consistency across an icon set and unity within a single icon. If I must break this rule, I try to do so in halves (22.5, 11.25, etc) or in multiples of 15 degrees. Each case is different so I make the decision which to use on a case-by-case basis. The benefit of using halves of 45-degrees is that the stepping in the anti-aliasing is still fairly even.

45-degree angles

Curves

One of the most noticeable areas that I find can degrade the quality of an icon and make the difference between Premium/professional and amateur-looking are the curves. While the human eye can detect very slight variations in precision, human hand-eye coordination cannot always achieve a high level of precision. I rely on shape tools and the numbers to create curves as much as possible rather than try to draw them by hand. When I do need to create curves manually, I use Adobe Illustrator’s constraint modifier key (Shift) or, even better, VectorScribe and InkScribe by Astute Graphics for even more refined control over my bezier curves.

hand-drawn curves
3 pixel rounded corner

Corners

I don’t always use rounded corners, but when I do, I usually use a 2-pixel radius. But, the value you choose depends on the personality you want your designs to have. I use 2-pixel radius corners because the corners are clearly rounded but not so much that it gives the icons a more “bubble” look. Whether or not you use rounded corners is an aesthetic decision to be made as part of the overall character of a set.

Rounded dog's ear
Dog's head outlined

Pixel-perfection

Pixel-perfect is a popular buzzword in icon and user interface design these days, but it is important, especially when designing for small sizes. Anti-aliasing on the edges of an icon at small sizes can make the icon appear fuzzy. Space between lines that doesn’t align to the pixel grid will be anti-aliased and become blurry. Aligning the icon to the pixel grid makes the edges perfectly crisp on straight lines, and more crisp on precise angles and curves. As I mentioned in the previous paragraphs, 45-degree angles are second best to straight lines because the pixels used to define the angle are stacked, or stepped, end-to-end perfectly diagonally. The same is true of corners and curves: the more mathematically precise, the more crisp the anti-aliasing will be. It should be noted, however, that pixel-perfection is a less important issue, at least for anti-aliasing, for larger sizes and for higher resolution displays like retina.

Line Weights

When it comes to line weights, I find that 2 line weights are ideal, but 3 are sometimes necessary. More than 3 and a set can lose its cohesion. I prefer 2 pixel and 4pixel line weights. Ideally I try to keep every measurement in an icon to a multiple of 2. Occasionally an individual detail of an icon might require breaking this rule, but I try to stick to it as much as possible. In most cases, very thin lines are to be avoided, especially is glyph and flat icons. Unless you are deliberately creating Line style icons, you should not rely on lines to define shapes. You should rely on light and shadow to define shapes.

Line weights

Use Consistent Design Elements & Accents Across Icons

Hemmo de Jonge of Dutch Icon gave a brilliant talk at Icon Salon 2015 in which he spoke at length about this element of icon design. In his 2-year-and-counting icon system project for the Dutch government, Hemmo and his design partner incorporated a “notch” in each of the icons. Not every icon has the notch, but most do. This kind of accent, used conservatively but consistently across an icon set can really help tie the set together.

Notched element

Use Details and Decorations Sparingly

Icons should quickly communicate an object, idea, or action. Too many small details introduce complexity which can make the icon less recognizable, especially at smaller sizes. The level of detail you include in a single icon or in a set of icons can also be an important aspect of the character and identity of an icon/iconset. A good rule-of-thumb for determining the right level of detail in an icon/iconset is to include only the bare minimum of details needed to make the meaning clear.

Corgi head

Make it Unique

It seems that the number of very talented icon designers, creating really high-quality icon sets, many of them available for free, is growing every day. Unfortunately, a lot of those designers are relying way too heavily on following existing trends or copying the styles of the most popular designers. As creative professionals, we should be looking outside of the icon design industry to architecture, typography, industrial design, psychology, nature and to any other area we can find inspiration. Because so many icon sets look alike these days, it is even more important to make your designs unique. Uniqueness also helps make icons more recognizable, which is an important aspect of the identity of an icon.

dog with heart nose
Before and after icon designs

--

--

A blog about icons, illustrations, design and designers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store