Dynamic Tech‑Stack Icons with Devicon CSS Variables

Why Static Icon Colors Are a Pain

When building a portfolio, you usually list the technologies you know. Most tutorials show the devicon font with its default colors. Those colors are hard‑coded in the CSS – .devicon-html5-plain always renders in orange, .devicon-python-plain in blue, etc. If your site has a light and a dark theme, the icons will clash with the background unless you replace the whole icon set or resort to inline SVGs.

Thesis: CSS Custom Properties Make Icon Colors Theme‑Aware

Devicon’s latest releases expose CSS variables such as --devicon-color. By overriding these variables you can change every icon’s hue without touching the font file or swapping images. The result is a lightweight, font‑based icon set that stays in sync with your site’s color palette in real time.

How to Hook CSS Variables into Devicon

1. Load the latest Devicon CSS (the colored variant is optional because we’ll override the colors anyway):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devicon@latest/devicon.min.css">

2. Define a root variable that will drive all icons:

:root {
  --devicon-color: #333; /* default – will be overridden per theme */
}

3. Tell Devicon to use the variable for its glyphs. The library already uses color: var(--devicon-color) in its base rule, so you only need to make sure the variable is set in the scope where the icons live. If you want a per‑icon override, you can set a custom variable on that element:

<i class="devicon-python-plain colored" style="--devicon-color: #ff4500;"></i>

4. For a full‑site theme toggle, change the variable on a high‑level selector (e.g., body or :root):

.light-theme {
  --devicon-color: #333;
}
.dark-theme {
  --devicon-color: #ddd;
}

5. Add a tiny JavaScript toggle that flips the theme class on body:

document.getElementById('theme-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark-theme');
});

With this setup, clicking the toggle instantly changes every icon’s hue to match the new theme, without reloading or re‑rendering the page.

Concrete Example: A Minimal Portfolio Tech‑Stack

Below is a self‑contained snippet you can drop into an HTML file. It shows a light/dark toggle and a list of icons that respond to the theme change.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Devicon Theme Demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devicon@latest/devicon.min.css">
  <style>
    :root { --devicon-color: #333; }
    .light-theme { --devicon-color: #333; }
    .dark-theme { --devicon-color: #ddd; }
    body { font-family: sans-serif; padding: 2rem; background: var(--bg); color: var(--fg); }
    .light-theme { --bg: #fff; --fg: #000; }
    .dark-theme { --bg: #121212; --fg: #fff; }
    .tech-list { list-style: none; display: flex; gap: 1rem; }
    .tech-list i { font-size: 3rem; }
  </style>
</head>
<body class="light-theme">
  <button id="theme-toggle">Toggle Theme</button>
  <ul class="tech-list">
    <li><i class="devicon-html5-plain colored"></i> HTML5</li>
    <li><i class="devicon-css3-plain colored"></i> CSS3</li>
    <li><i class="devicon-javascript-plain colored"></i> JS</li>
    <li><i class="devicon-python-plain colored"></i> Python</li>
  </ul>
  <script>
    document.getElementById('theme-toggle').addEventListener('click', () => {
      document.body.classList.toggle('dark-theme');
    });
  </script>
</body>
</html>

Open the file in a browser, click the button, and watch all icons change color instantly. No image assets were swapped, and the page load stays under 5 KB because the icons are still a single font file.

Trade‑Offs and Limitations

• Browser support: CSS custom properties are supported in all modern browsers, but Internet Explorer and very old Edge versions ignore them. In those cases the icons fall back to Devicon’s default colors.
• Version dependency: The --devicon-color variable was introduced in Devicon v4.0.0. If you use an older release, the variable will be undefined, and the icon colors will not change.
• Overriding complexity: While a single variable covers most use cases, per‑icon color overrides require inline styles or additional CSS rules, which can become cumbersome for large stacks.
• Visual consistency: Because the font glyphs are monochrome by default, the color change is limited to a single hue. If you need multi‑colored icons (like the official logos), you’ll still need the colored variant or SVGs.

How to Verify the Setup Works

1. Open the page in Chrome or Firefox and inspect the i elements. The color property should be set to var(--devicon-color).
2. Open DevTools, change --devicon-color in the :root rule to a bright value (e.g., #ff0000) and observe the icons update live.
3. Check the Devicon GitHub README or the devicon.min.css file for the presence of --devicon-color to confirm you’re using a recent version.

Actionable Takeaway

If you want a lightweight, theme‑aware tech‑stack display, load the latest Devicon CSS, declare a --devicon-color variable, and tie that variable to your site’s color scheme. The result is a single font file that adapts to light and dark modes in real time, keeping your portfolio sharp without extra image files or complex SVG manipulation.