Theme-Aware Devicon Icons with CSS Custom Properties (and a Fallback Plan)

You've wired Devicon into a component library, and now design wants the tech-stack icons to follow the light/dark toggle. The naive route—swapping between plain and original classes, or shipping two sets of SVGs—duplicates markup and adds state to every component that renders an icon. There's a cleaner option: because Devicon is a font, its glyphs respond to ordinary CSS, and if your version of the stylesheet exposes --devicon-color and --devicon-size custom properties, one HTML snippet can adapt to any theme with zero JavaScript.

One caveat up front: the custom-property hooks are worth confirming against the exact devicon.css you ship (search the file for --devicon-color). If they're absent in your version, the same technique works by setting color and font-size directly—the variables are a convenience, not a requirement.

Why a font makes this easy

Devicon renders each logo as a single glyph through a base .devicon class plus a modifier like .html5-plain or .javascript-original. A glyph is text, so it inherits color and scales with font-size. That means theming is a typography problem, not an asset-management problem: one font file, one <i> tag, and CSS does the rest. Compared with an SVG sprite approach, you skip per-variant markup and let the cascade handle light/dark switching for free.

Worked example: a dark-mode-ready skill badge

Link the stylesheet in your page head (any static host or bundler that can serve CSS works; no special permissions needed):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">

Then define theme-scoped variables and render the icon:

:root {
  --icon-color: #1f2933;   /* light theme */
  --icon-size: 2rem;
}
[data-theme="dark"] {
  --icon-color: #e34f26;   /* HTML5 orange pops on dark */
}
.devicon {
  color: var(--icon-color);
  font-size: var(--icon-size);
  vertical-align: middle;
}
<i class="devicon html5-plain" title="HTML5"></i>

Flipping data-theme on <html> recolors every icon on the page without touching the DOM. If your devicon.css does define --devicon-color/--devicon-size, you can set those instead of color/font-size—the behavior is equivalent. To verify, toggle the attribute in DevTools and confirm the glyph changes color and that computed font-size matches your variable.

Trade-offs and limitations

Color fidelity. CSS recoloring only works cleanly on plain (single-color) variants. original multi-color glyphs are baked into the font; setting color won't recolor individual layers. If brand accuracy matters more than theming, use the original class or Devicon's SVGs and accept the extra markup.

Legacy browsers. CSS custom properties don't exist in IE11. There, the icon falls back to inherited color and default size—usually acceptable, but if you must support it, add a static fallback declaration before the var() line.

Layout shift. Changing font-size changes the glyph box. Without vertical-align: middle (and sometimes an explicit line-height), icons sized differently from surrounding text will drift off the baseline. Check alignment at both theme sizes.

Actionable closing

Pick the plain variant for any icon that must follow a theme, drive it with two CSS variables scoped to your theme attribute, and grep your pinned devicon.css to see whether the built-in --devicon-* hooks exist in your version. Test the toggle in your target browsers and eyeball vertical alignment next to real text. You'll get theme-aware icons with one font file and no per-icon state.