Xpressive Icons
Optimized for Developers
A React icon library with six expressive variants and ten SVG textures. Find your icon, customize it in the playground, and bring it into your project with typed props.
Zero Noise. Pure Developer Flow.
Find your icon, choose a variant, and make it your own with SVG textures. Preview it in the playground, then bring it into React with a few typed props.
Six Icon Variants
From clean outlines to glass and dotted styles. One component, controlled with a single variant prop.
Outline
Duotone
Filled
Pixel
Glass
Dotted
SVG Materials
Ten textures, from paper and fabric to marble and terrazzo. Applied to the icon itself—no images or extra dependencies.
Paper
Fabric
Concrete
Wood
Metal
Marble
Leather
Carbon
Ceramic
Terrazzo
Named Imports
Import React components directly from the package without extra wrappers.
index.tsx
package.json
123
import { Search Search, Github Github } from "xiod-icons";
const App = () => <Search size="16" />;
Predictable Nomenclature
Every component follows a strict, predictable grammatical schema built directly from scratch. Find and remember icons naturally without consulting documentation.
Semantic Schemapredictable DX
Naming Formula
1. Base"Arrow"
2. Direction"+ Right"
3. Shape"+ Triangle"
ArrowRight
Base glyphArrowRightTriangle
Triangle headArrowRightDouble
Action modifierTree-Shakeable ESM
Engineered with side-effect-free ESM modules to keep your bundles minimal. Deep tree-shaking includes your selected icons and the shared renderer, not the entire collection.
Source Registry5,427 items
ESM Pipeline
dist/index.js
Tree-shakenimport { createIcon } from "./chunk.js";
export const Search =/* @__PURE__ */
export const Github =/* @__PURE__ */
Pixel-Perfect
Every vector is hand-aligned to a strict 24px grid for razor-sharp rendering on any screen density.
-120px-60px0px60px120px
-40px-20px0px20px40px
W: 24.00px
H: 24.00px
0, -12
0, 12
-12, 0
12, 0
-7, 0
-2, 5
7, -4
Instant Search
Search by name, browse a broad category, or narrow down to an icon family. Customize your selection in the live playground.
Search icons...user
5,427 icons3 matches
AllArrowsMediaUsers
Computer
User
Code
UserCheck
Database
UserGroup
React Server Ready
Strictly typed components with forwardRef, ready for Next.js, Remix, and React Server Components (RSC) out of the box.
profile.tsx (Server)
import { UserCheck } from "xiod-icons";
import { db } from "@/lib/db";
export async function Page() {
const user = await db.query();
return <UserCheck title={user.name} />;
}
db.query()0.4ms
RSC Payload
Server-rendered SVG
xiodicons.com/profile
StreamedDeveloper AccountVerified Member
Server outputInline SVG output
Find it. Style it. Make it yours.
Browse thousands of icons by category and family. Start with a clean outline, then explore six variants and ten SVG textures in the playground.
Engineered for Flawless Integration.
Xiod Icons is not just a bundle of SVGs; it is a meticulously layered design system. Every component is hand-refined, strictly typed, and verified to compile down to the absolute minimum footprint.
Precision Vector Core
Meticulously craft clean vector geometry on a strict pixel grid.
Semantic Alignment
Enforce uniform nomenclature, logical grouping, and clean schemas.
React ESM Compilation
Compile optimized, side-effect-free React modules natively.
Production Verification
Validate bundle sizes, type safety, and tree-shaking efficacy.
Layer 01: Vector Geometry[z-axis: -75.00]
Raw Coordinate Glyphs (5.4k files)
Layer 02: Semantic Schema[z-axis: +80.00]
Formula: Object Taxonomyverifying grammar...
Base"Arrow"
+Dir"Right"
+Style"Triangle"
"ArrowRightTriangle"
pascal-case
Predictable Naming Taxonomy Resolved
Layer 03: Production Ready[z-axis: +230.00]
Module: dist/icons/ArrowRightTriangle.js100% Shakeable
export const ArrowRightTriangle
= /* @__PURE__ */ createIcon(
"ArrowRightTriangle", paths);
Static per-icon exportsSide-effect-free ESM
Xiod Icons
Tree-shaking: PURE