Choosing icons for product UI
A working designer's guide to picking icons that read clearly across screens, themes, and densities.
Start from the user task, not the icon
The most common mistake in icon selection is starting from the icon library. You open up your favorite archive, scroll until something looks pretty, then squeeze the surrounding UI to fit. The result is a screen full of icons that look fine in isolation and forgettable in context. Start instead from the user task. What is the smallest, most concrete thing the user is trying to do at this moment? Write it down. Then ask: what visual metaphor would make that task easier to spot at a glance? Now go look for an icon.
Read the icon at three sizes
Before you commit to an icon, drop it into your interface at three sizes — the size you actually plan to use it at, half that size, and double. An icon that reads beautifully at 64 px sometimes turns into mud at 24 px because the lines collapse together. An icon that reads at 16 px often looks oddly sparse at 96 px. The goal is to find icons that survive the round trip. If your design system uses three icon sizes, this is non-negotiable.
Match line weight across the screen
If you mix a 1 px outline icon with a 3 px filled icon on the same screen, viewers register the visual weight difference as a problem before they ever notice the icons themselves. The screen feels off without quite knowing why. Pick a single line weight — 1.5 px or 2 px is a common safe default — and stick to it across every icon on the screen. Yes, this means rejecting some icons you love. The coherence is worth it.
Test with the actual labels
Icons rarely live alone. They live next to a label, inside a button, beside a row of numbers. Drop your candidate icon into the actual context with the actual labels and ask whether the pair reads better than either element alone. If the icon adds nothing, drop it — a clean text-only label is almost always better than a label with a redundant icon. If the icon clarifies, keep it. The test is whether removal would degrade the experience.
Recolor sparingly
It is tempting to recolor every icon to match your brand. Resist. Color is the loudest signal in any UI; if every icon shouts the brand color, none of them direct attention to anything. Pick the two or three most important icons in your interface — usually the primary CTA and the brand mark — and recolor only those. Leave the rest neutral. Designers who do this consistently end up with interfaces that feel composed instead of cluttered.
Audit for cultural meaning
Icons carry cultural meaning that doesn't always travel. The thumbs-up that reads as approval in North America is rude in parts of West Asia. The pointed-finger that reads as direction in Europe is taboo in parts of Southeast Asia. If your product reaches a global audience, check your icon picks against a list like Unicode's emoji-region notes, or ask a colleague from the relevant culture. The cost of catching a problem at the design stage is essentially zero. The cost of catching it after launch can be substantial.