Icon Design      Scott Lewis in Tutorials | November 20, 2015

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.

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.

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.

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:

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 gridThe 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.

Circular and Square Layouts

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.

Vertical and horizontal orientations

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.

Diagonal orientation

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.

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.

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.