Must-know golden rules for icon design in UI & web design
The basics of effective icon design are clear. Icons need to be consistent, legible, and clear so that users can easily understand and recognize them.
Iconography is an important part of user interface design. It’s a visual language that represents actions and content, as well as shows the meaning behind functionality.
Great icons are always made using grids.
You need to define your bounding box and the safe zone within and set a few key lines.
Use the grid as a template to make your icons’ proportions uniform. Don’t mix size, rather stick to the same size e.g.24px.
Grid’s bounding box, key line, and safe zone.
When making icons using a grid, keep these shapes in mind and recreate sized directly (e.g. 16 px grid):
16px grid example. Link to source.
If the icon is narrow, don’t be afraid of rotating it so it fills the container/grid. Try to use the whole container. Your icon will look more balanced.
Example of an ‘edit’ icon rotated and not rotated style using the grid.
Use the same line width/stroke width, corner radius, and fill style to make your icons unified, so that they look like they come from the same icon family. Eg. thickness is 2px, corner radius is 5px.
Example of consistent and inconsistent use of line width.
Should you mix filled and outlined styles?
It depends. Usually, you shouldn’t.
However, if you want to represent a different state of the icon, feel free to mix them.
Example of mixing filled and outlined icons when states are represented.
But be aware of all of your icons need to have a nice filled match as well.
Example of outlined and filled icon styles. Link to source.
Part of becoming a great designer is learning and knowing when to break the rules and when to follow them.
Less is more.
Try to avoid intrinsic icon design on the web. Use only details that are important to make the icon easy to recognize and be understood.
Example of a minimalistic icon (source), and intrinsic icon (source).
All icons in the set should use the same colour combinations. Choose your colours, add them to swatches, and attempt to stick to them. Sure, you’ll have to make exceptions and add more colours here and there, but to make something aesthetic you only need a few colours to colour the entire icon set.
Example of icons using the same and different colour combination.
Use the same spacing between icon elements e.g. 3px. It will unify and harmonize your icons.
Example of using consistent and inconsistent spacing.
Sometimes when you have different shapes nested in each other, your icon can look off-balance visually. If that’s the case, align the elements based on the optical centre to balance them.
Example of optical correction applied and not applied.
The YouTube logomark is a perfect example of it, where the triangle is not exactly in the centre.
Prioritize icon recognition over cohesiveness.
Don’t forget, clarity and recognition distinguish a great icon from an ok icon. Never sacrifice clarity. Icons should be aesthetic of course, however, icons should first convey the correct message, and only then should look attractive.
One last bit…
Creating unified icon sets is far more difficult than it appears. Because you need to pay attention to the smallest details, and possibly redesign the sets several times.
So, if you’re looking for handy resources, I have a few suggestions, so make sure to check them out:
This article is a written interpretation of my How to design better icons YouTube video: