Free Duotone SVG Icons

Duotone icons use two tones of a single colour — a primary fill and a lighter secondary fill — to add depth and visual weight without introducing extra accent colours. They sit between flat monochrome icons and full multi-colour illustrations on the expressiveness scale, making them ideal for feature lists, dashboard widgets, and marketing sections where you want icons to feel rich but cohesive. Phosphor, Solar, and Icon Park all offer native duotone variants in this collection.

5 icon packs · 20,507 total icons · Free & open source

Icon Packs

Phosphor

9,072 icons MIT

Solar

7,401 icons CC-BY-4.0

IconPark TwoTone

1,944 icons Apache-2.0

Duoicons

91 icons MIT

Ultimate free icons

1,999 icons CC-BY-4.0

Common Use Cases

1 Feature highlight sections on landing pages

2 Dashboard sidebar navigation with active state emphasis

3 Pricing and plan comparison cards

4 Onboarding step indicators

5 Marketing page icon grids

Frequently Asked Questions

Filled icons use a single solid colour. Duotone icons use two tones of the same colour — typically a foreground path at full opacity and a background path at reduced opacity. This creates a layered, three-dimensional feel while staying within one colour family.

Yes. Duotone SVGs typically have separate path elements for each tone. You can target them with CSS classes or inline styles to set each layer to any colour or opacity you need.

Phosphor Icons offers duotone as one of six weight variants and covers 1,200+ icons. Solar Icons provides a large set of warm duotone icons. Icon Park Twotone offers 2,400+ icons in its two-tone style.