Color Systems for Icon Design

Colour can turn an icon from a plain mark into something with hierarchy, meaning and a proper place in the interface. Used badly, it just adds noise. A sensible system keeps icons readable across light and dark themes, preserves contrast and stops each new asset from becoming a one-off decision.

What colour is doing in the icon set

Colour does more than make icons look finished. It carries meaning, sets hierarchy and helps the interface behave predictably. In practice, that usually means five jobs: communication, hierarchy, state indication, brand recognition and categorisation.

• Communication - Red often signals danger or deletion; green suggests success or confirmation
• Hierarchy - Colour can give primary actions more weight than secondary ones
• State indication - Different colours can show active, hover, disabled or error states
• Brand recognition - Consistent colours reinforce brand identity
• Categorisation - Colour can group related icons or distinguish different types

Use colour with restraint and it improves recognition. Scatter it everywhere and the set starts to feel decorative in the worst way. That is usually where icon systems lose discipline.

Why monochrome usually wins for UI icons

A single inherited colour is still the most practical approach for many interface icons. It adapts to light and dark themes, keeps visual weight steady, and forces the icon to rely on shape rather than decoration. That matters more than people like to admit.

Monochrome also keeps maintenance under control. There are fewer variants to manage, fewer theme-switching edge cases, and less chance that one icon drifts out of line with the rest of the system. For icons where function matters more than flair, it is usually the right call.

Letting SVGs inherit text colour with currentColor

The currentColor keyword in SVG lets an icon inherit its parent element's text colour:

<svg fill="currentColor" viewBox="0 0 24 24">
  <path d="..."/>
</svg>

That gives you automatic theme adaptation. When the text colour changes for dark mode, the icon changes with it. For simple UI icons, it is hard to beat. It removes a small but annoying layer of duplication.

Building a palette that stays usable

If icons need more than one colour, the palette should be deliberate rather than decorative. Keep the system small and name the parts clearly. Primary colours should usually stay limited to one to three. Add semantic colours for success, warning, error and info. Use neutrals for secondary elements and disabled states.

• Primary colours - Main brand or UI colours, limited to 1-3
• Semantic colours - Success (green), warning (yellow/orange), error (red), info (blue)
• Neutral colours - Grays for secondary elements and disabled states

Document the hex codes and the conditions for using them. Without that, colour choices drift. The result is a set of icons that look assembled rather than designed.

Duotone without the clutter

Duotone icons use two colours, or two opacity levels, to add depth while staying relatively simple. One colour carries the main shape. The other supports it. That is enough in most cases.

• Primary colour for main shapes
• Secondary colour, or lower opacity, for supporting elements
• Creates depth without the complexity of full-colour illustrations
• Works well at various sizes

Duotone sits between monochrome efficiency and multicolour expression. Used carefully, it adds interest without making the icon harder to read.

Accessibility starts before the artwork feels finished

Accessible icons do not rely on colour alone to carry meaning. The basics are plain enough, but they are often missed in practice. Contrast needs to hold, shapes need to differ, and colour-coded icons still need labels where the meaning is not obvious.

• Ensure sufficient contrast against backgrounds, with a minimum 3:1 ratio
• Use shape differences in addition to colour differences
• Test icons with colour blindness simulators
• Provide text labels for colour-coded icons
• Avoid problematic combinations such as red/green and blue/purple

Approximately 8% of men have some form of colour vision deficiency. Designing with that in mind is not special treatment; it is basic competence.

Keeping state colours consistent

Icons often need different colours for different states. Keep the mapping consistent, or every new icon becomes another small judgement call. Default, hover, active, disabled and error states should all have a defined place in the system.

• Default - Standard colour from your palette
• Hover - Slightly darker or more saturated
• Active - Often the brand's accent colour
• Disabled - Lower opacity or gray
• Error - Error colour from semantic palette

CSS custom properties make this straightforward:

.icon {
  color: var(--icon-default);
}
.icon:hover {
  color: var(--icon-hover);
}
.icon:disabled {
  color: var(--icon-disabled);
}

Dark mode needs its own palette thinking

Dark mode is not just a colour inversion exercise. Saturated colours can glow uncomfortably, and what looks fine on a white canvas can disappear or flare against a dark one.

• Reduce brightness of saturated colours to avoid a glowing effect
• Adjust contrast ratios for dark backgrounds
• Consider outlined variants instead of filled ones in some cases
• Test icons against actual dark mode backgrounds

Check each colour in context. Do not assume the inverse will behave itself. It usually will not.

Using brand colours without overdoing them

Brand colours have a job, but they do not need to be on every icon. Keep them for primary or featured icons, and use them sparingly so the accent still feels deliberate.

• Use brand colours sparingly to maintain impact
• Reserve brand colour for primary or featured icons
• Ensure brand colours meet accessibility requirements
• Create neutral variants for contexts where brand colour is inappropriate

Brand colour works best as an accent. Push it too far and the interface starts to look noisy instead of branded.

How the system is usually implemented

In practice, icon colour management usually sits in one of four places: CSS custom properties for central control, theme context in JavaScript frameworks for dynamic switching, SVG manipulation for fill and stroke changes, or CSS filters for quick transformations that are useful but limited.

The right choice depends on the design system and build process already in place. Do not bolt on a clever colour workflow if the rest of the stack cannot support it cleanly.

Testing before the palette is locked

A colour set that looks tidy on one monitor can fall apart elsewhere. Test against real backgrounds and real conditions before treating it as finished.

• View icons against various background colours
• Test in light and dark modes
• Simulate colour blindness conditions
• Check on different monitors and devices
• Verify contrast ratios with measurement tools
• Get feedback from users with different visual abilities

Broad testing avoids the awkward discovery that the icons only behave on the screen they were designed on.