xiod-icons

v1.1.2

Published

2 days ago

5,400+ precision-crafted React icons with six variants, ten procedural SVG textures, a corner radius scale, and typed props — rounded, tree-shakeable, and free of runtime dependencies beyond React.

XiodIcons

Precision-Crafted React Icon Library - 5,400+ Icons, 6 Variants, 10 Procedural Textures, Tailwind-Style Corner Radius. Typed Props, Tree-Shakeable, and No Runtime Dependencies Beyond React.

XiodIcons is a collection of rounded, precision-crafted SVG icons that share one design language: a 24 × 24 canvas, a 1.5 stroke, and continuous squircle-style corners. Every icon is a React component with typed props, so size, color, and stroke are set the same way everywhere.

Style is a prop, not a second package. Switch the same import between outline, duotone, filled, pixel, glass, and dotted; add a two-color gradient; paint the icon itself with wood, marble, metal, or seven other materials generated from SVG patterns and filters; and tune corner roundness across the whole set with a radius scale from none to full. Each icon is its own module, so only the icons you import end up in your bundle.

Website & playground: icons.xiod.dev

Features

5,400+ icons — one consistent rounded outline style, in a single package.
Six variants — outline, duotone, filled, pixel, glass, and dotted, switched with a prop.
Duotone and gradients — a secondaryColor accent, with no SVG defs to write.
Ten procedural textures — paper, fabric, concrete, wood, metal, marble, leather, carbon, ceramic, and terrazzo; no images or downloads.
Corner radius scale — none to full, applied to every icon's corners at once.
Constant stroke across sizes — absoluteStrokeWidth keeps a stroke the same thickness when you scale.
Tree-shakeable and typed — per-icon modules, TypeScript declarations, and no runtime dependencies beyond React.
Icons by name — DynamicIcon renders icons whose names come from data, loading each one on demand.

Comparison

| Feature | XiodIcons | Lucide | Phosphor | Heroicons | Tabler | Hugeicons | Material Icons | | :-------------------------------------------------- | :-------: | :----: | :------: | :-------: | :----: | :-------: | :------------: | | Switch style with a prop — same import | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | | Corner radius from sharp to round, one prop | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | | Duotone and gradients with a second color | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | | Pixel, dotted & glass styles built in | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | | Procedural material textures — wood, marble, metal… | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | | Constant stroke width at any size | ✅ | ✅ | ❌ | ❌ | ❌ | ✅ | ❌ | | 5,000+ icons | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ | ❌ |

Compared against the free React packages of Lucide 1.48, Phosphor 2.1, Heroicons 2.2, Tabler 3.48, Hugeicons 4.3 and Material Icons 9.4 (September 2026).

Icon counts are distinct icons, not the same icon in several styles. Every library here ships TypeScript types and tree-shakeable per-icon modules.

Installation

XiodIcons requires React 18 or later. It ships ES modules and TypeScript declarations. CommonJS require() works too on Node 20.19+ and 22.12+, which load ES modules natively, so tools such as Jest need no extra setup.

# npm
npm install xiod-icons

# pnpm
pnpm add xiod-icons

# yarn
yarn add xiod-icons

# bun
bun add xiod-icons

Quick start

Import an icon by name and use it as a React component:

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

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

Icons inherit the surrounding text color by default. Set size, color, and strokeWidth directly, or use standard SVG props such as className and style.

import { Home } from "xiod-icons";

export function NavigationIcon() {
  return <Home size={24} color="currentColor" strokeWidth={1.5} />;
}

Variants

Switch the style of any icon with the variant prop — the import stays the same.

import { Sparkles } from "xiod-icons";

export function AccentIcon() {
  return <Sparkles size={48} variant="duotone" color="#6366f1" secondaryColor="#a5b4fc" />;
}

Available variants: outline (default), duotone, filled, pixel, glass, and dotted.

For a two-color gradient, set gradient and secondaryColor. Glass uses a gradient automatically when no texture is selected, plus a CSS drop shadow.

Textures

Apply a material to the icon itself — not its background. Every texture is generated with SVG patterns, gradients, and filters. No images, downloads, or extra dependencies are required.

import { Heart } from "xiod-icons";

export function MaterialIcon() {
  return <Heart size={64} variant="filled" texture="marble" />;
}

Available textures: paper, fabric, concrete, wood, metal, marble, leather, carbon, ceramic, and terrazzo. Use none (default) for normal icon colors.

Textures work with every variant and replace its color or gradient. Their detail is easiest to see on larger icons and filled shapes. textureOpacity fades the textured geometry; it does not blend a material over the original icon color.

Radius

Tune corner roundness across every icon with a Tailwind-style scale. Icons use lg by default.

