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.

In the example images that follow in this article, I will rework an icon of a dog (a Corgi to be exact) that was recently submitted by an Iconfinder user named Kem Bardly. The icon was not quite good enough for Premium so I provided Kem with some easy pointers to follow and with a little rework, the icon was ready for approval as a Premium icon.

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.

1. Structure — Structure is the underlying form of an icon. If you ignore the details of an icon and draw a line around the major shapes, do they form a square, circle, horizontal or vertical rectangle, triangle, or a more organic shape? The most successful icon designs follow simple, recognizable patterns or forms. The primary geometric shapes — circle, square, and triangle — create a visually stable foundation for icon designs.

2. Character — The character of an icon is made up of the elements that are shared within a single icon and across an icon set. These elements are things like rounded or square corners, line weights, style (flat, line, filled-line, or glyph), color palette, and more.

3. Identity — The “identity” of an icon is its essence or what makes an icon unique. Identity determines whether or not it “works”. The cornerstone of how well an icon works is recognition or clarity: how easily a viewer recognizes the object, idea, or action it depicts. Character and Identity often overlap. Identity elements shared by several icons become part of the Character of a set.

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.

The outer 2 pixels of my grid are what I call the “No-go Zone”. I avoid having any part of an icon enter into this space unless absolutely necessary. The purpose of the no-go zone is to create some breathing room around the icon.

Part of the Structure of an icon is the general shape and orientation. If you draw a line around the outside edges of an icon — the bounding box if you will — the shape will generally be a square, circle, triangle, horizontal rectangle, vertical rectangle, or a diagonally-oriented rectangle.

Circular icons are centered in the grid. Circular icons will usually touch all four of the outermost edges of the content area, but not go into the “no-go zone” (but this is a common scenario for breaking that rule if some accent or minor element of the icon extends beyond the circle).

Square icons are also centered in the grid but do not, in most cases, extend all the way to the outermost edges of the content area. Take a look at the Square Layout image below. There are three concentric squares indicated by light blue, orange, and light green. Most of my icons will align to the square in the middle (the orange one in the image below). When to align to each square is determined by the visual weight of the icon itself and it just takes practice to get a feel for when to use which size.

Inside the 32-pixel square, you will notice the 20-pixel by 28-pixel vertical and horizontal rectangles. I loosely follow these rectangles for icons that are horizontal or vertical in orientation and try to make the dimensions of any icons oriented thus, to match the 20-pixel by 28-pixel dimensions of these rectangles.

Diagonally-oriented icons are aligned to the edges of the circular content area as seen in the image below. Notice that the outermost points of the saw are approximately aligned to the edges of the circle. This is an area where you do not need to be exact, close is good enough.

Remember, you do not need to follow the grid and guides exactly every time. As Hemmo de Jonge, better known as Dutch Icon, has said, “The essence of an individual icon outweighs the importance of set cohesion”. The grid is there to help you make your icons consistent, but if the choice is between making an icon great and following the rules, break the rules — just do so sparingly.

2. Start with simple, geometric shapes

Design icons the same way you draw sketches: by creating the rough shape of the major shapes with simple circles, rectangles, and triangles first. Even if my icon is going to end up being mostly organic in nature, I start with the shape tools in Adobe Illustrator. When it comes to making icons, especially for smaller sizes on-screen, the slight variations in the edges that result from being hand-drawn make an icon look less refined. Starting with basic geometric shapes helps make the edges more precise (especially along curves), helps me adjust the relative scale of elements within a design quickly, and insures that I am following my grid and form.

3. By The Numbers: Edges, Lines, Corners, Curves, and Angles

As much as possible without making your designs look overly mechanical and boring, corners, curves, and angles should be mathematically precise. In other words, follow the numbers and don’t try to eyeball or freehand it when it comes to these details. Inconsistency in these elements can diminish the quality of an icon.

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.

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.

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.

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.

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.

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.

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.

These simple steps should be seen as a starting point, not as a definitive guide. There is no single way to design icons. I have outlined in this article the basics of my own approach to design but other designers certainly have their own opinions and techniques. The best way to become a better designer is to look at as much stuff as you can, read lots of stuff, sketch regularly (I carry my sketchbook everywhere with me), and practice, practice, practice.