What an icon is for
An icon is a small picture that stands for an action, object or idea. People use icons to find things quickly, to understand a function without reading, and to save space. Because they are small and are often seen for a fraction of a second, they succeed only if they are simple and familiar.
An icon is not a miniature illustration. Detail that adds charm in a large drawing becomes noise at small sizes. The aim is to keep just enough shape for recognition.
Choose the metaphor first
The most important decision is what the icon pictures. A metaphor links the symbol to its meaning, and it works only if the audience already knows the link.
- Use familiar objects. A magnifying glass for search, a house for a home page, a trash can for delete are widely understood because they have been used so often.
- Be literal when you can. An envelope for mail is easier to read than an abstract shape.
- Beware of metaphors that age. Some familiar symbols picture objects that many younger people have rarely used, but remain recognizable through convention. Convention often matters more than literal accuracy.
- Check across cultures. Gestures, animals, mailboxes and hand symbols can mean different things in different places. Cultural sensitivity applies to small symbols as much as to photographs.
- Pair with a label when meaning is uncertain. Text next to an icon removes guesswork. For unusual or important actions, a label is usually safer than a clever icon alone.
Test by asking a few people what the icon means before you tell them. If answers vary widely, rethink the metaphor.
Work on a grid
Icons in a set should look as if they belong together. A shared grid does most of this work. Typically a grid is a square canvas, such as 24 by 24 units, with a smaller live area inside it and padding around the edge so symbols do not crowd or touch the boundary.
Many icon grids define a few basic keyline shapes: a square, a circle, a tall rectangle and a wide rectangle. Each icon is fitted to the shape that suits it, so a round object does not look smaller than a square one. Circles generally need to be slightly larger than squares to appear equal in size, because the corners of a square add visual weight.
Align details to whole units where possible. When lines fall between pixels on a display, they may blur. Designing on the pixel grid keeps edges crisp at the intended size. This is a smaller-scale version of the thinking behind layout grids.
Keep strokes and shapes consistent
Consistency is what turns a collection of symbols into a family. Decide the rules and apply them to every icon:
- Stroke weight. Use one line thickness throughout, or a defined pair for primary and secondary lines.
- Corners. Choose sharp, slightly rounded or fully rounded corners and stay with them. Mixing them is a common cause of an amateur look.
- Line ends. Round caps feel friendly; square caps feel more technical.
- Gaps. Keep spacing between parts consistent. A gap that is too narrow will fill in at small sizes.
- Fill style. Outlined icons and solid icons convey different tones. A single set generally sticks with one style, though solid can be used to show a selected state if applied systematically.
- Perspective and angle. Use the same viewpoint across the set, usually flat and front-on.
Write these choices down. A short rule sheet makes it easier to add icons later, and it fits naturally into a design system.
Simplify
Start with the silhouette. If the shape is not recognizable as a solid black form, adding interior detail will not rescue it. Then remove everything that does not contribute to recognition.
- Reduce the number of parts. Most icons need only a few.
- Avoid text and numbers inside icons, which become illegible when small.
- Avoid thin lines and tiny counters that close up at low sizes.
- Exaggerate the distinctive feature of the object slightly. A key’s teeth or a camera’s lens can be enlarged for clarity.
It can help to design at the smallest intended size first and then check at larger sizes, instead of the other way around.
Test at size and in context
Look at icons at the size they will actually be used, on the actual background, and on devices with different screens. Check:
- Recognition at a glance, in a fast squint test.
- Distinction within the set. Icons that sit near each other should not look alike.
- Color contrast against the background. Thin gray symbols on a light surface may be hard to see, and readability matters even more for users with low vision.
- Touch size. On touch screens the clickable area should be comfortably larger than the visible symbol, even if the drawing itself is small.
Do not rely on color alone to communicate status. Add a shape change or a label so that people with color blindness are not left out.
Build icons as scalable shapes
Icons are usually drawn as vector graphics so that the same file stays sharp at any size. Pixel-based versions are sometimes produced for specific small sizes, with details adjusted by hand. Exporting a set in a consistent format and naming scheme helps teams keep brand assets organized.
When icons need personality
Brand character can show up in icon corners, proportions and a single accent color, but clarity comes first. A set that is lightly styled and instantly readable usually serves people better than one that is highly original and confusing. If an icon needs a long explanation, the design has probably become too clever.