Icon
The Icon component provides you with icons and symbols for your application.
Import
import { Icon } from '@nostromo/ui-core'
// or
import { Icon } from '@nostromo/ui-core/icon'Usage
import { Icon } from '@nostromo/ui-core'
export default function Example() {
return (
<Icon name="home" size="default" />
)
}Live Examples
Live Example
View Code
import { Icon } from '@nostromo/ui-core'
export default function IconExamples() {
return (
<div className="space-x-4">
<Icon name="home" />
<Icon name="user" />
<Icon name="settings" />
<Icon name="search" />
</div>...
Sizes
Live Example
View Code
import { Icon } from '@nostromo/ui-core'
export default function IconSizes() {
return (
<div className="space-x-4">
<Icon name="star" size="sm" />
<Icon name="star" size="default" />
<Icon name="star" size="lg" />
</div>
)...
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
name | IconName | - | Yes | Name of the icon (see available icons below) |
size | "sm" | "default" | "lg" | "xl" | "default" | No | Size of the icon |
weight | "thin" | "light" | "regular" | "medium" | "bold" | "regular" | No | Stroke weight of the icon |
color | string | undefined | No | Color of the icon (CSS color value) |
className | string | undefined | No | Additional CSS classes |
Standard HTML SVG Props
The Icon component extends React.HTMLAttributes<SVGSVGElement>, so it accepts all standard HTML SVG attributes (e.g., id, data-*, aria-*).
Available Icons
The Icon component supports a wide range of icons. Common icons include: home, user, settings, search, star, heart, bell, mail, phone, calendar, clock, arrow-left, arrow-right, arrow-up, arrow-down, check, x, plus, minus, edit, trash, download, upload, share, menu, close, and many more.