Icon Design

What is icon design, and what are brand icons for?

Icon design is drawing small symbols that convey an action, concept or category at a glance. Brand icons are those symbols drawn to the brand's visual language, under one set of rules. A good icon is understood without being read, and it guides the text beside it rather than repeating it.

Icons appear in more places than people expect: website and app interfaces, feature and usage symbols on packaging, catalogues, wayfinding signs, presentations and social media highlight covers. When their corner radius, stroke weight and form match the logo and typography, the whole identity looks as if it came from one hand.

The difference between an icon and an illustration matters here. An illustration depicts a scene or a story and exists to draw attention; an icon conveys a single meaning by the shortest route and usually sits beside text, supporting it.

How is an icon set designed?

An icon set is made less of individually drawn symbols than of decisions taken first.

Consistency usually gets lost in small details: whether stroke ends are round or flat, how tight inner gaps can be, whether perspective is used. When these details become rules while the first icons are drawn, the set still looks like the work of one hand even when it reaches a hundred icons.

The process usually goes like this:

• Inventory: decide which concepts really need a symbol and which are better said in words.
• Metaphor: find the clearest visual analogy for each concept, watching for metaphors that change across cultures.
• Style: choose outline, filled or two-tone, and define active and inactive states where needed.
• Grid and keyline shapes: a drawing area where circles, squares and rectangles carry the same optical weight.
• Drawing and optical correction: icons are drawn to the rules, and spots that are mathematically right but look wrong are fixed.
• Small-size testing: icons are checked on screen at their smallest size and simplified where needed.
• Naming and export: each icon is saved under a clear name and exported in the formats it will be used in.

Custom icon set or stock icon set?

It does not have to be either-or. Stock icon libraries are quick and often free, but they carry no character and their licences vary from library to library. A custom set builds a language that belongs to your brand, but it takes time and effort.

When choosing a stock set, always check its licence: whether it allows commercial use, modifying the icons and distributing them inside a product varies from library to library. A set that is broad enough and regularly updated also saves you from hunting for missing icons later.

A practical route is to start from a stock set, tune its stroke weight and corner radius to the brand, and draw missing icons to the same rules. These questions help with the decision:

• Do you have product- or sector-specific concepts that stock sets do not cover?
• Will the icons also be used on physical media such as packaging, catalogues or signage?
• Will the icons help differentiate the brand, or only cover standard interface actions?

Is an icon enough on its own? Legibility and accessibility

Icons are less universal than they seem. Hearts, stars and bookmarks can mean different things in different apps. Adding a short text label next to icons whose meaning is not obvious to everyone saves users from guessing.

In digital interfaces, accessibility is part of the icon system too. An icon that works on its own is given a name for screen readers, while a purely decorative icon is hidden from them. Meaning is never carried by colour alone, and on touch screens the tappable area around an icon is kept large enough for a finger.

On physical media, legibility is about distance and material. A small usage symbol on a pack, or a wayfinding icon that must read from several metres away, needs heavier strokes and less detail than an icon on screen.

Which icon files are delivered?

A good handoff is more than files; it also includes a short section on how to use the icons: at which sizes, how much space to leave next to text, which colours they can appear in, and when text should be used instead of an icon.

An icon set's value is measured by how easily the team can find it and use it correctly. A folder of badly named files turns, within months, into icons that get copied and degraded. A complete handoff usually includes:

• Optimised SVG files, with single-colour icons set up to inherit the text colour in code.
• PNG versions for presentations and office use.
• An icon library built as components in the design software.
• A consistent naming convention and category structure.
• A grid and drawing rules document for designers creating new icons.
• Where needed, separately drawn variants for small and large use.