<?xml version="1.0" encoding="utf-8"?>

Duotone icons

Duotone icons

Duotone icons contain two similar colors that are distinctly separated.

To create a duotone icon:

  • Take an icon
  • Split its elements into two layers such as an outline and fill space
  • Select a starting hue
  • Experiment with layer opacity

Duotone icons can add some extra visual interest to your designs without overpowering them. Just beware that at very small sizes, they can be hard to decipher from the accessibility standpoint.

Improve your UX & Product skills with interactive courses that actually work