DEV Community: Rushan

Make your icons follow dark mode automatically with currentColor

Rushan — Thu, 16 Jul 2026 15:00:00 +0000

Most icon sets bake a color into the SVG. The fill is set to #111 in the file, so the icon looks right on a white page and then disappears the moment you switch to a dark background. You end up passing a color prop to every icon, or writing theme-specific overrides for each one.

GeoIcons take the other approach. Each icon draws its outline with stroke="currentColor", so it reads the CSS color of whatever wraps it. Set the text color for your light and dark themes once, and every icon on the page follows along:

import { Jp, Fr, De } from '@geoicons/react/countries';
import { EuropeanUnionEu } from '@geoicons/react/areas';

// None of these set a color. They all inherit the text color of the wrapper.
<div className="text-slate-900 dark:text-slate-100">
  <Jp size={40} /> 
  <Fr size={40} /> 
  <De size={40} /> 
  <EuropeanUnionEu size={40} />
</div>

Key takeaways

Every GeoIcon draws with stroke="currentColor", so it inherits the CSS color of its parent.

To support dark mode, set color for each theme in CSS. You never touch the icon.

A Tailwind class like dark:text-slate-100 works directly on the icon or on any ancestor.

What does currentColor do?

currentColor is a CSS keyword that means "the computed value of this element's color property." A GeoIcon sets stroke="currentColor" on its <svg>, so the outline paints in whatever color the icon inherits. Change the color anywhere up the tree, and the stroke changes with it.

That is the whole mechanism. There is no theme context, no provider, no color prop threaded through your components. The icon is a piece of text as far as color is concerned.

<p style={{ color: '#e11d48' }}>
  <Fr aria-hidden="true" /> France
</p>

The <Fr /> outline turns rose because it inherits color: #e11d48 from the paragraph.

Why do hardcoded icon colors break in dark mode?

An icon with a fixed fill="#111827" in its SVG cannot respond to a theme. Dark mode flips your background to near-black, and the icon stays near-black on top of it, so it vanishes. Your only fixes are to override the fill per theme or swap in a second icon file for dark backgrounds.

currentColor removes that work. The icon holds no color, so there is nothing to override. You style the container, and the icon inherits the result.

How do I switch icons for a dark theme?

Pick the color for each theme and let the icon inherit it. If you toggle dark mode with a class on <html> (the common pattern in Tailwind and most CSS setups), scope the color to that class:

:root {
  color: #0f172a; /* slate-900 for light mode */
}

.dark {
  color: #e2e8f0; /* slate-200 for dark mode */
}

Every icon under <html class="dark"> now paints in #e2e8f0. With Tailwind you can skip the CSS and put the two colors on the icon itself:

<De
  className="text-slate-900 dark:text-slate-100"
  aria-label="Germany"
/>

The text-* utilities set color, and the icon's currentColor stroke picks it up. One element, both themes.

How do I follow the system setting instead?

Read the operating system preference with the prefers-color-scheme media query and set color from it. This needs no JavaScript and no class toggle:

:root {
  color: #0f172a;
}

@media (prefers-color-scheme: dark) {
  :root {
    color: #e2e8f0;
  }
}

Now the icons track the user's system theme. Someone on a phone that flips to dark at sunset sees the lighter outline without any work from you.

Can I recolor an icon on hover?

Yes. Because the icon follows color, any state that changes color also changes the icon. A hover on the button recolors the outline inside it:

.icon-button {
  color: #64748b; /* slate-500 at rest */
}

.icon-button:hover {
  color: #2563eb; /* blue-600 on hover */
}

<button className="icon-button" aria-label="Filter by France">
  <Fr aria-hidden="true" />
</button>

The same idea covers focus rings and disabled states. You style the button, and the icon comes along.

Outline or solid: stroke versus fill

GeoIcons render as outlines. The stroke is currentColor and the fill is none, which is why theming runs through the stroke. If you want a solid glyph, set fill yourself and keep it on currentColor so it still follows the theme:

<Fr fill="currentColor" stroke="none" aria-label="France" />

Both the stroke path and a currentColor fill respect the same inherited color, so a solid icon themes exactly like an outline one.

FAQ

How do I make an icon change color in dark mode?

Set the CSS color property for your dark theme, either on a .dark class or through a prefers-color-scheme media query. GeoIcons draw with stroke='currentColor', so each icon inherits that color automatically. You do not pass a color prop to the icon itself.

Do I need a color prop on every GeoIcon?

