Icon design

An icon set is a set of small, clear, recognisable illustrated symbols. In UI design, these are used to symbolise for instance navigation items, call to actions or warnings. Good icon design is legible. A very important rule is the smaller the icons will be displayed, the less detail you can use to keep it legible. Larger icons can have more details and become more illustrative.

Why you should use this?

A good, legible icon set can really improve usability in a digital product. A layout becomes more scannable and a good designed icon makes you recognise it and find quickly what you’re looking for.Icons are a part of your visual identity. If you choose to make icons with a characteristic style, it can become a valuable part of your visual identity.A consistent style also improves your visual style by making it balanced and less messy.

Deliverables

All icons in SVG format, ready to use for development
An Illustrator master file, containing all icons
A template and design guidelines to design new icons in the same style

How it works

Research and sketching

Research the existing visual style. Does it already contain icons?
- If yes, collect all of them. Study their style (outline, solid, rounded corners, etc.) and see if they are consistent.
- If no, that’s a clean slate for you! Maybe there are illustrations or a typographic style you can take into account. But also, check out some benchmarks from the competition. How are they using icons, what can we learn from them and how can you make your icons stand out?
Make an inventory of which icons need to be designed. If possible, categorise them.
If existing icons need a redesign, start with those.
Make some rough first sketches on paper to collect lots of ideas for the icons.

Using Illustrator

If you start designing in Illustrator, you can use our icon design template.
A grid can help to keep the icons balanced. Keep in mind the visual weight of the icons. For instance, square shapes appear heavier than circular shapes. Read more about this in this Medium article about optical effects in user interfaces.
Make a wide variety of iterations in the sketches and iterations section to determine the icon style. You can explore if you want solid or outline icons, rounded corners, the weight of the stroke, etc.
If you decide on some final designs, you can place them in the small square artboards and adjust them to the grid
Give the blue bar the right category name
Click on the artboard tool to show the artboard names. Give the artboards the right names.
Don’t forget to hide the grid layer before exporting.

Icons on the grid, adjusted to get the same visual weight

Exporting your icons

Export the icons via Export > Export for screens or ⌥⌘E

Select the artboards you need to export, leave out the sketches-iterations artboard.
Choose the right location for your icons. This would be your assets folder. If you have a lot of icons, you can choose to select the option‘CreateSub-folders’. It creates a sub-folder in your assets folder.
Choose the format SVG and… export!
Check in Finder if the icons look good

Optimising your icons

Open the SVG file in a text editor.
You can reduce the amount of text by using the tool SVGOMG

Open your SVG. In the ‘Markup’ section you can see the reduced code. Reduced code = reduced file size = less loading time!
Copy the reduced code and replace the code in your text editor with this code. Save the file.
Check in Finder if your SVG still looks good. You now have the same icon illustration, but the file size will be a lot smaller.

Tips & tricks

Give the artboards in Illustrator a clear name, discuss this with development if necessary. When you export from Illustrator you can use the artboard names as file names.
If you use even numbers like 2, 4, 6 px, the shapes will be as sharp as possible.
Try to avoid using 1px lines. For details which aren’t that important you can use 1px, but when it’s not important think of leaving the details out.
It depends on the use of the icon, wether it’s better to convert strokes to outline or not. Discuss with your developer what is best suitable for your icons.
When using an icon font, always convert to outlines!
Make the shape as flat and simple as possible. Try to avoid using masks.
Put the icons in context. When you know icons will be placed next to each other in the UI, for example in a tab bar, make sure they have the same visual weight.