Duotone SVG Icons

Duotone icons use two shades of the same color — a solid base with a lighter or darker secondary layer — to add a bit of depth without going fully illustrative. This collection groups libraries built specifically around that two-tone approach (Duoicons, IconPark TwoTone, Pepicons Print) alongside libraries that offer duotone as one of several styles (Phosphor, Solar, Ultimate Free Icons), for interfaces that want more visual interest than a flat outline icon but less commitment than a full-color illustration.

6 icon packs·Free & open source

Icon Packs

Duoicons

91 iconsMIT
Add Circle
Airplay
Alert Octagon
Alert Triangle
Align Bottom
Align Center

IconPark TwoTone

1,947 iconsApache 2.0
Abnormal
Acceleration
Activity Source
Ad
Add
Add Item

Pepicons Print

1,286 iconsCC BY 4.0
Airplane
Airplane Circle
Airplane Circle Filled
Airplane Circle Off
Airplane Off
Alarm

Phosphor

9,161 iconsMIT
Acorn
Acorn Bold
Acorn Duotone
Acorn Fill
Acorn Light
Acorn Thin

Solar

7,404 iconsCC BY 4.0
4k Bold
4k Bold Duotone
4k Broken
4k Line Duotone
4k Linear
4k Outline

Ultimate free icons

1,999 iconsCC BY 4.0
A11y Accessibility Disability
A11y Accessibility Disability Bold
Ab Testing Monitors
Ab Testing Monitors Bold
Accounting Bill Stack 1
Accounting Bill Stack 1 Bold

Common Use Cases

  • 1

    Dashboard and analytics UIs wanting subtle depth without full-color illustrations

  • 2

    Feature sections on marketing pages needing icons with more visual weight than outlines

  • 3

    Design systems offering a 'duotone' variant alongside outline and filled styles

  • 4

    Fintech and SaaS product interfaces going for a modern, layered icon aesthetic

  • 5

    Onboarding and empty states wanting icons that feel more polished than single-color

  • 6

    Pricing pages and plan comparisons using duotone icons to highlight included features

  • 7

    Mobile app interfaces wanting a distinct, branded icon style

Frequently Asked Questions

Yes, at its core — a duotone icon uses two tones (often two shades of the same hue) applied to different layers of the same shape, typically a solid base at full opacity and a secondary layer at reduced opacity or a lighter shade. This creates a sense of depth or layering without needing a fully illustrated, multi-color icon.

The Colored collection includes icons with multiple distinct colors or full illustrative shading (like Streamline Color or Plump Color), while this collection is specifically limited to the two-tone technique — one color, two opacities or shades. Duotone icons are generally more restrained and easier to fit into a single brand color than fully multi-color icons.

This depends on the library. Some duotone icons (like Duoicons) are built with CSS variables or 'currentColor' for both layers, letting you recolor the whole icon while preserving the two-tone effect. Others may have fixed colors baked into the SVG. Check the pack page to confirm before assuming it'll follow your theme.

Duoicons, IconPark TwoTone, and Pepicons Print are built specifically as duotone sets. Phosphor, Solar, and Ultimate Free Icons offer duotone as one style among several (alongside outline, filled, etc.), so if you want the flexibility to switch styles later while keeping the same icon shapes, those multi-style libraries are worth considering.

They can lose some of their layered effect at very small sizes, since the secondary tone becomes harder to distinguish from the base. If you need icons below 20px, it's worth previewing a specific icon at that size, since simpler duotone icons tend to hold up better than more detailed ones.

Each icon keeps the license from its source library attached to it, and terms can differ between Duoicons, IconPark TwoTone, Pepicons Print, Phosphor, Solar, Ultimate Free Icons, and other included libraries. Check the license shown on the individual icon or pack page before using it commercially.

It's best to avoid this, since the exact opacity ratio, corner style, and level of detail vary between duotone libraries even though they share the same general technique. Sticking to one library keeps the layered effect looking consistent across your interface.

More Collections

logos/google-icon
logos/airbnb-icon
bxl/amazon
token-branded/bitcoin

Brands & Logos

Brand and product logos in SVG

meteocons/extreme-night-drizzle-fill
wi/day-lightning
meteocons/wind-beaufort-12-fill
wi/sandstorm

Weather

SVG icons for every weather condition

gis/bbox-alt
tabler/map-pin-check
maki/airport
osmic/bicycle-14

Maps & Location

Markers and POI icons for maps

twemoji/pot-of-food
noto/kiwi-fruit
mdi/food-fork-drink
openmoji/pot-of-food

Food & Drink

Food and beverage icons

mdi/car-back
tabler/motorbike
carbon/bicycle
carbon/crossroads

Transport & Vehicle

Cars, transit, and travel icons

emojione/grinning-face
emojione-monotone/cat-face
noto-v1/grinning-squinting-face
openmoji/family

Emoji

SVG emojis, seven styles combined

tabler/garden-cart
lucide/credit-card
solar/shop-bold-duotone
hugeicons/shopping-bag-add

E-Commerce

Cart, checkout, and shipping icons

medical-icon/ambulance
healthicons/blood-drop-24px
covid/symptoms-fever
covid/covid-19-virus-4

Medical & Health

Health and medical icons

View all collections →