Icons are a language, and mixed languages confuse people
An icon system mixing filled and outlined styles, two different stroke weights, and icons pulled from three different libraries doesn't read as varied — it reads as inconsistent, even to users who couldn't articulate why. Icons need to feel like they came from the same designer, because visually, they need to.
The fix is boring and effective: pick one icon library, one style (outline or filled, not both), one stroke weight, and stick to it everywhere, including custom icons that need to be drawn to match.
Rules that keep an icon system coherent
Fixed sizes, not arbitrary pixel values
16px, 20px, 24px as the only allowed icon sizes. A 17px icon next to an 18px one looks like a rendering bug, not a deliberate choice.
Consistent optical alignment with text
An icon next to a label needs its baseline and vertical center actually aligned to the text, not just visually close — a 1-2px misalignment is subtle but reads as sloppy at scale.
One meaning per icon, everywhere
If a pencil icon means "edit" in one module, it can't mean "compose a message" in another. Reusing the same icon for different actions actively trains users to guess wrong.
Every icon-only button needs an accessible label
`aria-label` on every icon button isn't optional polish — without it, a screen reader announces nothing useful, and the button is functionally invisible to that user.
Novel or ambiguous actions need a label, not just an icon
Trash, edit, search, close — universally understood. "Reconcile," "escalate," "archive" are not. Pair uncommon actions with text; save icon-only treatment for genuinely universal ones.
Test icons with someone outside the project
A team that's stared at an icon for weeks stops seeing its ambiguity. A quick "what does this button do?" check with someone unfamiliar catches confusing icons before users do.
When text is just the better answer
Icons save horizontal space, but that's often the wrong trade in enterprise software, where the cost of a misread action — deleting the wrong record because the icon looked like archive — is much higher than the cost of a slightly wider button. When an action is destructive, uncommon, or specific to your domain rather than the general web, default to text, or text plus icon. Save icon-only for the handful of actions genuinely universal enough that a label would feel redundant.
The takeaway
A coherent icon system means one library, one style, fixed sizes, and one meaning per icon everywhere. For anything destructive, uncommon or domain-specific, pair the icon with a text label — the space saved by going icon-only rarely outweighs the cost of a misread action.
Let's talk about your productRelated reading
Design System · Components
Designing a Button System: Primary, Secondary and the Trap of Too Many Variants
Visual Design · Hierarchy
Contrast, Weight and Whitespace: The Three Levers of Visual Hierarchy
Visual Design · Typography
Typography Hierarchy in Dashboards: Guiding the Eye Before the User Reads a Word
See this icon system applied in production on the FarmGate case study.