暗色图标设计指南：深色模式图标怎么做

Why Dark Icons Deserve Their Own Design

Since 2020, iOS, Android, Windows, and macOS have all made system-wide dark mode standard, and many users keep it on permanently. Dark mode is not just "swap the background to black" — the same icon set reads differently on light and dark backgrounds, in legibility, hierarchy, and mood. Reusing light-mode icons verbatim causes three classic failures:

• Contrast collapse: dark gray icons vanish on dark backgrounds; light gray ones wash out on light ones;
• Dead shadows: light mode relies on drop shadows for depth, which are nearly invisible on dark surfaces;
• Muddy colors: medium-saturation colors look dull and grayed-out on dark backgrounds, draining brand colors of energy.

Here's a visual comparison — the same "A" glyph icon, done badly and well on both backgrounds:

Three Core Principles

1. Contrast first

On dark backgrounds, use light gray around #E8EAF0 for foregrounds rather than pure white — pure white glares against dark surfaces, while light gray feels softer and layered. The reverse holds too: avoid pure black (#000) for dark fills; #16181F to #1E212B dark gray-blue keeps icon boundaries even on OLED screens.

2. Replace shadows with luminance differences

Shadows barely register in dark mode. Express hierarchy through surface brightness instead: background #121419, card #1A1D26, floating layer #22252F — the more "elevated," the brighter. Inside icons, use luminance gradients rather than drop shadows for depth.

3. Brighten accent colors by 5–10%

The same brand color looks darker and duller on a dark background (a quirk of human vision). Compensate by brightening the accent a notch: for example, #6366F1 can shift to #7C7FF5 in dark mode. Any brand color covering large icon areas deserves this correction.

App Icons: Dark Backgrounds Done Right

Brand app icons usually ship as one universal set — the key is that it must work on both light and dark wallpapers. The modern convention is a "dark gray base + brightened foreground" design that works everywhere:

Windows 11 and Android 13+ can auto-switch between light and dark app icons based on system theme (via ICO resources or adaptive icons); macOS has supported dark icons since Big Sur. Adapting requires having both finished variants in hand — exactly what Icon Forge's Dark variant feature solves (below).

UI Icons: The Two-Variant Strategy

For in-interface functional icons (settings, search, back...), maintain one glyph with two stroke colors: dark strokes for light mode, light strokes for dark mode. Don't draw two sets of paths — use currentColor in SVG or CSS variables, and one glyph adapts to both themes automatically:

<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="1.8" stroke-linecap="round">
  <circle cx="11" cy="11" r="7"/>
  <path d="M20 20l-3.5-3.5"/>
</svg>

The icon color always matches body text — zero-cost theme switching. Only brand graphics (logos, illustrations) genuinely need two drawn versions.

Favicons That Follow Dark Mode

Browser tab bars come in light and dark variants too. To make your favicon follow the system theme, provide an SVG version with a media query:

<!-- favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #f2f3f7; }
    .fg { fill: #3b3f4a; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #16181f; }
      .fg { fill: #e8eaf0; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="7"/>
  <path class="fg" d="..."/>
</svg>

Chrome, Edge, and Firefox follow the system setting; Safari's SVG favicon support is limited, so keep the PNG/ICO fallbacks and declare the SVG last as progressive enhancement. The favicon.ico and apple-touch-icon should use neutral colors readable on both. See the Complete Favicon Guide for full HTML declarations.

Generate Dual-Theme Icons in One Click

Hand-crafting two complete icon sets is tedious. Icon Forge on this site has a built-in Dark variant feature built exactly for this:

1. Upload one source image: any square logo (PNG/JPG/WebP/SVG); the tool auto-corrects to 1:1.
2. Check the Dark variant option: the tool generates a dark version — deep gray-blue background, automatically brightened foreground, guaranteed readable in dark environments.
3. Pick output sizes: all seven (16–256px) by default.
4. Export two sets: get Light + Dark complete icon sets (.ico + per-size PNGs) in one run, ready for platforms that support theme switching.

Everything runs locally in your browser; images are never uploaded — safe for commercial logos.

FAQ