Icon Design: 5 Essential Tips to Get You Started

Just scribble down an icon real quick. What's so hard about that? Well, it's definitely not easy. We'll show you what you need to look out for when starting with icon design.

Why do Icons Exist?

Let's start with a few basics. When speaking of icons, we don't mean the small hand-drawn wooden images with Christian motives that were famous centuries ago in Eastern European Christianity. Instead, we're talking about the small symbols representing objects or functions on a screen. The latter debuted on the Xerox Star 8010 in 1981. If you look into the Xerox of the sixties and seventies, you'll be surprised which innovations the company and its Palo Alto Research Center are responsible for. The computer mouse is one of them. Basically, the entire concept of the so-called Personal Computer was created by Xerox. [caption id="attachment_104274" align="aligncenter" width="737"] Xerox Star and the Visual User Interface With the Desktop Metaphor. (Image: Digibarn)[/caption] The invention of icons is a part of the so-called desktop metaphor (also known as office metaphor), which was used to display the typical digital desktop. And what happens when you're supposed to display an entire desktop on screens that used to be about 12 inches at most? Right. You don't have a lot of space. Accordingly, icons were designed as small pictograms trying to communicate which object or function they represent from the very beginning. Today, we still need to deal with this task and all of its difficulties. However, we have the advantage of being able to create icons as vector graphics, meaning we're no longer limited to pixels. This allows for a much more complex display of what we want to convey. Nonetheless, most issues that have to be dealt with during icon design have not changed. The following tips should help you if you want or have to create pictograms.

Tip #1: Icons Have to be Clear and Easy to Understand

Let's start with the most crucial piece of advice. An icon is only useful when potential users can immediately tell what it is supposed to represent. If the icon is too artistic or too abstract, that won't work. There goes the utility. [caption id="attachment_104273" align="aligncenter" width="800"] Skeuomorphism and high resolutions allow for the perfect representation of reality. That alone doesn't make an ideal design, though. (Dribbble: Eddie Lobanovskiy )[/caption] Thus, it is important not to try to be innovative; and definitely not disruptive. The best symbol is one the user is familiar with, and already associated with the object or functions it is meant to represent. This thought leads us to skeuomorphism which we thought we had left behind with the flat design trend. With the Material Design approach, Google united both worlds, allowing an icon in material design to look both flat and realistic at the same time. If you don't want to live with the reminiscences of past times, or even hate skeuomorphism, I recommend reconsidering your standpoint. If that doesn't help, you can still take some associative measures, and orientate your icons towards popular function language. An example for this would be the lying triangle as an established metaphor for "play." [caption id="attachment_104271" align="aligncenter" width="683"] Skeuomorphism in a modest form. (Dribbble: Creative Mints)[/caption] Future-oriented icon design should avoid metaphors that were established once, but are unlikely to remain established in the near future. I hope you wouldn't think of using a 3.5” floppy disk as an icon as it is. There are a few examples like that; a CD symbol, for instance.

Tip #2: Don't Just Start Drawing, Research is Key

If you want to draw icons for a client or a particular purpose, take your time for some proper research. Which image language has already been established in the area you're going for? Which function metaphors come to mind? Of course, you should also take a look at both free and commercial providers of icon sets. We don't need to reinvent the wheel. Additionally, the designers of services like icons8 have already gone through the same troubles that you're dealing with. If you happen to find the perfect solution there, take it. You are not forced to create something that exists already. When designing for a customer, it could make sense to integrate a part of his brand or logo into the design. If your client uses a star in the logo, you could consider that star as a part of each icon design. Just look at what fits with the current case. This makes it easy to add a personal touch to the design while protecting your symbols from being called arbitrary. If you can't find a brand component, a shared topic can do the trick as well. With a client from the oil industry, a drop of oil could be a good choice for a consistent theme. Here, you'll need to think outside the box now and then. In this context, looking at cultural characteristics is essential. Some symbols that we consider a success could have a very different effect somewhere else. An example would be the owl, which is a part of the brand of the social media helper Hootsuite. In western cultures, the owl is associated with wisdom, while eastern cultures associate it with stupidity. Hmm. From the very beginning, you have to be aware of the fact that, even with a small icon family, you won't be able to realize the best association at all times. This will result in a melange. One icon is a cognitive blockbuster; the other takes a bit of thinking. When in doubt, just design in a way that maintains consistency across the entire icon family.

