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

Icon Packs

Lucide

1,641 icons ISC

Phosphor

9,072 icons MIT

Catppuccin Icons

656 icons MIT

HeroIcons

1,288 icons MIT

Tabler Icons

5,963 icons MIT

Solar

7,401 icons CC-BY-4.0

Carbon

2,392 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

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.

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.

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.