Icons
A comprehensive icon system using SVG sprite sheets for optimal performance. Icons are loaded on-demand and support multiple sizes, tooltips, and can be used standalone or with text content.
Installation
Import
Usage
Icons are loaded from SVG sprite sheets for optimal performance. Use the Icon component with the name prop to display any available icon. Icons automatically size to match their container or use the size prop for explicit sizing. Use tooltips for accessibility and user guidance. Icons can be used standalone or with text content. The component supports all standard SVG props for additional customization.
Design Guidelines
Icons should be used consistently throughout your application. Use appropriate sizes - smaller icons for inline text, medium for buttons, and larger for prominent displays. Always provide tooltips for icon-only buttons for accessibility. Use semantic icon names that clearly represent their function. Icons are loaded from sprite sheets, so they're efficient and can be cached. The font size option automatically matches the surrounding text size, making it perfect for inline use.
Basic Usage
Simple icon with name prop
Different Sizes
Icons in various sizes
With Tooltips
Icons with tooltip text
With Text
Icons used with text content
Common Icons
Frequently used icons
In Buttons
Icons used in button components
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
name | IconName | - | Name of the icon to display (from the icon sprite sheet) |
size | "font" | "xs" | "sm" | "md" | "lg" | "xl" | "font" | Size of the icon |
tooltip | string | undefined | Optional tooltip text to show on hover |
href | string | "/icons/sprite.svg" | Path to the SVG sprite sheet containing the icon |
children | React.ReactNode | undefined | Optional text content to display alongside the icon |
className | string | — | Additional CSS classes to apply to the component |
Icon Library (click on an icon to copy)
Search Icons
Category
Icon Size
Showing 650 of 650 icons