Designing Icons That Work in Both Light and Dark Mode

Icons are the unsung heroes of digital interfaces, quietly guiding users and communicating meaning in a glance. But as dark mode adoption grows, many developers and designers face a deceptively tricky challenge: creating icons that look crisp, accessible, and harmonious in both light and dark themes. Whether you’re building a design system, crafting a web app, or maintaining a component library, mastering adaptive icon techniques is now essential.

Let's dive into practical strategies for designing dark mode icons, leveraging CSS custom properties, the magic of currentColor, and adaptive SVG patterns. We’ll focus on scalable, maintainable solutions that make your icons shine—no matter the theme.

The Problem: Why Icons Break in Dark Mode

Switching to dark mode isn’t just about inverting backgrounds and text. Icons, especially SVGs or icon fonts, often get lost in the shuffle:

• Invisible on dark backgrounds: Black icons disappear on dark themes.
• Harsh contrast or color clashes: Some icons look jarring or inconsistent if not updated for both modes.
• Uneven accessibility: Poor contrasts can fail WCAG standards, impacting usability for many users.

Designing icons for both modes means rethinking color inheritance, context, and the mechanisms we use to render them.

Core Principles for Dark Mode Icon Design

Before we get hands-on, it helps to keep a few best practices in mind:

• Simplicity scales: Minimal, bold icon shapes tend to be more legible across themes.
• Color flexibility: Icons should inherit or adapt their color based on context—not hardcoded values.
• Accessibility first: Maintain good contrast ratios (at least 3:1 for UI icons per WCAG).
• Consistency: Icons should feel at home alongside text and other UI elements in any mode.

Let’s explore how CSS and SVGs can help you build adaptive icons that tick all those boxes.

Using CSS Custom Properties for Icon Colors

CSS custom properties (variables) are the cornerstone of modern theming. By defining color tokens for both light and dark themes, you can effortlessly switch icon colors in sync with your app.

Step 1: Define Theme Variables

Suppose you have a root stylesheet with theme colors:

:root {
  --icon-color: #222;    /* Default for light mode */
  --icon-bg: #fff;
}

[data-theme="dark"] {
  --icon-color: #fff;    /* Override for dark mode */
  --icon-bg: #181a1b;
}

Switching themes is usually as simple as toggling a data-theme attribute on your body or root element.

Step 2: Reference Variables in Icons

Apply these variables to your SVGs or icon containers:

.icon {
  color: var(--icon-color);
  background: var(--icon-bg);
}

Now, any SVG using currentColor (more on that next) will adapt instantly as the theme changes.

The Power of currentColor in SVGs

SVG graphics can inherit their color from CSS via the currentColor keyword. This keeps your icons in sync with their parent’s text color or a custom property—no need to manually update SVG fills or strokes.

Example: Adaptive SVG Icon

<span class="icon">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
    <path d="M12 2L2 22h20L12 2z" fill="currentColor"/>
  </svg>
</span>

Combined with the earlier CSS:

.icon {
  color: var(--icon-color);
}

This triangle icon will use the theme’s icon color automatically—no duplicate SVGs or color hacks required.

Pro tip: You can also use stroke="currentColor" for stroke-based icons.

Advanced: Adaptive SVGs With Inline Media Queries

For more nuanced icon theming—like multicolored icons or different tints for light/dark—you can use SVG’s prefers-color-scheme media queries within <style> blocks.

Example: Two-Tone SVG That Switches in Dark Mode

<svg viewBox="0 0 24 24" width="24" height="24">
  <style>
    .main { fill: #222; }
    .accent { fill: #4f8cff; }

    @media (prefers-color-scheme: dark) {
      .main { fill: #fff; }
      .accent { fill: #82aaff; }
    }
  </style>
  <circle class="main" cx="12" cy="12" r="10"/>
  <circle class="accent" cx="12" cy="12" r="5"/>
</svg>

The colors update automatically depending on the user’s OS theme—no extra JavaScript or CSS required. This is a powerful trick for svg dark mode support, especially for standalone SVG files or assets.

Icon Component Patterns in React (TypeScript)

Modern UI frameworks make icon theming even more dynamic. Here’s a robust pattern for a reusable, adaptive icon component in React with TypeScript:

type IconProps = React.SVGProps<SVGSVGElement> & {
  color?: string;
  size?: number;
};

export const AdaptiveIcon: React.FC<IconProps> = ({ color = 'currentColor', size = 24, ...props }) => (
  <svg
    width={size}
    height={size}
    fill={color}
    viewBox="0 0 24 24"
    aria-hidden="true"
    {...props}
  >
    <path d="M12 2L2 22h20L12 2z" />
  </svg>
);

Usage:

<AdaptiveIcon style={{ color: 'var(--icon-color)' }} />

Or, let it inherit from text:

<span style={{ color: 'var(--icon-color)' }}>
  <AdaptiveIcon />
</span>

This pattern ensures your icons are adaptive icons: scalable, theme-aware, and easy to override when needed.

Multi-Color and Themed Icon Sets

For more expressive iconography—think status indicators or brand colors—you can mix currentColor with fixed fills, CSS variables, or SVG-level media queries. Some icon libraries (like Heroicons or Feather) already use these patterns, but you can roll your own as needed.

If you need to generate SVG icons programmatically or explore a wide range of adaptive icon styles, tools like Figma, SVGOMG, and AI-powered generators such as IcoGenie can help streamline your workflow by allowing you to preview and export icons optimized for both light and dark themes.

Testing Your Dark Mode Icons

Before shipping, verify your icons in both modes:

• Visual checks: Toggle your theme and scan all icons for clarity and contrast.
• Accessibility audits: Use tools like axe or Lighthouse to check color contrast ratios.
• Automated tests: If you’re using a component library, snapshot testing can catch regressions.

Remember, icons should never be the sole means of conveying critical information—always pair with accessible labels for the best UX.

Common Pitfalls and How to Avoid Them

• Hardcoded colors: Avoid embedding static colors in SVGs; prefer currentColor and CSS variables.
• Exporting SVGs with inline styles: Some design tools bake colors into SVG output. Clean them up before use.
• Ignoring accessibility: Test with color blindness simulators; ensure adequate contrast.
• Forgetting hover/active states: Adaptive icons should respond to UI states, not just themes.

Key Takeaways

• Use CSS custom properties and currentColor to let icons adapt seamlessly to both light and dark themes.
• SVGs support powerful theme-aware techniques, including inline media queries with prefers-color-scheme.
• Component-based approaches in frameworks like React make adaptive icon integration easy and scalable.
• Always test your icons for accessibility and visual clarity in every mode.
• Explore icon design and export tools that support theme adaptation to streamline your workflow.

By embracing these strategies, your dark mode icons will look sharp, consistent, and accessible—no matter how your users like to experience your app.