How to create consistent icons?
Icon grids, stroke weights and optical corrections, and why a set of icons from different sources never quite looks like a set. Directly applicable to the consistency exercise.
Watch on YouTube (opens in a new tab)Third-party video. It is loaded from YouTube and is not hosted by the academy.
By the end of this lesson you can
- Decide when an image, icon or illustration genuinely helps.
- Use icons with labels and choose familiar icons over clever ones.
- Keep imagery and icon styles consistent across a product.
- Write useful alternative text.
The idea
Images, icons and illustrations can make an interface faster to understand and more human. They can also slow pages down, push content out of view and confuse people. Use each one for a reason.
Images
Photos are valuable when people need to see the real thing: a product, a room, a dish, a person they will meet. Decorative stock photos of smiling people at laptops rarely help and often push useful content down. Ask: would someone miss this image if it were gone?
Icons
Icons save space and speed up recognition, but only when people recognise them. A few icons are nearly universal in context (search, home, close, print). Most are not: a heart can mean "like", "save" or "health"; a gear can mean "settings" or "tools". Research on icon usability consistently finds that text labels improve understanding. Use icons with visible labels, especially in navigation and for important actions. Icon-only buttons are acceptable for very familiar actions in tight spaces, and still need an accessible name.
Illustration
Illustrations can explain concepts, give empty states personality, and support brand. Keep them secondary to content, and make sure they do not carry meaning that text does not also explain.
Consistency
Use one icon family with consistent stroke weight, corner style and size. Use one photographic style (lighting, cropping, colour treatment) and one illustration style. Mixing outlined and filled icons randomly, or three illustration styles, makes a product feel stitched together. Where filled and outlined variants exist, give them a meaning, for example filled for the selected state.
Alternative text
Images that convey information need alt text that conveys the same information. Describe purpose and content in context, not the file ("photo.jpg") or the obvious ("image of"). Purely decorative images should be hidden from assistive technology (empty alt text in HTML). A product photo might need "Hand-thrown blue ceramic mug, about 10 cm tall"; a decorative swirl needs nothing.
Why it matters in real projects
Unlabelled icons are a common source of confusion in usability tests, and they are hard for new users to learn. Heavy imagery slows pages on mobile networks, which affects everyone and particularly people on limited data plans. Inconsistent visual styles erode trust. Missing alt text makes content unavailable to screen reader users.
A realistic example
A field service app for engineers uses a bottom navigation bar with five unlabelled icons: a calendar, a wrench, a box, a speech bubble and a person. In onboarding sessions, new engineers repeatedly tap the box expecting "parts inventory", which actually opens "completed jobs".
Adding short labels (Schedule, Jobs, Parts, Messages, Profile) and changing the box icon to a clipboard for jobs ends the confusion. The team also replaces a mix of outlined and filled icons with one consistent outlined family, using filled versions only for the selected tab.
Step by step
Inventory visuals
List every image, icon and illustration on three screens of a product.
Ask what each one does
For each, write its purpose: inform, identify, decorate, or none.
Test icon recognition
Show five icons without labels to three people and ask what each does. Note mismatches.
Add labels and remove decoration
Label navigation and important actions. Remove or shrink visuals that do not help.
Unify styles
Choose one icon family and one photo or illustration style. Replace exceptions.
Write alt text
For each informative image, write alt text that conveys its purpose in context.
Common mistakes
Mistake Icon-only navigation with abstract icons.
Instead Add visible labels.
Mistake Large decorative hero images above the actual task.
Instead Shrink or remove them, or make the image itself useful.
Mistake Alt text like "image" or the file name.
Instead Describe the information or function. Use empty alt for decoration.
Mistake Mixing icon styles from different libraries.
Instead Pick one family and draw missing icons in the same style.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 30 min
Icon recognition test
Test how well people understand the icons in an app you use.
Steps
- Take screenshots of eight icons from one app, cropped without labels.
- Show them to three people and ask what each does.
- Record correct, partially correct and wrong answers.
- Propose labels or replacement icons for anything misunderstood.
Deliverable
A results table and your recommendations.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Use images when people need to see the real thing; question decoration.
- Icons work best with labels; only a few are universally understood.
- Keep one icon family and one imagery style.
- Write alt text that conveys meaning in context; hide decorative images.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- Icon Usability (opens in a new tab)Nielsen Norman Group
- Alternative Text (opens in a new tab)WebAIM
- Images (opens in a new tab)GOV.UK Design System
Your notes
Marking complete updates your course and roadmap progress.