Design AtlasA duotone icon splits one icon into two flat layers: a light tone (usually the same color at 20–35% opacity) sits as the background, and a darker, saturated tone carries the emphasis on top. No gradients, no shadows — the depth and hierarchy come from exactly two flat color values.
Teams typically use two shades of the same hue, or two different accent colors. Either way, the darker layer should consistently carry the part that determines meaning — a checkmark, an arrow, a number — while the lighter layer carries the surrounding shape (a folder, a speech bubble, a card). Keeping that role split consistent across the set is what makes it read as one system instead of random two-tone shapes.
It reads louder than line or solid icons, which makes it a good fit for marketing pages or onboarding screens that want to catch the eye. Because it adds a second color everywhere it's used, applying it across an entire app's core UI (toolbars, tab bars) tends to feel heavy — it works best reserved for a handful of spots that actually need the extra emphasis.
When to use
Reserve it for the handful of spots that need extra emphasis — marketing pages, onboarding, feature cards. Applying it across core UI like toolbars or tab bars tends to feel heavy.