Free SVG Icons for Dark Mode

Dark mode has become a default expectation in modern interfaces. The wrong icon set can look washed out, lose detail, or clash with a dark background. This collection gathers packs whose stroke weights, fill strategies, and contrast levels are proven to render beautifully on dark surfaces. Thin-line sets like Lucide provide airy elegance, Phosphor duotone variants add depth without brightness, and Catppuccin brings pastel-toned warmth that pairs naturally with dark editor themes.

8 icon packs · 30,773 total icons · Free & open source

Icon Packs

Lucide

1,780 icons ISC

Phosphor

9,072 icons MIT

Catppuccin Icons

656 icons MIT

HeroIcons

1,288 icons MIT

Tabler Icons

6,184 icons MIT

Solar

7,608 icons CC-BY-4.0

Carbon

2,590 icons Apache-2.0

Fluent Emoji High Contrast

1,595 icons MIT

Common Use Cases

1 OS-level dark mode support in web and desktop apps

2 Code editors, terminals, and developer tool interfaces

3 Media and entertainment apps with theatre-mode UI

4 Dashboard dark themes for data-heavy interfaces

5 Night mode in reading and productivity apps

Frequently Asked Questions

Do SVG icons automatically work in dark mode?

Monochrome SVGs using currentColor inherit whatever text colour you set for dark mode, so they adapt automatically. Multi-colour SVGs with hard-coded fill values need manual adjustment or a second variant for dark backgrounds.

Which icon pack looks best on dark backgrounds?

Lucide and Heroicons outline variants render crisply at light-on-dark. Phosphor duotone icons add subtle depth. Catppuccin provides a warm pastel palette designed specifically for dark editor themes.

How do I switch icon styles between light and dark mode?

Use the CSS prefers-color-scheme media query or your framework theme context to conditionally apply a different colour or swap between outline and filled variants. SVGs with currentColor require no extra work beyond changing the parent text colour.