DEVICONS
Documentation

CDN

Use Devicons without npm — icon font, sprite, and raw SVGs straight from a CDN.

Every Devicons package is on npm, so every file is reachable through public CDNs. Use this for prototypes, CodePen demos, zero-build stacks, or loading SVGs from static HTML.

Icon font

One <link> tag is enough.

Provider
<link
rel="stylesheet"
href="https://unpkg.com/devicons@2.0.1/dist/devicons.css"
/>

Then use it:

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

See the icon font guide for sizing and color.

SVG sprite

A single <svg> containing every icon as a <symbol>. Reference with <use>. Good for pages with many icons.

Provider
<svg class="icon" width="24" height="24" aria-label="React logo">
<use href="https://unpkg.com/@dev.icons/core@1.1.0/export-files/sprite.svg#react"></use>
</svg>

Raw SVGs

Every icon is available as an individual SVG under export-files/icons/.

As <img>

<img
  src="https://cdn.jsdelivr.net/npm/@dev.icons/core@latest/export-files/icons/react.svg"
  alt="React logo"
  width="48"
  height="48"
/>

Fetch and inject

Fetching raw SVG markup lets you style it with CSS.

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

<script type="module">
  const BASE =
    "https://cdn.jsdelivr.net/npm/@dev.icons/core@latest/export-files/icons";

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

ES module via Skypack

No install, no bundler:

<script type="module">
  import { react, vue, postgresql } from "https://cdn.skypack.dev/@dev.icons/core@latest";

  document.getElementById("logo").innerHTML = react;
</script>

Icon variants

Most brands have a full logo and a glyph-only mark:

PathExample
icons/<slug>.svgicons/react.svg
icons/<slug>-icon.svgicons/nextjs-icon.svg

Versioning and caching

All CDNs honor semver ranges:

https://<cdn>/@dev.icons/core@1.2.3/export-files/icons/react.svg

When CDN is not enough