CDN

You don’t need a build step to use Devicons. Individual SVGs are served from devicons.io, and the icon font, sprite, and catalog come from npm through public CDNs. This works for prototypes, CodePen demos, READMEs, and static HTML.

SVG files

Every icon file is published as a standalone, CORS-enabled SVG:

{file} is one of the icon’s file names, listed on each icon page (for example react, nextjs, nextjs-icon). Files ending in -icon are the glyph-only mark.

As <img>

<img
  src="https://devicons.io/devicons/icons/react.svg"
  alt="React logo"
  width="48"
  height="48"
/>

Markdown works too:

![PostgreSQL](https://devicons.io/devicons/icons/postgresql.svg)

Fetch and inline

Inlining the monochrome SVG lets it follow CSS color:

<span class="icon" data-icon="postgresql" aria-hidden="true"></span>

<script type="module">
  const BASE = "https://devicons.io/devicons/font";

  for (const el of document.querySelectorAll("[data-icon]")) {
    const file = el.getAttribute("data-icon");
    const res = await fetch(`${BASE}/${file}.svg`);
    el.innerHTML = await res.text();
  }
</script>

Icon font

One <link> tag is enough. Pin the version in production.

<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/devicons.css"
/>

Then use it:

<i class="devicons devicons-react"></i>

See the icon font guide for sizing and color.

SVG sprite

@dev.icons/core ships a color sprite at dist/sprite/sprite-symbol.svg: one <svg> with every icon file as a <symbol>. Symbol IDs are file names (#react, #nextjs-icon).

https://cdn.jsdelivr.net/npm/@dev.icons/[email protected]/dist/sprite/sprite-symbol.svg

<svg class="icon" width="24" height="24" role="img" aria-label="React logo">
  <use href="/sprite-symbol.svg#react"></use>
</svg>

Icon catalog

The list of icon files, with font codepoints, as JSON:

https://cdn.jsdelivr.net/npm/@dev.icons/[email protected]/dist/icons.json

For names, tags, and aliases, use https://devicons.io/search-index.json.

Versioning and caching

npm CDNs honor exact versions and semver ranges:

The devicons.io SVG URLs aren’t versioned. They always serve the current artwork.

When CDN is not enough

• Tree-shaken, typed components: @dev.icons/react, @dev.icons/vue, @dev.icons/svelte
• Programmatic access to the icon list: install @dev.icons/core locally