Icon Library
231 SVG icons ready to use in your projects
Usage
Import
import { Icon } from '@classic-homes/theme-svelte';Basic Usage
<Icon name="check" />
<Icon name="star" class="text-yellow-500" />
<Icon name="heart" size=32 />Sizes
16px
20px
24px
32px
40px
48px
<Icon name="star" size={16} />
<Icon name="star" size={24} /> <!-- default -->
<Icon name="star" size={48} />Colors
Icons inherit text color by default. Use Tailwind classes to customize.
text-red-500
text-green-500
text-yellow-500
text-blue-500
text-primary
<Icon name="heart" class="text-red-500" />
<Icon name="check" class="text-green-500" />
<Icon name="star" class="text-primary" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | IconName | required | The name of the icon to display |
| size | number | 24 | Size in pixels (width and height) |
| class | string | - | Additional CSS classes for styling |
| strokeWidth | number | 2 | Stroke width for line-based icons |
| label | string | - | Accessible label (screen reader text) |
All Icons
Showing 231 of 231 icons
Usage Examples
In Buttons
<Button>
<Icon name="plus" size={16} class="mr-1" />
Add Item
</Button>Status Indicators
Success message
Warning message
Error message
<div class="text-green-600">
<Icon name="check" /> Success
</div>