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
Corner Radius Scale
Nine steps from sharp to fully rounded, applied to every icon with one radius prop. Same library, a corner style that is yours.
None
XS
SM
MD
LG
XL
2XL
3XL
Full
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.
XiodIcons vs The Rest
One import, every style. Variants, gradients, and materials are props — not extra packages.
FeatureXiodIconsLucidePhosphorHeroiconsTablerHugeiconsMaterial 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.
5,437Icons
6Variants
10Textures
0Runtime Dependencies