Reiconjs

Vanilla JS SVG icon functions for 2680+ icons in 2 weights (Outline & Filled) — zero dependencies, tree-shakeable, TypeScript-ready.

Install

npm i reiconjs
# or
bun add reiconjs

CDN (script tag)

<!-- Development version -->
<script src="https://unpkg.com/reiconjs@latest/umd/reiconjs.js"></script>

<!-- Production version -->
<script src="https://unpkg.com/reiconjs@latest"></script>

All icons are available on the global reiconjs object:

<script src="https://unpkg.com/reiconjs@latest"></script>
<script>
  document.body.appendChild(reiconjs.Home());
  document.body.appendChild(reiconjs.ShieldCheck({ size: 32, color: '#d97757' }));
  document.body.appendChild(reiconjs.AltArrowDown({ weight: 'Filled' }));
</script>

Usage

Create SVG elements

import { Home, ShieldCheck, AltArrowDown } from 'reiconjs';

// Create an SVG element and append to DOM
document.body.appendChild(Home());
document.body.appendChild(ShieldCheck({ size: 32, color: '#d97757' }));
document.body.appendChild(AltArrowDown({ weight: 'Filled' }));

Get SVG markup as a string

import { Home } from 'reiconjs';

const svgString = Home.toSvg({ size: 32, color: 'red' });
element.innerHTML = svgString;

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | size | number \| string | 24 | Icon size (number = px) | | color | string | currentColor | Primary icon color | | weight | IconWeight | Outline | Icon weight / style | | strokeWidth | number \| string | — | Override stroke width | | className | string | — | Additional CSS class | | attrs | object | — | Extra SVG attributes |

Weights

• Outline — clean outlined style (default)
• Filled — solid filled style

import { Home } from 'reiconjs';

Home()                                  // Outline (default)
Home({ weight: 'Filled' })              // Filled
Home({ weight: 'Filled', color: 'red' })

Direct icon import (smallest bundle)

import Home from 'reiconjs/icons/Home';

Icon Names

Icons use PascalCase names derived from their kebab-case originals:

| Original | Import | |----------|--------| | home | Home | | shield-check | ShieldCheck | | alt-arrow-down | AltArrowDown | | shopping-cart | ShoppingCart |

TypeScript

Full TypeScript support out of the box:

import { Home, IconOptions, IconWeight } from 'reiconjs';

const weight: IconWeight = 'Filled';
const options: IconOptions = { size: 32, color: '#d97757', weight };

const svg = Home(options);
document.body.appendChild(svg);

License

MIT © devchauhan