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.