Tip #3: Less is More - Don't Overload Your Icons

We're not competing for the most complex display on the tiniest bit of room. What matters is the comprehensibility and not the most detailed display of the symbol. After all, your icon is just a means to an end. If you can achieve its purpose with the combination of two simple shapes, this is not a downside, but an advantage. [caption id="attachment_104270" align="aligncenter" width="800"] I think it's safe to say that nobody would be able to classify these so-called icons at a glance. (Dribbble: Fireart Studio)[/caption] Let me quote Einstein, who recommended to make things as easy as possible, but not any easier. The previously mentioned two shapes to form your icon are completely fine if they make your icon unambiguously clear. Unfortunately, an icon of that simplicity often leaves room for different interpretations. Add complexity to your design until you have guaranteed an unambiguous interpretation of the symbol. You should also make it a habit of yours to keep icons usable at small sizes, even if you only need it in 512 x 512 pixels for the specific commission. You could adjust the complexity of the pictograms to the screen size, though. Your 512 x 512 version could be more detailed than the 64 x 64 symbol. In any case, you shouldn't take it too far as you still want people to know that both versions belong to the same icon family.

Tip #4: Choose One Style and Stick With It

I'm not a fan of drawers. Thus, I'll avoid writing a seemingly conclusive list of all current icon design styles. I also don't think that the categorization of design services helps the community in any way. [caption id="attachment_104269" align="aligncenter" width="1024"] Of course, there are always multiple ways to visualize the same topic, as shown by this excerpt from the symbol collection of icons8. I was looking for any camera icon. (Screenshot: Noupe)[/caption] What I'd recommend is very simple. If you want to draw your icons in a sketchy style, do it, but stick to this style throughout the entire set. If you choose one, two, or three colors, use them consistently. If you make use of perspective, lighting, or shadows, always use the same perspective, make the light come from the same direction, and put the shadow in the same spot. You may think this is logical. However, in a new project, I just saw an icon looking completely different from the others in an overview of six symbols. Why did the designer do that? Because he thought this icon was especially fitting for the case at hand. And he was convinced that it was better to use this singular icon that he considered being optimal, even if it doesn't fit with the other symbols. I was with the client, so I was able to turn down his draft and create an icon in collaboration with him, which harmonized with the others while being an actual compromise at the same time. But, that's okay, because it had to be.

Tip #5: Be Pixel Perfect, and Forgo Text

Well, this tip basically consists of two independent recommendations. In my opinion, both of them belong in a beginner's guide, though. Text is very common in lousy icon sets. Why's that? It's simple. Somebody didn't try to find a good metaphor. You might know this from playing Pictionary with a few friends. Normally, the term the others need to guess is meant to be visualized by drawing. The temptation of using text when lacking good ideas to draw the word at hand is always there. However, it is a fact that your icon simply is not right if you can't forgo the use of text. Icons are always - not sometimes or most of the time - created on a pixel-precise grid. Here, the grid for each icon of the set should be dimensioned identically. However, this doesn't mean that you have to draw all icons consuming all of this grid. Instead, there's no problem in having some portrait mode, some horizontal, diagonal, or even round icons, leaving space of the grid unused. The grid remains square nonetheless. The ledger of the design is the visual center of your pictogram. The visual center does not need to match the graphically and mathematically determined center of the object, though. Here, it comes down to visual perception. To be prepared for different shapes, always leave free pixels in the outer parts of the grid. No icon should touch the borders, even if it is a square pictogram that could do that with without any issues. Lines and shapes always include whole pixels to avoid blurs which otherwise easily occur when scaling the icon. Conclusion: Do it Like Abraham Lincoln "If I had eight hours to chop down a tree, I would spend six of those hours sharpening the ax." This quote is said to originate from the former US president, and it surely also applies to icon design. Research, planning, and preparation are important. Drawing the pictogram is just the final part of the act. It's like igniting a campfire that took hours of collecting and stacking wood. Come on, let's go to the forest! Other Related Sources:

• 5 Killer Icon Design Tips | Creative Bloq
• 10 Styles That Have Changed the Face of Icon Design | TutsPlus
• Simplifying Icon Design | Claudia Driemeyer
• The inventors of the desktop metaphor | Xerox
• How to Design a Top-Quality Icon | Creative Bloq
• 6 Easy Steps to Better Icon Design | Smashing Magazine
• If you want to learn everything about icon design, get the Icon Handbook.