Icon design: 5 essential tips for your first pictograms

Just an icon hinscribblen. What should be hard about that? Well, it’s not easy. We’ll show you what to look for when entering the icon design.

Why are there icons?

Let’s start with a few basics. If Icon is mentioned here as a term, then we do not mean the small hand-painted wooden pictures with Christian motifs that have made it famous in Eastern European Christianity centuries ago. Rather, we are talking about small icons that represent objects or functions on a screen.

Icons debuted in 1981 on the Xerox Star 8010. If you look a bit into the Xerox of the sixties and seventies, you’ll wonder what innovations the company and its Palo Alto Research Center are responsible for. Not least the computer mouse is there to call. Basically, the complete concept of the so-called personal computer from Xerox comes from.

Xerox Star and the graphical user interface with the desktop metaphor. (Image: Digibarn)

The invention of the icons is part of the so-called desk metaphor (sometimes called office metaphor), with the typical desk should be digitally mapped. And what is clear if you are to image a complete desk on the then usual 12-inch screens? Exactly. You do not have much space.

Accordingly, icons were designed from the beginning as small pictograms that communicate as unambiguously as possible which object or function hides behind them. This communication task in all its difficulties we still have to deal with today. However, it is advantageous that we now create icons as vector graphics and are not set to pixel icons. This allows us to create a far more complex representation of what we want to communicate.

Nevertheless, most of the questions that need to be answered in terms of icon design have not changed significantly. The following tips will help you if you want or need to create pictograms.

Tip # 1: Icons must be unique and easy to grasp

Let’s start with the most important tip. An icon is only good if the potential user can immediately see what it is supposed to symbolize. If the icon is too artistic or abstract, that will not work. The benefits are gone.

Skeuomorphism and high resolutions provide the perfect reflection of reality. A perfect icon will not be the same. (Dribbble: Eddie Lobanovskiy)

Therefore, it is important not to be innovative; certainly not disruptive. The best symbol is one that the user knows and already associates with the object or function that it is intended to map. This consideration leads us to skepticism, which we thought was left behind with the Flat Design trend. Google combined the two worlds with the material design approach, so that an icon in the material design can still look flat, but also realistic.

If you do not want to live with the reminiscences of past times, even hates the skepticism, then I advise you to reconsider your point of view. Does not help, you can still use associative tricks and orient your icons to a known functional language. An example can be the lying triangle as an established metaphor for “play”.

Future-oriented icon design should also avoid metaphors that, while established, are unlikely to be in the foreseeable future. I hope you do not come up with the idea of using a 3.5 “floppy disk as an icon anyway. There are some such candidates, such as the CD icon.

Tip # 2: Do not draw on it, but research thoroughly

If you want to draw icons for a customer or a specific purpose, then take time for a thorough search. Which imagery has already been established in the targeted area? Which functional metaphors are suitable?

Of course, you should also visit the free and commercial providers of icon sets here. We do not have to reinvent the wheel completely. In addition, service designers such as icons8 have the same problems as you are doing now. If you find the perfect solution while browsing, then take it. You do not have to compulsively create yourself what already exists.

If you design for a client, it might be useful to include some of his brand or logo in the design. If your customer uses a star in the logo, you could also consider this star in the icon design. Look carefully what is offered in the specific case. With that, you can easily create a personal touch in the design and protect your symbols from accusations of arbitrariness.

Can not find a brand component, it can do a common topic. For example, a customer from the oil processing industry might find the added drop of oil appropriate for a consistent presentation. At this point it will sometimes be necessary to think around the corner.

In this context, the consideration of cultural features is also important. Some symbols, which we consider metaphorically successful, can have a completely different effect elsewhere in the world. An example of this is the owl, a trademark component of the social media helper Hootsuite. In western cultures the owl is associated with wisdom, in the east with stupidity. Hmm.

From the beginning you must realize that even with a small icon family, you will hardly be able to implement only the best association pictographically. It will come out of a mixed situation. One icon is the cognitive blockbuster, the other requires some thought. When in doubt, you design in favor of the overall consistency of the Icon family as a whole.

