Icon design done right.

Auteur
Ewout van Lambalgen
Datum

head

Designing icons isn’t hard to do. But it is, apparently, hard to do right. There are a lot of things to keep in mind when creating a large set of icons.

But before we get into the details of what and how, we should first talk about what icons are. Icons are small abstract shapes that represent an idea. In UI design they can be used to make the interface easier to read. An icon is something to interact with. An intuitive visual that’s understandable through all cultures and languages. If used correctly, with a consistent icon set you can give a feeling of quality in your interface, to signal to your user that you’re a professional who knows what they’re doing.

Icons are a part of the UI. They should blend in, be actionable and easily understood at small sizes. Often clients will request an ‘icon’ that’s used more to just have a fun visual next to, say, a USP. These usually shouldn’t be icons, they’re ‘spot illustrations’ and can be richer in visual style than regular icons.

“Before you know it you have a horrible mishmash of differently styled icons in your interface”

Of course you could just download an icon pack from the internet and be done with it. Those packs are often missing some icons you might need for your specific use and you’ll end up downloading more icon packs to fill up the missing icons. Those icons have a different style from the first pack though. And before you know it you have a horrible mishmash of differently styled icons in your interface. Those packs are also not very unique and don’t always fit with the brand identity of your client. An icon set designed with airport wayfinding in mind would feel completely out of place at a Chinese supermarket for example.

Icon design is very much a precise job. Unlike web/interface design, there’s no front-end developer who’ll fix your smaller mistakes and inconsistencies later on. You have to make sure everything is perfect. From the stroke weights and corner radiuses to a consistent perspective and overall weight of the icons themselves.

Some things to keep in mind to design a consistent icon set:

1. Should this even be an icon

Before you start designing any icon you should always ask yourself if it should even be an icon. What is it going to be used for? In what context, Who’s the target audience?

If the icon is going to be used to just add an image to some text, it should probably not be an icon. A spot illustration would be more appropriate. When designing a set of icons that start to look more and more the same, for example different types of media (CD, DVD, Blu-ray), you should probably not try to create different icons for everything. It’s okay to use the same icon for different cases.

2. Define the style

style Different styles for the same icon (Departing flight)

When designing icons for a client, you’ll want the icons to fit in with the brand. For this you can look at a couple different things. The typography or the logo for example. Does it have sharp corners or is it more rounded, how thick are the strokes. The brand colours. Is it just one colour, monochrome, multiple colours or does it use transparency? Or if that’s not enough, have a look at the brand promise or the core values. What’s the tone of voice? Is it loud, soft, friendly, pure business, etc? This will all have impact on the style of the icon.

3. What size is it going to be used

Figure out what size the icons are going to be used. This does a lot for the amount of detail you can use. If an icon is going to be used inline in texts and buttons it’s probably going to be small and a lot of smaller details will go missing.

Always design the icon with the pixel grid in view. Even though you’re going to export the icon as a SVG vector file, you’ll still want to have the icon looking sharp and crisp at the intended size.

4. Put it on a grid

grid Examples of icons using the grid (rectangles, circle, square) while keeping the same overall weight.

To make sure all your icons have the same weight and feel like they’re from the same family of icons you should use an icon grid. These consist of a couple of rectangles and circles. You can see these as bounding boxes. The amount of pixels within each shape is somewhat the same. Stay within these shapes and your icons will feel like they all have the same weight. Google has a great icon grid for their Android/Material Design icons.

5. Stroke weights

Try to be consistent with stroke weights. Don’t use a 1px stroke on one icon and a 3.5px stroke on the next. They will feel unbalanced and foreign from each other.

stroke In use negative space feels heavier than positive space. That’s why a 2px negative stroke feels the same as a 2.5px positive stroke.

Keep in mind that negative space has a different weight than positive space. So using a 2px stroke would feel heavier as a negative stroke than as a positive stroke. Add a little weight to the positive stroke (ie. 2.5px) and it will feel like the same weight.

