Pricing
Buy Now

Icon System

Examples and documentation for the icon system component

Icon System

SVG icons with various color classes applied. All icons use the SVG system with proper color inheritance. Compare outlined (default) and filled variants.

Material Design Icons - Outlined vs Filled

Outlined Primary:
Filled Primary:
Outlined Success:
Filled Success:
Outlined Danger:
Filled Danger:

Filled Icon Variants

Material Design icons with filled variants using the new filled prop. Brand icons don't support filled variants.

Heart Outlined:
Heart Filled:
Settings Outlined:
Settings Filled:
Home Outlined:
Home Filled:

Brand Icons - Different Colors

Font Awesome brand icons fetched as SVGs, supporting all color variations and proper sizing. Note: Brand icons don't support filled variants.

Google:
X-Twitter:
Facebook:
Instagram:
GitHub:
LinkedIn:

Icon Sizing System

All icons support consistent sizing from XXS to XXL, with proper SVG scaling and CSS-based dimensions.

XXS (18px):
XS (20px):
SM (24px):
MD (24px):
LG (36px):
XL (48px):
XXL (64px):

Different Icon Types

Various Material Design icons demonstrating the unified SVG system with consistent styling.

Heart:
Settings:
Search:
Home:
User:
Add:

Icon Usage Examples

Code examples showing how to use the icon component with different props.

Basic Usage

<x-ui.icon name="star" />

With Color

<x-ui.icon name="star" color="primary" />

With Size

<x-ui.icon name="star" size="lg" />

With Custom Class

<x-ui.icon name="star" class="my-custom-class" />

Filled Variant

<x-ui.icon name="star" filled color="primary" />

Brand Icons

<x-ui.icon name="x-twitter" color="black" size="lg" />

Icon Weight System

Material Design icons automatically use different weights based on the variant. Outlined icons use weight 500, filled icons use weight 700.

Weight 500 (Outlined):
Weight 700 (Filled):
Weight 500 (Outlined):
Weight 700 (Filled):