Quick start guide: Icons

Why to use icons

Images help us to quick recognise or understand an element
e.g. it’s easier to tell two buttons apart if they’ve got good icons
Icons make an interface more graphical and therefore feel more “designed”
The safest time to use an icon with no label is for universal concepts like “add”
If you choose to add icons to everything, e.g. menu items, understand that some concepts will be hard to find an icon for

Use icons from the same set. They’ll look like they belong together
Check that an icon set has every icon you need. Sometimes they’re missing one or two less common icons
Large icon sets often come with more than one style of each icon, e.g. “line” and “filled”. You generally should use only one style across your interface
A common exception to the above is when you fill an icon to show that an element (e.g. a navigation item) has been selected

Bigger icons allow for more visual detail. Smaller icons allow for less visual detail.
If you make a small icon much larger, it’ll look wrong because it will lack the sort of detail you’d normally see at that size
If you make a large icon much smaller, it’ll look wrong because all of the details will be squashed together and lose clarity
Icon sets are generally designed for a specific range of sizes. Some will give you different icons for different sizes, to show more detail
For line-style icons, the smaller you make them the thinner the lines should be, and vice versa

The visual language of your icons should match other elements in your design
Other elements include illustrations, text, and photographs
Ways to match icons to other elements include colour, line width, shapes, and size
For example, if you have text with a bold weight, an icon might need thicker line eight to match it

Often an icon set will offer you alternatives for each icon. e.g. a tick on its own or a tick in a box.
You can use these alternatives if the extra visual information will add meaning. e.g. the tick in a box makes sense to mean “checklist”, but probably not to mean “yes that’s correct”
You can also use these alternative icons if they help an icon feel like it matches other elements in the interface. e.g. if everything in your interface is in a box, a tick in a box might look more at home

Different icon sets will suit different interface “personalities”. e.g. “friendly”, “professional”, “quirky”
There are lots of things about an icon that can help it feel like it has a certain personality
Some of these include: whether corners are rounded in the icon, what shapes are used, whether the line ends are squared or rounded, and what direction elements of the icon lie in
For example, a “right arrow” icon that points slightly off centre is more quirky than an arrow icon that points directly to the right
Another icon type to consider is two/multi-tone icons, where each icon has parts in one colour and parts in another. These add more visual depth and can give you more options to suit your interface‘s personality

Icons often look darker than text they’re near because they are more visually dense
You might find you need to make an icon less dark (in light mode) for it to look the same colour as any text near it

Don’t crowd an icon by putting text too close to it, e.g. in a button. Graphical elements are helped if they’re given space to be recognised
Icons usually come in an invisible bounding box. The pixels in an icon might take up a 16x16 square, but the icon might be 24x24 because it sits in a 24x24px bounding box
You should respect this bounding box, as it helps all of the icons in a set feel like they belong together in terms of spacing/sizing

You might be tempted to ignore an icon’s bounding box for visual alignment purposes. e.g. if the visual right edge of an icon doesn’t align with the visual right edge of a container below it. This is dangerous in practice and should be avoided
Icons are naturally a variety of shapes, and can be hard to align optically
One way to solve these problems is to put icons inside a container or shape. This way the icon will have a uniform “outer” shape and can be more consistently laid out/aligned
If you have an icon next to some text, you might need to play with the vertical alignment of either to make them feel vertically aligned
But be wary of custom alignment for specific icons. This doesn’t scale well across an interface
You can help this issue by choosing icon sets and typefaces that work well together, because they vertically align in their bounding boxes