Icon

The Icon component provides a flexible system for displaying SVG icons with customizable sizes, weights, styles and themes.

Basic usage

The Icon component requires an SVG name and supports extensive customization options.

Component anatomy

Size

Control icon dimensions using the size Input with seven available options:

• XXS: 16px
• XS: 20px
• SM: 24px
• MD: 32px (default)
• LG: 40px
• XL: 56px
• XXL: 72px

Theme

Define icon colors using the theme Input, supporting multiple semantic themes:

• Neutral Primary (default)
• Neutral Secondary
• Brand Core/Alt/CTA
• Success/Danger/Alert
• Info/News

Weight

Adjust icon weight using the weight Input, ranging from 100 to 700:

• Thin (100)
• Light (300)
• Regular (400, default)
• Medium (500)
• Bold (700)

Style

Choose icon style using the style Input:

• Filled (default)
• Outlined

RTL Support

Icons automatically mirror in RTL layouts when RTL variants are available. No additional configuration needed.

Negative Theme

Enable negative variant using the negative Input for dark backgrounds. Automatically adjusts colors for proper contrast.

Accessibility

Non-interactive Nature

Icons are non-interactive by default (inert attribute), serving as decorative elements.

Color Contrast

Maintains proper contrast ratios:

• Icon colors against backgrounds
• All theme variations
• Negative theme support
• RTL adaptations

Best Practices for Developers

1. Icon Selection DEMO HERE

2. Theme Usage DEMO HERE

3. Size Guidelines DEMO HERE