Color in Icon Design: Single-Color, Multi-Color, and Semantic Icon Systems

Single-color icons — icons rendered in one color, typically the current text color or a specified interface color — are the most versatile and scalable icon type for UI systems. By accepting the current color context (via `currentColor` in SVG), they automatically adapt to dark/light mode, themed surfaces, and disabled states without separate icon variants. The constraint: single-color icons communicate function through form alone, without color as a signal. This is sufficient for most UI navigation and action icons. The design requirement for single-color icons is higher: form must communicate unambiguously without color cues. The common mistake: designing icons in a specific color (dark on white) and assuming they will work in all contexts — test every single-color icon in four states: default (light mode), dark mode, on a colored background, and in a disabled (50% opacity) state.

Multi-color icons gain the ability to use color as a semantic layer — to distinguish parts of an icon visually and to carry meaning beyond form. The constraint is production complexity: multi-color icons need separate dark mode variants, more complex SVG with multiple color values, and careful contrast checks for each color combination. The practical recommendation for UI icon systems: use single-color icons for all system and navigation icons (16-24px size), and reserve multi-color icons for decorative or marketing contexts (32px+) where the extra expressiveness justifies the production overhead. App icons, feature illustrations, and onboarding imagery are the appropriate context for multi-color icon treatment in a product design system.

Semantic color in icons — using color to communicate meaning, not just decoration — is most valuable in status and feedback icons. The icon system patterns: error/destructive = red; warning/caution = amber/yellow; success/confirmation = green; informational = blue. These four semantic colors should be consistent across every icon and UI element in the product — the same red used in error icons should be the same red used in error borders and error text. Consistency is the source of semantic value: if red appears in three different hues across the product (error icons in one red, destructive button in another, notification badge in a third), the semantic signal is diluted and users cannot rely on color alone as a meaning carrier.