The official vanilla JavaScript package and CDN web components for Reicon. This package allows you to easily add precise, vector-based SVG icons to any JavaScript project or web application without framework dependencies.
- Import individual icons as DOM element factories in vanilla JS
- Fetch SVG markup as strings directly (fully SSR/Node.js compatible)
- Register and render custom elements (
<re-icon>) inside HTML templates or SPAs - Load all icons via CDN script tags without build steps or bundlers
- Tree-shake unused icons automatically when using modern bundlers
Install the package using your preferred package manager and import tree-shakeable icons directly in your application code.
npm install reicon
# or
yarn add reicon
# or
pnpm add reiconImport named icons directly from reicon. Each icon is a factory function that returns a native SVGSVGElement.
import { Home, ShieldCheck } from 'reicon';
// Create SVG elements
const home = Home({ size: 24 });
const shield = ShieldCheck({ size: 32, color: '#6C5CE7', weight: 'Filled' });
// Append directly to document
document.body.appendChild(home);
document.body.appendChild(shield);To render icons on the server (SSR, Node.js, or framework environments), use the toSvg() method on the icon functions. This returns raw SVG strings without using DOM APIs.
import { Home } from 'reicon';
// Get raw SVG string - works on server side!
const svgString = Home.toSvg({ size: 24, color: 'currentColor' });
// Inject into HTML output
res.send(`<div class="icon-wrap">${svgString}</div>`);You can register and import the web component runtime right from your npm installation. Simply import reicon/element once in your application entry point.
import 'reicon/element';
// Now use <re-icon icon="home"></re-icon> in your HTML templates!For optimal build performance, import individual icons directly from their path:
import Home from 'reicon/icons/Home';
const homeSvg = Home({ size: 24 });Perfect for static HTML websites, legacy applications, and prototyping. Include a script tag and render icons instantly.
Include the script tag inside your HTML page. This registers a reactive <re-icon> component that supports dynamic styling, sizes, weights, and gradients.
<script src="https://unpkg.com/reicon/cdn/reicon.js"></script>Or load a specific version: https://unpkg.com/reicon@latest/cdn/reicon.js
Simply add the <re-icon> tags directly in your HTML:
<re-icon icon="home"></re-icon>
<re-icon icon="shield-check" weight="filled" size="32" color="#6C5CE7"></re-icon>If you want to use the global reicon object functions directly in a browser script tag:
<script src="https://unpkg.com/reicon@latest/umd/reicon.js"></script>
<script>
// Create icon elements via global object
document.body.appendChild(reicon.Home({ size: 32 }));
</script>You can customize <re-icon> elements using reactive HTML attributes. Updates will be rendered instantly.
<!-- Size -->
<re-icon icon="home" size="16"></re-icon>
<re-icon icon="home" size="32"></re-icon>
<!-- Color -->
<re-icon icon="heart" color="#ef4444"></re-icon>
<re-icon icon="heart" color="rgb(99, 102, 241)"></re-icon>
<!-- Weight -->
<re-icon icon="star" weight="outline"></re-icon>
<re-icon icon="star" weight="filled"></re-icon>The <re-icon> element acts like an inline block. It automatically inherits its parent's text color, allowing CSS utility-classes to adjust color naturally.
<style>
.icon-primary {
color: #6C5CE7;
}
</style>
<re-icon icon="home" class="icon-primary"></re-icon>
<!-- Inherits color from parent -->
<div style="color: #ef4444;">
<re-icon icon="heart"></re-icon>
</div>A complete HTML document importing Reicon via CDN and showcasing customizations:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reicon Page</title>
<script src="https://unpkg.com/reicon@latest/cdn/reicon.js"></script>
</head>
<body>
<nav>
<re-icon icon="home" size="20"></re-icon>
<re-icon icon="user" size="20"></re-icon>
</nav>
<main>
<h1>
<re-icon icon="shield-check" size="28" weight="filled" color="#6C5CE7"></re-icon>
App Verified
</h1>
</main>
</body>
</html>Note: If you are compiling your project with modern bundlers (e.g. Vite, Webpack, rollup), prefer installing via
npm install reiconto enjoy full tree-shaking, static typing, and faster loading speeds.