@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

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

Quick Start

Basic Usage

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

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

With Props

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

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

Illustrated Icons

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

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

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:

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