Buzzy UI - Icon System

Material Design Icons - Outlined vs Filled

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

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):