Devicon Inline SVG: Skip the Webfont and Verify Variants First

You added the Devicon webfont, and half your icons are missing

You add a “Technologies” section to your project page, load the Devicon webfont stylesheet, and several icons render as blank boxes or fail to appear at all. The problem is usually not your CSS. It is how the icons are delivered. Devicon ships SVG icons alongside an older webfont, and for most web UIs the inline SVG approach is more reliable.

Takeaway: install the npm package, look up the exact class in devicon.json, embed the matching SVG markup directly in your HTML, and pin the package version so a major release cannot rename your icons overnight.

Why inline SVG avoids the webfont headaches

The legacy Devicon webfont loads a separate font file. That creates three common failure modes: CORS errors when the font is hosted on another domain, a flash of unstyled text while the font loads, and missing glyphs for icons added after the font was last built. Inline SVG places the icon markup in your HTML, so the browser renders it with no extra network request. You can also control size, fill, and hover color with ordinary CSS. The trade-off is more markup than a single <i> tag, and you are responsible for keeping the package current.

Find the exact class before you write HTML

Not every tool exists in every variant. devicon.json is the package manifest that lists every supported icon, its class name, and the variants available. Open it after installing the package and search for your tool. Do not assume devicon-<name>-plain exists; verify the spelling and variant list first.

Worked example: add a Vue.js badge

1. Run this in your project root:

npm install devicon --save-dev

This requires no special permissions. It downloads the package into node_modules.

1. Inspect the manifest:

node -e "const m = require('./node_modules/devicon/devicon.json'); const v = m.find(i => i.id === 'vuejs'); console.log(v ? JSON.stringify(v, null, 2) : 'not found')"

Expected check: the command prints an object containing vuejs and its versions array. If it prints not found, the tool ID is different or the installed version is too old. Risk: copying the wrong SVG file or class name if you skip this check.

1. Locate the SVG file for the variant you want inside the package’s icons folder, copy its markup into your page, and add the class from the manifest:

<svg class="devicon-vuejs-plain colored" viewBox="0 0 128 128" width="48" height="48">
  <!-- copy the actual SVG paths from the package file here -->
</svg>

The colored variant applies brand colors; plain renders a monochrome version. Replace the comment with the real paths from the SVG file.

1. Verify in the browser: the Vue logo appears at 48×48 pixels with no console errors and no external font request.

Trade-offs and limits

Wordmark variants include the tool name as text and can break tight layouts below 24 pixels. Test them at small sizes before using them in navigation or badges. Community-maintained React, Vue, and Angular wrappers may lag behind new icons, so the raw HTML/CSS path is the most stable route. Major Devicon releases can rename classes or remove icons, which is why pinning the version in package.json matters.

Before your next deploy

Open devicon.json, confirm the exact class for each tool in your stack, and switch any webfont references to inline SVG. Pin the version, test at 24 pixels and below, and your tech-stack badges will load without extra network requests.