No. Each icon borrows the CSS color of its container through currentColor. Set color once per theme and every icon follows. Pass an explicit stroke or fill only when a single icon needs to break from the surrounding text color.

Can I give one icon a different color from the surrounding text?

Yes. Pass an explicit stroke (or fill) on that single icon, such as stroke='#2563eb', or wrap it in an element that sets its own color. currentColor only applies when you leave the color unset, so an override on one icon does not touch the rest.

Get started

Install the package and let your theme drive the color:

npm i @geoicons/react

import { Jp } from '@geoicons/react/countries';

export default function App() {
  return (
    <span className="text-slate-900 dark:text-slate-100">
      <Jp aria-label="Japan" />
    </span>
  );
}

For every prop each icon accepts, see the GeoIcons API reference. To learn why importing icons this way keeps your bundle small, read why an icon library doesn't have to bloat your bundle. New here? Start with adding your first country icon or browse all 422 icons.

Introducing GeoIcons: 422 tree-shakable geographic icons

Rushan — Wed, 15 Jul 2026 06:27:44 +0000

GeoIcons is a library of geographic map icons for the web: 255 countries and 167 areas, 422 icons in total at the time of this post, built for React, Vue, Angular, and vanilla JS. More is on the way, including subdivisions and flags. Every icon is a named export, so your bundler keeps only the ones you import. Here are three of them, inheriting the current text color:

Key takeaways

422 icons: 255 countries (ISO 3166) + 167 areas (regions, continents, landforms, subdivisions).

Tree-shakable by design. One import ships one icon, not the catalog.

Themed with currentColor and an adjustable strokeWidth. Accessible out of the box.

React, Vue, Angular, and vanilla JS. Free under GPLv3, commercial license available.

What ships in the box

The set covers 255 country icons, named by their ISO 3166 alpha-2 code, and 167 area icons for regions, continents, landforms, and subdivisions. Enough to build a country picker or label a map legend without a second asset library.

Every icon is a single SVG component. No sprite sheet to host and no font to load.

One import ships one icon

GeoIcons has no central registry and no <Icon name="us" /> string API. Each icon is its own named export, which is what lets bundlers drop everything you never reference:

import { Us, Fr, Jp } from '@geoicons/react/countries';

export function Legend() {
  return (
    <ul>
      <li><Us aria-label="United States" /> United States</li>
      <li><Fr aria-label="France" /> France</li>
      <li><Jp aria-label="Japan" /> Japan</li>
    </ul>
  );
}

Import three icons and your build includes three icons. The other 419 never touch your bundle. For the mechanics behind that, read why an icon library doesn't have to bloat your bundle.

Themeable with currentColor

Icons paint with currentColor, so they follow the text color of whatever wraps them. Change weight with strokeWidth, or fill them solid. No CSS overrides, no per-icon color props to thread through your components:

// Default, colored, heavier stroke, filled
<Ng />
<Ng stroke="#2563eb" />
<Ng strokeWidth={1.5} />
<Ng fill="currentColor" />

Because color is inherited, the same icon works in light mode, dark mode, and on a colored button without any extra styling.

Accessible by default

Icons are decorative unless you say otherwise. Add a label and the icon becomes meaningful to screen readers:

<Us aria-label="United States" />

Under the hood each icon namespaces its <title> id with React's useId(), so rendering the same icon twice on a page never produces duplicate ids.

Four frameworks, one icon set

The same icons ship for every major framework, imported the same way:

import { Us } from '@geoicons/react/countries';   // React
import { Us } from '@geoicons/vue/countries';     // Vue
import { Us } from '@geoicons/angular/countries'; // Angular
import { Us } from '@geoicons/vanilla/countries'; // Vanilla JS

@geoicons/core holds the shared pieces the framework packages build on.

Naming you can guess

Countries use their ISO 3166 alpha-2 code in PascalCase: Us, Fr, Jp, De, Br. Areas use a slug in PascalCase, such as EuropeanUnionEu. If you know the country code, you know the import name, so autocomplete does most of the work.

Licensing

GeoIcons is dual-licensed. It is free under GPLv3 for open-source and GPL-compatible projects, and a commercial license covers everything else. Icons render the same either way. An unlicensed commercial use logs an offline console warning and nothing else, so nothing breaks at runtime.

Get started

Install the package for your framework and import your first icon:

npm i @geoicons/react

import { Us } from '@geoicons/react/countries';

export default function App() {
  return <Us aria-label="United States" />;
}

Full API, styling, and accessibility docs live in the docs, or browse all 422 icons to find what you need.