Icon Properties
Customizable icon component with multiple styling options, sizes, and color variants. Enhances UI with visual cues and supports both light and dark modes.
Component Setup
Create or update your icon component
Copy this code to create your icon component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Variant Icon
Icons with different style variants.
Stroke Variants
Color options for icon strokes: neutral, gray, blue, orange, red, green, yellow, purple, pink, and teal.
Lighter Variants
Icons with subtle background colors in the same palette as stroke variants.
Size Options
Five size variants available:
- 2x-large: For high-impact display
- x-large: For featured content
- large: For navigation and primary actions
- medium: For general interface elements
- small: For compact spaces
Examples
Icon usage examples with different colors:
- Cyan: Water-related functions
- Red: Alerts and warnings
- Yellow: Ideas and innovation
- Pink: Care and support
- Blue: Connectivity status
- Orange: Mobile functionality
- Green: Home and navigation
- Purple: Documents and files
API Reference
The Icon component provides a consistent way to display and style icons throughout your application.
Icon
Wrapper component that applies consistent styling to icons from various libraries.
| Prop | Type | Default | Description |
|---|---|---|---|
as | "ReactElement" | "undefined" | Icon component to render (from a library like react-icons) |
size | "small""medium""large""x-large""2x-large" | "medium" | Size of the icon |
variant | "stroke""lighter" | "stroke" | Visual style variant of the icon |
color | "neutral""gray""blue""orange""red""green""yellow""purple""pink""teal" | "neutral" | Color theme of the icon |
rounded | "boolean" | "false" | Whether to use rounded styling for the icon |
className | "string" | "undefined" | Additional CSS classes |