npm package: @photonix/icons
Description: A premium icon library with 111 beautifully designed React components. Features both line icons (105 icons) and illustrated icons (6 icons) with full TypeScript support.
Latest version: 1.6.2

# @photonix/icons

A premium icon library with 111 beautifully designed React components. Features both line icons (105 icons) and illustrated icons (6 icons) with full TypeScript support.

## Features

✨ **111 Premium Icons**
- 105 line icons
- 6 illustrated icons
- Fully customizable via React props

🎨 **Multiple Export Formats**
- ESM (tree-shakeable)
- CommonJS
- Full TypeScript definitions

⚡ **Performance**
- Small bundle size
- Tree-shakeable imports
- No external dependencies

♿ **Accessible**
- ARIA labels support
- Semantic SVG structure
- Keyboard friendly

## Installation

```bash
npm install @photonix/icons
# or
pnpm add @photonix/icons
# or
yarn add @photonix/icons
```

## Quick Start

### Basic Usage

```tsx
import { Add, Delete, Settings } from '@photonix/icons';

export function App() {
  return (
    <div>
      <Add />
      <Delete />
      <Settings />
    </div>
  );
}
```

### With Props

```tsx
import { Star } from '@photonix/icons';

export function Rating() {
  return <Star size={24} color="#FFD700" />;
}
```

### Illustrated Icons

```tsx
import { Verified, Warning, Error } from '@photonix/icons/illustrated';

export function Status() {
  return (
    <>
      <Verified />
      <Warning />
      <Error />
    </>
  );
}
```

## Available Icons

### Line Icons (105)
`Add`, `AddFilled`, `Apps`, `AppsFilled`, `ArrowUp`, `ArrowUpFilled`, `Backspace`, `BackspaceFilled`, `Bolt`, `BoltFilled`, `Calendar`, `CalendarFilled`, `Cancel`, `CancelFilled`, `CheckCircle`, `CheckCircleFilled`, `CheckSmall`, `CheckSmallFilled`, `ChevronDown`, `ChevronDownFilled`, `ChevronDownSmall`, `ChevronDownSmallFilled`, `ChevronLeft`, `ChevronLeftFilled`, `ChevronLeftSmall`, `ChevronLeftSmallFilled`, `ChevronRight`, `ChevronRightFilled`, `ChevronRightSmall`, `ChevronRightSmallFilled`, `ChevronUp`, `ChevronUpFilled`, `ChevronUpSmall`, `ChevronUpSmallFilled`, `Circle`, `CircleFilled`, `Close`, `CloseFilled`, `Component`, `Core`, `Delete`, `Document`, `Download`, `Dropdown`, `Error`, `ErrorFilled`, `Favorite`, `FavoriteFilled`, `Folder`, `Globe`, `Home`, `HomeActive`, `Info`, `InfoFilled`, `Link`, `Loading`, `Lock`, `Menu`, `Micro`, `MoreHorizontal`, `MoreVertical`, `Notification`, `Option`, `Personal`, `Radio`, `RadioFilled`, `Rectangle`, `RectangleFilled`, `Search`, `Settings`, `Share`, `Sheet`, `SheetFilled`, `Sort`, `Sparkles`, `Spinner`, `Star`, `StarFilled`, `Storage`, `Swap`, `TriangularBotFilled`, `TriangularBotFilledSmall`, `TriangularTopFilled`, `TriangularTopFilledSmall`, `Verified`, `VerifyFilled`, `Warning`, `Notification`, `Copy`... and more!

### Illustrated Icons (6)
`Alarm`, `Error`, `Info`, `Verified`, `Warning`, `Success`

## API Reference

### Icon Props

```typescript
interface IconProps {
  // Size in pixels
  size?: number;
  
  // SVG color
  color?: string;
  
  // CSS class name
  className?: string;
  
  // Additional attributes
  [key: string]: any;
}
```

### Example with All Props

```tsx
import { Settings } from '@photonix/icons';

export function IconWithProps() {
  return (
    <Settings
      size={32}
      color="#3B82F6"
      className="icon"
      aria-label="Settings"
    />
  );
}
```

## TypeScript Support

Full TypeScript support is included. All icons are properly typed:

```tsx
import type { IconProps } from '@photonix/icons';

const MyIcon: React.FC<IconProps> = (props) => {
  return <Add {...props} />;
};
```

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## License

MIT © Photonix

## Contributing

Contributions are welcome! Please read our contributing guidelines before submitting pull requests.

## Changelog

### v1.0.0 (2026-01-02)
- Initial release
- 111 premium icons
- Full TypeScript support
- ESM and CommonJS exports
- Comprehensive documentation