Usage

Install once. Import what you use.

Every icon is a typed React component with static exports, so bundlers keep only the icons you import.

Install

Add the package with your package manager. React 18 or newer.

bun add xiod-icons

Use

Import icons by name. They inherit the text colour and render at 24px unless you pass a size.

import { Search } from "xiod-icons";

export function SearchButton() {
  return (
    <button type="button">
      <Search size={16} />
      Search
    </button>
  );
}

Props

Every icon takes these props, plus any SVG attribute (className, style, onClick…).

Prop	Type	Default	Description
size	number \| string	24	Width and height of the icon.
color	string	"currentColor"	Stroke and fill colour. Follows the text colour.
strokeWidth	number \| string	1.5	Stroke width in 24×24 canvas units.
absoluteStrokeWidth	boolean	false	Keep the stroke the same number of pixels at any size.
variant	"outline" \| "duotone" \| "filled" \| "pixel" \| "glass" \| "dotted"	"outline"	Rendering treatment.
texture	"none" \| "paper" \| "fabric" \| "concrete" \| "wood" \| "metal" \| …	"none"	Procedural material painted into the icon.
textureOpacity	number (0–100)	100	Strength of the texture.
secondaryColor	string	color	Accent for duotone, glass and gradients.
gradient	boolean	false	Blend color into secondaryColor.
noise	number (0–100)	0	Grain over the icon.
radius	"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "full" \| number	"lg"	Corner rounding, rebuilt from the path data.
title	string	—	Accessible name. Without it the icon is hidden from screen readers.

Accessibility

Icons are aria-hidden by default. Name the control around them, or pass title when the icon carries meaning on its own.

// Decorative: the button's text names it, the icon is aria-hidden.
<button type="button">
  <Delete size={16} />
  Delete
</button>

// Icon-only control: name the control, not the icon.
<button type="button" aria-label="Delete">
  <Delete size={16} />
</button>

// Standalone and meaningful: give the icon a title.
<AlertCircle title="Payment failed" color="var(--destructive)" />

Imports

The root import tree-shakes in any modern bundler. Subpath imports skip the barrel entirely, which keeps dev servers from parsing it.

Root import

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

One icon per subpath

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

Icons render without client JavaScript, so they work in React Server Components as-is.

Dynamic icons

For icon names that come from data, such as a CMS or user settings. ArrowDown is named "arrow-down".

import { DynamicIcon, isIconName } from "xiod-icons/dynamic";

// `icon` comes from data: "arrow-down", "office-365", …
export function CategoryIcon({ icon }: { icon: string }) {
  return isIconName(icon) ? <DynamicIcon name={icon} size={20} /> : null;
}

Each icon loads on demand as its own chunk, with an empty placeholder of the same size (or your fallback) until it arrives. The name map is about 94 KB gzipped, so use static imports whenever you know the icon in advance; apps that never import xiod-icons/dynamic never include it.

Try every prop live

The playground previews all 5,437 icons with these props and writes the React code for you.

Open the playground