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·21,812 total icons·Free & open source

Popular Duotone SVG Icons

A sample from this collection's icon packs. Click any icon to preview, copy, or download it.

Icon Packs

Phosphor

9,072 iconsMIT

Solar

8,706 iconsCC-BY-4.0

IconPark TwoTone

1,944 iconsApache-2.0

Duoicons

91 iconsMIT

Ultimate free icons

1,999 iconsCC-BY-4.0

Common Use Cases

1Feature highlight sections on landing pages

2Dashboard sidebar navigation with active state emphasis

3Pricing and plan comparison cards

4Onboarding step indicators

5Marketing page icon grids

Frequently Asked Questions

What makes duotone icons different from filled icons?

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.

Can I customise the two tones independently?

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.

Which pack has the most duotone icons?

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.