Icon
The Icon component provides you with icons and symbols for your application.
Live Examples
Live Example
☀️
Copy
View Code
import { Icon } from '@jarllyng/nostromo'
export default function IconExamples() {
const names = [
'home', 'user', 'settings', 'search', 'bell', 'calendar',
'code', 'palette', 'accessibility', 'terminal', 'rocket', 'star',
'check-circle', 'warning', 'lock', 'eye', 'download', 'trash',
]
...
Import
import { Icon } from "@jarllyng/nostromo";
// or
import { Icon } from "@jarllyng/nostromo/icon";Usage
import { Icon } from "@jarllyng/nostromo";
export default function Example() {
return <Icon name="home" size="default" />;
}Sizes
Live Example
☀️
Copy
View Code
import { Icon } from '@jarllyng/nostromo'
export default function IconSizes() {
return (
<div className="flex flex-wrap items-end gap-8">
{(['xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const).map((size) => (
<div key={size} className="flex flex-col items-center gap-2">
<Icon name="star" size={size} />
<span className="text-[10px] text-muted-foreground">{size}</span>...
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.
Last updated on