How to design icons for websites and print

Vector graphics

First thing first. Icons are vectors, not raster images. I mean they are not made as images with a set resolution at a specific size; nor scanned drawings turned into JPG nor made from photos, etc.. They must be made as Vector Graphics, which means they can be reproduced at any sizes. Now with this in mind, they will become part of a signage, an illustration in a magazine or an SVG on a website.

Choice of style

Icons can be filled or outlined shapes.
Filled shapes means they can be made of coloured shapes, either black or any other colours, although colours are not conditional to the understanding of the icon.

They can be outlined shapes meaning using only shape borders. These can be black or coloured, but again colours chosen are not what give the icon its inherent meaning.

Be prepared

Before jumping in the final design, it is important to prepare your idea on paper. This way you will be able to focus on the overall design. Technical challenges can stop you from looking at your design critically so to avoid making bad icons, it is best to work out the general concept on paper first. It doesn’t have to be perfect, just good enough to work out the main aspects. When ready, you can switch to the computer.

Don’t discriminate!

Images can be more powerful than words. Designers have a visual responsibility and cannot afford to perpetuate discriminations that in turn make other people suffer. So it is not right to just by represent things without considering what they mean on a deeper level.

For example, don’t discriminate by Gender. Women are not only nurses or caretaker, and men are not the only lawyers or business people…
Don’t discriminate racially too. Be very careful when representing a race, as it is easy to fall into backwards representations. Be aware of historical issues, and find ways to represent without racial implications.

Be universal

So you want your icon to be understood by most people. To do this, you cannot include any words because that would limit you to a specific language. You cannot base your concept on some specific object found only in particular places. You cannot use a combinaison of shapes which spoken would create a sentence, again due to the language barrier. (“Rebus” or “Riddle”). With all that in mind, your design is more likely to reach a greater number of people.

Simple & consistant

Effective icons do not include unnecessary details. At first you might find that you tend to add details to your icons which is normal. Just remember to go back over and over and each time ask yourself if something can be removed. If you know that removing a detail doesn’t change the meaning, then you can remove it. This process stops when you can no longer remove anything without risking loosing meaning.

Be consistant when creating your icon, especially if it is part of  a larger set of icons. Decide on the size of the borders, and stick to that size. Keep the same angles for rounded corners. Add the same spaces where you have spaces. Make your icons take up the same size on your board so they can be use next to each other as a whole.

Use a grid system

Best thing is to use the same grid for all your icons. Having a system of margins, sizes, etc… will make your icons consistant and professional looking. I recommend to use a 100 by 100 pixels (px) artboard, with 5px margins around. Add a grid inside your artboard to help you align elements. It can be 5px or 10px grid depending on what level of precision you prefer. I like a 5px grid.

Finally, you can decide to “snap” your points to the grid to help you be even more consistant. But I would still consider to turn it off sometimes as you are not limited only by this grid. You can allow yourself some freedom within that artboard. So be ready to turn it on and off as you design sometimes.

Think scale!

Your icon might start looking great as you design it on the computer. But then ask yourself if it is not just because you are fully zoomed on it and it is taking half your screen. Sometimes we forget to take a step back literally and see if it is as good at its original size, or even smaller or larger.

When it gets smaller, details become harder to see, and will tend to darken your icon with tiny elements too small to be seen. On the contrary, if blown up large, it might feel empty or too “light”. So go back and forth in scale until you find the right balance. Your icon should remain legible even very small, and keep all its information when super big.

Test your icons

Your icon is not ready before you test it. By this I mean both technically and semantically.
Consider printing you icon at different sizes to see if it performs as well. Turn it black and white if you designed it in colour and see if the meaning is still there.

For the semantic, meaning testing if other people see and understand the same as you, simply show it to people you know or people around you. Don’t be offended if some people think about different meaning, in the contrary find out why and see what can be done to correct this. Your icon will only get better after these challenging tests!

Publish them

I think if you made a great icon that works perfectly for your project, why not make it work for other people project? I believe that the world would benefit from better design all around. So you could participate in this and make your icon contribute to a better visual world.
Don’t worry about being copied, use your icons first on your projects and then publish them online. You will always be the person behind, and get credit for it.

There are quite a few icon repositories on the web now. My favourite is The Noun Project by far as it has thousands and thousands of icons, from crazy unique ones to more corporate fitting ones. You can create a free account and start sharing your icons with the world. You will make some beer money from this, as well as feel good about making the world better looking!