But don’t just use the same stroke weights for all icons in a set. Some icons can feel to heavy or light when using the same strokes as in different icons. Arrows, magnifying glasses, hamburger menu’s, check marks, etc. can feel really thin compared to more complex/solid icons. So these can get a bit more weight. Just don’t go crazy with all sorts of exceptions in weights.

6. Outlines or solid

outline-solid Even though these icons are part of a solid icon set, they could just as easily be part of an outline icon set.

When deciding between outline or solid icons always look at the bigger picture first. Will it feel at home within the design. Are outline icons heavy enough? Are solid icons too heavy?

Also consider that not all shapes work as one or the other. Outline icons tend to get really complex really fast and loose their recognisability and meaning in an interface. The same goes for solid icons. Not all icons feel solid. A smartphone or laptop icon might look like outline icons because of their screens.

7. Corners

corners Don’t go crazy on the amount of border radiuses in your set. Stick to one or two different radiuses for all icons. (some details may need a different radius of course, but for the bigger shapes, keep it simple and consistent)

Are all icons going to have hard corners, or are they all going to have a corner radius? It’s easy to loose this consistency in larger icon sets. Hard corners don’t always work on all icons and the same goes for rounded corners. Try to have a good rational behind the usage. For instance, only use rounded corners on icons that represent physical objects that are mostly rounded or organic shapes that wouldn’t be recognisable with hard corners. Just be consistent. Don’t use different radiuses for every icon.

8. 2D or 3D

2d-3d 2D icons: Is it a stack of coins or a double cheeseburger menu icon? The one on the right is clearly money.

Not all icons work in flat 2D shapes. A stack of coins for example isn’t recognisable from the side. It could just as easily be a hamburger menu icon. Not all icons work in 3D either. A leaf or piece of paper can look very flat/2D within a 3D icon set.

That’s why you should always think about the shapes and metaphors of your icons before starting the actual design proces. Will those metaphors work in 2D, will they work in 3D? Maybe you need to change the shape a bit. The stack of coins could change into a banknote with some coins next to it, seen from the top. The leaf could become a plant in a pot so it feels more 3D.

9. Colour

colour A single colour, monochrome with transparency and coloured icon on different coloured backgrounds. The coloured icon doesn’t work as well on all backgrounds and would need multiple versions with different colours to work. (Obviously the dinosaur has these colours to blend in with his surroundings. It’s just camouflage)

In most cases single colour icons are fine. Easy to design. And you can just use them in black or white or in your brand colours.

When going for multi-coloured icons always consider where the icon is going to be used. On a photographic background, the colours of the icon might not be as visible and you’ll need to design different versions of that icon for different use cases.

Some tips

Most icons need a label. Even when your icon seems completely clear and recognisable, it can still not be clear for everyone. The same icon can also have different meanings to different people.

Don’t use texts in icons. Especially not in small icons. It won’t be readable. It will only become a fuzzy mess. Just don’t do it.

tips Don’t mix side and front views of the same type of icons. Keep them consistent by only using the front or only the side view.

Be consistent in the way you show shapes. For example, if you have a set of different forms of transportation, don’t show a car and a train from the side and a taxi and a bus from the front. Show all of them from the front, or all of them from the side. But don’t force it. A bicycle isn’t all that recognisable from the front.

Don’t just use some social media icon pack you found online. There are way too many of those packs with antique Twitter icons. Always download the official icon/logo from the source. You don’t want your brand to be represented with the wrong logo, so why would you represent another brand with the wrong one?

TL;DR

Start on paper, think about the icon, should it even be an icon. What size is the icon going to be used at. Put it on a grid. Be consistent in your strokes, corners, the use of outlines, solids and 2D or 3D. And please don’t ever use free social media icon packs.

Keeping all this in mind, designing a consistent icon set shouldn’t be all that hard.

Tags