What are duotone icons?

Duotone icons sit between flat monochrome and full multicolour: they use two tones — usually a solid and a lighter/translucent accent of the same colour — to add depth while staying clean and themeable.

How duotone works

One shape is the primary tone; a secondary shape uses a lighter tint or reduced opacity of the same hue. Sets like Phosphor's duotone style implement this so the accent colour can be themed independently.

Why designers like it

• More depth and hierarchy than flat icons.
• Still calm and cohesive — it's one hue, not a rainbow.
• Themeable: change the base colour and the accent follows.

When to use it

Duotone adds a premium, friendly feel to dashboards, marketing and feature lists. For very dense toolbars, flat monochrome is often still clearer at tiny sizes.

Frequently asked questions