# Icon

> `Icon` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`.

Source: https://ui.jcsoftdev.com/docs/components/icon

`Icon` is part of the Atoms set, imported from `@jcsoftdev/ui/atoms`.

## Import

```ts
import { Icon } from "@jcsoftdev/ui/atoms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/atoms/icon`.

## Usage

```tsx
<Icon name="calendar" className="size-6 text-ink" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `"menu" \| "search" \| "video" \| "download" \| "alert" \| "grid" \| "list" \| "calendar" \| "folder" \| "users" \| "pen" \| "file" \| "coin" \| "shield" \| "calculator" \| "sync" \| "sliders" \| "bell" \| "plus" \| "chevron-down" \| "chevr…` |  | Registry name; ignored when `icon` is provided. |
| `icon` | `LucideIcon` |  | Any lucide icon component. |
| `label` | `string` |  | Accessible label. Without it the icon is decorative (aria-hidden). |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/atoms-icon--default)
- [With Label](/storybook/?path=/story/atoms-icon--with-label)
- [Custom Lucide Icon](/storybook/?path=/story/atoms-icon--custom-lucide-icon)
- [Registry](/storybook/?path=/story/atoms-icon--registry)

## Source

`packages/ui/src/atoms/icon/icon.tsx`