Guide 07
Duotone or Color Icons? Choose a Treatment for the Job
A colorful icon is not automatically more informative, and a monochrome icon is not automatically more professional. The useful question is what the artwork must do in a particular place. A tiny toolbar control, an empty-state card and a large onboarding illustration have different needs. This guide provides a practical treatment test without turning stylistic preferences into universal rules.
Assign a role before assigning a palette
Divide the interface into functional controls, status indicators and explanatory artwork. A search button must remain easy to recognize across component states. A warning must communicate a specific condition. An introductory card may have room for a more expressive illustration. Start by deciding which of those jobs the icon serves, then consider how many colors actually help it do that job.
For a fictional project dashboard, try monochrome controls in the toolbar, restrained status symbols beside text and a richer illustration in the empty state. The separation gives each treatment a reason to exist. Do not spread the empty-state palette into every small action merely to make the page feel coordinated. Shared spacing and shape language can create cohesion without giving every symbol the same visual intensity.
Compare treatments with the same practical task
Create a sample card about storing project files. Compare a simple folder outline, a filled folder, a duotone drawing and a multicolor option. Put each beside the same heading and action, at the same intended placement size. Evaluate whether extra paint clarifies parts of the object or merely adds attention. Use a real background rather than judging everything on an isolated white artboard.
The catalog includes Fluent Color, Solar and Phosphor Duotone collections worth inspecting for this exercise. Do not assume every concept has a matching version in each treatment. Compare the actual selected drawings, then record the source and variant. Your decision should describe an intended role, such as expressive empty-state artwork, rather than claiming one collection is better for every use.
| Treatment | Useful question | Common review risk |
|---|---|---|
| Monochrome | Does the silhouette explain enough? | Dense detail at a small size |
| Duotone | Does the secondary layer clarify structure? | A pale layer disappearing |
| Multicolor | Does the palette add relevant information? | Competing with text and status |
| Mixed treatments | Does each style have a documented role? | Accidental visual inconsistency |
From the library
Find a style that feels like your product.
Compare real icons from the library. Open a pack to search its artwork, inspect source licenses and choose an SVG or PNG export.
Check what survives when color relationships change
Inspect every candidate in light and dark themes, inside selected components and against any colored card surface. A duotone icon can lose an important boundary when its pale secondary layer blends into the background. A multicolor icon can contain one detail that becomes difficult to distinguish even while the rest remains vivid. Review the information-bearing parts, not just the overall impression.
W3C's non-text contrast guidance discusses contrast for visual information needed to identify controls and understand graphics, including a 3:1 threshold in the criterion's scope. That does not mean every decorative color in every illustration must be treated identically. Identify which parts carry necessary meaning, check the applicable requirements and keep important states understandable through labels or shapes as well.
Respect the difference between system icons and illustrations
A design system can set a narrow rule for its small controls while using richer artwork elsewhere. Fluent 2's iconography guidance advises a single solid color for system icons and treats product-launch artwork separately. Read such guidance in its intended context; it is not a claim that all multicolor artwork is unsuitable for every interface.
Recolor with a plan. Decide whether the source has a primary and secondary layer you can preserve, whether a neutral outline matters, and whether a generic tint would erase the intended structure. If the desired treatment requires many exceptions, choose another drawing. Keep the original source alongside the edited export so the next theme change does not start from an already flattened or ambiguously modified file.
From the library
Try color. Explore duotone.
Give an explanation a different visual treatment. Browse Fluent Color and Phosphor Duotone, then compare them at the size your readers will see.
Document a treatment rule that teammates can repeat
Capture the decision on one specimen page with a toolbar, status row and explanatory card. Show the allowed treatment for each role and one example that should not be copied. Include the smallest size and the most challenging background. A short, visible rule helps a teammate choose the next icon without reopening the entire palette debate or guessing which exception was intentional.
- The treatment has a defined functional or explanatory role.
- Small details remain recognizable at the intended display size.
- Important layers survive light, dark and selected backgrounds.
- Color does not carry an essential status without another cue.
- Edited exports retain an identifiable source and variant.
- The specification explains when a different treatment is acceptable.
