The icon design process: 7 golden rules
In this section, we’ll go over seven key considerations to keep in mind as you design icons.
1. Mind the grid
Many things in digital design are governed by a grid. Icons are no different. When designing icons, you’ll want to pay close attention to the pixel grid and how your icon fits into it.
The easiest way to make sure your icons fit snugly into the pixel grid is to stick to whole numbers. Avoid decimal points at all costs—these guys yield blurry edges. Let’s take a look at what this looks like in practice.
Below, I drew a simple house icon and left the pixel grid turned on. On the left, you’ll see an icon made up of strokes that fit perfectly into the pixel grid. On the right, the stroke falls slightly off. You can tell by looking at the lines that make up the pixel grid—they cut right through the stroke.
Now, let’s look at the diagonals that make up the roof for a sec. These don’t sit perfectly on the grid. We wouldn’t be able to make them fit because the grid is made up of vertical and horizontal lines, no diagonals. In these cases, we make sure the starting and end points that make up the diagonal sit on the grid.
2. Look around first
It’s tempting to want to design a brand new, crazy novel icon or set. We’re creatives, after all! However, we’ve got standards we wish to adhere to. We’ve become familiar with specific icons that signify standard functionality.
Consider the little magnifying glass we see everywhere that says “search.” Magnifying glasses aren’t the only item that can say “search.” However, we’ve used them so frequently that they have now become the standard search icon. Using a different icon requires the user to learn something new, slowing them down as a result. This is not so conducive to a smooth user experience!
Before designing your icon, look around to identify any standards you might need to keep in mind as you work. Does this mean there is no room for creative freedom? Fortunately, it doesn’t! If the icon isn’t representing functionality governed by standards, we can let our creative juices flow. If it is, we can still give it a creative twist. As long as the icon and its function is still instantly recognizable, it’s perfectly OK to add your own design flair!
3. Don’t go detail crazy
We’re often slapping icons in tiny places, like the tab bar on an iPhone. As things get small, too much detail begins to get lost.
When you design, be strategic about the kinds of detail you choose to include. Go easy on the little parts and make sure your icons read clearly, even at small sizes.
4. Be consistent
When we design a set of icons, they should feel like a family. They won’t all look the same but will have similar visual attributes, making them feel related.
As you design, make consistent styling choices. If, for example, you’ve used rounded corners and ends in one icon, make sure you do so for all the rest. Styling, sizing, and the level of detail should all be consistent. This contributes to a coherent visual language—a crucial part of branding!
5. Mind the gap
Be careful with little details or elements that sit too close to each other. At a small size, items that are not spaced out carefully can be tough to read and will begin to lose meaning.
6. Test your work
The best way to make sure your icons communicate clearly and quickly with users is to test them. Once you’ve finished designing your icons, it’s good practice to run a quick test.
Show your icons to a friend or someone else on your team. Ask them to tell you the first thing that comes to mind when they see them. If it aligns with what you’ve intended to communicate, you’re in good shape!
7. Build with simple shapes
Everything can be broken down into basic shapes. Remember our house icon above? We designed with two rectangles and a triangle.
Once you’ve defined what your icon will be, try to break it down into simple shapes. This is the best way to begin to construct and simplify your icons.
Wanna see this all in action?