Usage Docs

Engineered for speed.
Integrated in seconds.

Pure ESM modular outputs, strictly typed React parameters, native server component readiness, and absolute tree-shaking compliance out of the box.

1. Package Installation

Add XiodIcons to your codebase using your favorite runtime or manager.

~bun add xiod-icons

2. Component Playground

Adjust props in real-time to preview component styling options.

Select Glyph

Component Size24px

16px (Min)40px64px (Max)

Stroke Width1.5px

1.0px (Hairline)2.0px3.0px (Heavy)

Color Theme SwatchViolet Accent

Canvas Preview (Scaled 100%)[x-coord: 24px, w-stroke: 1.5px]

Usage Code snippetReal-Time Generated

import { Search } from "xiod-icons";

export default function IconDemo() {
  return (
    <Search
      size={24}
      strokeWidth={1.5}
      className="text-primary"
    />
  );
}

3. Import Strategies

Select the layout structure that best matches your project scale and build speed requirements.

Root Import (Bundler Optimization)

Standard import syntax ideal for most modern React setups. Uses Rollup / esbuild side-effect-free compiler optimizations to naturally strip unused glyphs.

import { Search, Zap } from "xiod-icons";

Tree-Shaking:PURE compiler shake

Direct Subpath (Isolated Node graph)

Imports individual icons explicitly. Bypasses the bundler's tree-shaking scanner completely, creating lightning-fast development startup times.

import { Search } from "xiod-icons/icons/Search";

import { Zap } from "xiod-icons/icons/Zap";

Dev reload cost:0ms scanner footprint

React Server Components & Next.js readyrsc native

Because every single component in XiodIcons is built as side-effect-free, hook-less static code, they are 100% compatible with modern Next.js App Router and React Server Components (RSC) out of the box. They require **exactly 0 bytes of client-side JavaScript hydration footprint**, rendering directly as static HTML assets.

Visual registry

Looking for a specific visual glyph or direction? Head to our visual gallery to browse the complete library and copy component imports instantly.

Browse icon gallery