import { Folder } from "xiod-icons";

export function SharpIcon() {
  return <Folder size={32} radius="none" />;
}

Available values: none, xs, sm, md, lg, xl, 2xl, 3xl, and full, or a number for the corner size in 24 × 24 canvas units. Radius works with every variant and texture.

Props

All icons accept standard React SVG props and forward their ref to the SVG element.

| Prop | Default | Description | | --------------------- | ---------------- | ----------------------------------------------------------------------------- | | size | 24 | Width and height, as a number or string. | | color | "currentColor" | Icon color; inherits text color by default. | | strokeWidth | Authored width | Stroke width for the whole icon. Icons are drawn at 1.5. | | absoluteStrokeWidth | false | Keep a numeric strokeWidth the same number of pixels at any numeric size. | | variant | "outline" | One of the six variants above. | | texture | "none" | One of the ten materials above, or none. | | secondaryColor | Same as color | Accent color for duotone and gradients. | | gradient | false | Enable a two-color gradient. | | textureOpacity | 100 | Material opacity, from 0 to 100. | | noise | 0 | Grain intensity, from 0 to 100. | | radius | "lg" | none to full, or a corner size in canvas units. | | title | — | Accessible name; adds an SVG title and role="img". |

Use standard SVG opacity for overall opacity (0–1), and style for transforms or blur. Use numeric pixel sizes with absoluteStrokeWidth; it does not measure CSS-driven dimensions.

Accessibility

Icons are decorative (aria-hidden="true") unless given a title. Label the control rather than the icon when it already has a clear purpose:

import { Search } from "xiod-icons";

export function IconButton() {
  return (
    <button type="button" aria-label="Search">
      <Search size={20} />
    </button>
  );
}

For a standalone meaningful icon, use a title, for example <Search title="Search" />. If supplying your own aria-label instead of a title, also set aria-hidden={false} and role="img".

TypeScript

Use the exported types when building reusable components:

import { Search, type IconProps } from "xiod-icons";

export function SearchIcon(props: IconProps) {
  return <Search size={20} {...props} />;
}

IconComponent, IconVariant, IconTexture, and IconRadius are also exported.

Hover an icon in your editor to see its name, its DynamicIcon name, and a link to preview and customize it in the playground.

Imports and bundle behavior

Named imports are statically tree-shakeable with a compatible bundler. Direct imports are also available to keep the development module graph smaller:

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

Both forms use the same renderer and support the same props. Unused icon modules can be removed by your bundler; the shared presentation renderer is included with the icons you import. No runtime icon registry or stylesheet setup is required.

Dynamic icons

When the icon name comes from data, such as a CMS, a database, or user settings, render it with DynamicIcon from xiod-icons/dynamic. Names are the kebab-case form of the component name: ArrowDown is "arrow-down", Office365 is "office-365".

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

export function CategoryIcon({ icon }: { icon: string }) {
  return isIconName(icon) ? <DynamicIcon name={icon} size={20} /> : null;
}

DynamicIcon takes every icon prop plus name and an optional fallback. Each icon loads on demand as its own chunk; until it arrives, and during server rendering, an empty <svg> of the same size holds its place, or your fallback if you pass one. An icon loaded once renders immediately everywhere after that.

The entry also exports iconNames (every name), isIconName (checks a string from data), the IconName type, and dynamicIconImports, the name-to-loader map for building your own loading.

DynamicIcon carries a map of every icon name, about 94 KB gzipped, so prefer static imports whenever you know the icon while writing the code. Apps that never import xiod-icons/dynamic never include the map.

Rendering notes

Filled and duotone are generated from outline geometry, not separately drawn glyphs. Open paths can close unexpectedly, so preview your icon at its target size.
Pixel and dotted use a 12×12 sampling grid; fine details may be lost.
Effects are clipped to the 24×24 icon canvas. Custom SVG children are appended unchanged and are not textured.
Effect IDs use React useId for server rendering and hydration. If your app has multiple independent React roots, give each a distinct identifierPrefix.

Changelog

Every release and what changed in it is listed in CHANGELOG.md, included in the package, and at icons.xiod.dev/changelog.

Support

Browse every icon and try each prop in the playground at icons.xiod.dev.

License

Licensed under PolyForm Perimeter 1.0.1. Use in personal projects, hobby projects, and commercial projects is permitted subject to the license, including its restriction on providing competing products. This is not an unrestricted open-source license.

When distributing any part of the package, include the license terms or their URL and the required copyright notice below. The complete license and notice are also included in the package's LICENSE file.

Required Notice: Copyright 2026 ImKKingshuk (https://github.com/ImKKingshuk)