Integration

HTML

Add the script once, then use <icoglyph-svg> anywhere in your markup. The component fetches icon data from the API on first use and caches it in memory.

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://cdn.jsdelivr.net/npm/@icoglyphs/svg@0.6.2"></script>
  <style>
    .icon { width: 32px; height: 32px; }
    icoglyph-svg {
      --icoglyph-stroke: #333;
      --icoglyph-stroke-width: 0.4rem;
    }
  </style>
</head>
<body>
  <div class="icon"><icoglyph-svg use="arrow-right"></icoglyph-svg></div>
  <div class="icon"><icoglyph-svg use="yes"></icoglyph-svg></div>
</body>
</html>

Static SVG (no JS)

For contexts where JavaScript is unavailable (GitHub READMEs, emails, markdown files), icons are served as plain images from the CDN. No animations, no CSS styling.

<img src="https://cdn.icoglyphs.com/svg/arrow-right" alt="Arrow right" width="24" height="24">

Three query parameters control the SVG output. In HTML, prefer CSS or width/height attributes to control size. The ?size param is mainly useful in Markdown where HTML attributes are not available:

Parameter	Default	Description
color	black	Stroke color. URL-encode hex values (e.g. `%23ff0000`)
stroke-width	6	Stroke width in viewBox units (100-unit viewBox)
size	100	Width and height in pixels (1-2048)

<img src="https://cdn.icoglyphs.com/svg/arrow-right?color=%232563eb&stroke-width=4" alt="Arrow right" width="32" height="32">