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 src="https://cdn.icoglyphs.com/v0/svg.js"></script>
  <style>
    icoglyph-svg {
      --ig-stroke: #333;
      --ig-stroke-width: 0.4rem;
      width: 32px;
      height: 32px;
    }
  </style>
</head>
<body>
  <icoglyph-svg use="arrow-right"></icoglyph-svg>
  <icoglyph-svg use="yes"></icoglyph-svg>
</body>
</html>

React

Web components work in React. Load the script in your index.html or dynamically in a useEffect. Use the element directly in JSX.

// Load once in index.html:
// <script src="https://cdn.icoglyphs.com/v0/svg.js"></script>

function Icon({ name, size = 24 }) {
  return (
    <icoglyph-svg
      use={name}
      style={{ width: size, height: size }}
    />
  );
}

// Usage
<Icon name="arrow-right" size={32} />

React 18: Properties like animation must be set via a ref because React 18 does not forward non-string props to custom elements. React 19 handles this automatically.

React 19 and the use attribute: use is also the name of a React 19 built-in hook. As a prop on a custom element it works correctly (JSX does not confuse it with the hook) but you may see a linter warning. If your setup flags it, use a wrapper component that reads its own prop and sets the attribute via a ref.

import { useRef, useEffect } from 'react';

function AnimatedIcon({ name, duration = 300 }) {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      ref.current.animation = { duration };
    }
  }, [duration]);

  return <icoglyph-svg ref={ref} use={name} />;
}

Next.js

Load the script in your root layout.js using the Script component with strategy="beforeInteractive". Mark any component that uses <icoglyph-svg> with "use client" since custom elements are client-side only.

// app/layout.js
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Script src="https://cdn.icoglyphs.com/v0/svg.js" strategy="beforeInteractive" />
        {children}
      </body>
    </html>
  );
}

// components/Icon.jsx
'use client';

export function Icon({ name, size = 24 }) {
  return (
    <icoglyph-svg
      use={name}
      style={{ width: size, height: size }}
    />
  );
}

Vue

Tell Vue to ignore the custom element to prevent warnings. Load the script globally in your index.html.

// vite.config.js
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag === 'icoglyph-svg'
        }
      }
    })
  ]
});

Then use the component in your templates:

<template>
  <icoglyph-svg
    :use="iconName"
    :style="{ width: size + 'px', height: size + 'px' }"
  />
</template>

<script setup>
defineProps({
  iconName: { type: String, required: true },
  size: { type: Number, default: 24 }
});
</script>

Svelte 5

Svelte 5 handles custom elements natively, no configuration needed. The example below uses Svelte 5 runes syntax ($props()).

<script>
  let { name = 'arrow-right', size = 24 } = $props();
</script>

<icoglyph-svg
  use={name}
  style="width: {size}px; height: {size}px;"
/>

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 output:

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&size=32">