Tip # 3: Less is more – do not overload your icons

We are not competing for the most complex representation in the smallest space. Important is the comprehensibility, not the most detailed representation of the symbol itself. Ultimately, your icon is just a means to an end. If you can accomplish this purpose with the combination of two simple forms, then that is not a disadvantage, but an advantage.

That these so-called icons can classify someone at first glance may well be considered as excluded. (Dribbble: Fireart Studio)

Let me quote Einstein again here, who recommended making things as easy as possible, but not simpler. The already mentioned two forms that could make up your icon are perfectly fine if your icon is clearly recognizable. Unfortunately, it will often be the case that such a simple icon allows for different interpretations. Expand your design until you have a clear interpretation of the symbol.

On the occasion, you should make it a habit to keep icons usable even in the smallest possible sizes, if you need them exceptionally for the current customer order only in 512 x 512 pixels. What you can do, however, is to adjust the complexity of the icon view in terms of size. So your 512er copy could be more detailed than your 64er symbol. However, you should not exaggerate, because it is important that it remains recognizable that both copies belong to the same symbol family.

Tip # 4: Choose a style and stay with it

I’m not a friend of drawers. Therefore, I will now avoid writing a supposedly exhaustive list of current icon design styles. I also do not believe that the categorization of design services as a community brings us scary forward.

Of course, there are always several ways to visualize the same theme, as this section of the iconfundus of icons8 shows. I was looking for camera icons of any kind. (Screenshot: Dr. Web)

What I advise you is very simple. If you prefer sketching your icons, do it, but stay with them throughout the set. If you choose one, two or three colors, use them consistently and always in the same way. If you bring perspective or light and shadow, then always use the same perspective and let the light always come from the same side and cast the shadow on the same side.

That’s logical, you may think now. But I’ve just found in a new project the situation that an icon on an overview of six icons looked very different from the others.

Why did the designer make this break? Because he thought this icon was particularly suitable for this application. And he was convinced that it would be better to use this, in his view, optimal icon, even if it did not fit the other symbols.

I was on the side of the customer, so had the power to reject his design and eventually work with him to create an icon that harmonized better with the others, but in a way actually compromised.

Tip # 5: Work on the pixel exactly and do without text

Well, this tip actually consists of two independent recommendations. But both belong, in my opinion, to a beginner guide.

Text is often found in bad iconsets. Why is that? Very easily. Somebody wanted to save, to find a good metaphor. You may know this when you’re playing Pictionary in a social gathering. Actually, the concept to be guessed should only be visualized by means of drawing. The painter’s temptation to use plain text for lack of good ideas is always palpable. But the fact is that your icon is simply not good, if you can not do without the use of text.

Icons are always, not sometimes or mostly, no always created on a pixel-exact grid. The grid is dimensioned identically for each icon of the planned block. But that does not have to mean that you now draw all the icons on this grid spasmodically. Rather, your symbols may well be arranged in portrait, landscape or even diagonal, and some may be round.

Nevertheless, the grid remains square. The fixed point of the design is the optical center of your pictogram. The optical center does not have to match the graphically and mathematically determinable center of the object. This is about the visual sensation.

In order to be prepared for different shapes, you generally release a few pixels in the outer area of the grid. No icon is drawn to the extreme limits, even if it is a square icon and therefore could be drawn to the outer limits.

Lines and shapes always include whole pixels. This avoids blurring, which otherwise easily occurs when the icon is scaled.

Conclusion: Do it like Abraham Lincoln

“If I had eight hours to fell a tree, I would drag the ax for six hours.” This statement is attributed to the former US president and it is equally valid for the icon design.

Research, planning and preparation are important. The mere drawing of the pictogram is then only the last act of execution. More like lighting a campfire for the hours before wood was collected and piled up. So, in the woods!

Sources to read on:

  • 5 Killer Icon Design Tips | Creative Bloq
  • 10 Styles That Have Changed the Face of Icon Design | tuts Plus
  • Simplifying Icon Design | Claudia Driemeyer
  • The inventors of the desk 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.

(The post first appeared in March 2018 and has been kept up to date since then, with the last update in May 2019.)