@maqsad/icons

Table of Contents

• Installation
• Usage
  • System Icons
  • Illustration Icons
• Available Icons
• Variants Explained
• Adding New Icons
• Development
• Tree Shaking
• TypeScript
• License

Installation

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

Usage

System Icons

System icons are available in two styles: stroke (outline-based) and filled. All icons can be scaled to any size.

import { IconArrowBack, IconSearch, IconStar } from "@maqsad/icons";
// or import specifically from system
import { IconArrowBack } from "@maqsad/icons/system";

function App() {
  return (
    <div>
      {/* Default size (24px) */}
      <IconArrowBack />

      {/* Custom size */}
      <IconSearch size={18} />

      {/* Custom stroke color */}
      <IconStar stroke="gold" />

      {/* Custom fill color */}
      <IconStar fill="gold" />

      {/* Custom stroke width */}
      <IconArrowBack strokeWidth={1.5} />

      {/* With className for styling */}
      <IconSearch className="my-icon" />
    </div>
  );
}

System Icon Props

| Prop | Type | Default | Description | | ------------- | ---------- | ---------------- | -------------------------------------------- | | size | number | 24 | Icon size in pixels | | stroke | string | 'currentColor' | Icon stroke color | | fill | string | 'none' | Icon fill color | | color | string | 'currentColor' | Icon stroke color (deprecated, use stroke) | | strokeWidth | number | 2 | Stroke width | | className | string | - | CSS class name | | ...props | SVGProps | - | Any valid SVG props |

Illustration Icons

Illustration icons are more detailed icons with multiple color variants.

import { IllustrationNotes, IllustrationVideoLectures } from "@maqsad/icons";
// or import specifically from illustrations
import { IllustrationNotes } from "@maqsad/icons/illustrations";

function App() {
  return (
    <div>
      {/* Default variant (primary - blue) */}
      <IllustrationNotes />

      {/* Secondary variant (brown/pink) */}
      <IllustrationNotes variant="secondary" />

      {/* Dark variant (for light theme) */}
      <IllustrationNotes variant="dark" />

      {/* Light variant (for dark theme) */}
      <IllustrationNotes variant="light" />

      {/* Filled variant with custom colors */}
      <IllustrationNotes
        variant="filled"
        primaryColor="#8B5CF6"
        accentColor="#F59E0B"
      />

      {/* Custom size */}
      <IllustrationVideoLectures size={64} />
    </div>
  );
}

Illustration Icon Props

| Prop | Type | Default | Description | | -------------- | ----------------------------------------------------------- | ----------- | -------------------------------- | | variant | 'primary' \| 'secondary' \| 'filled' \| 'dark' \| 'light' | 'primary' | Icon color variant | | size | number | 48 | Icon width in pixels | | primaryColor | string | '#3B82F6' | Primary color for filled variant | | accentColor | string | '#F59E0B' | Accent color for filled variant | | className | string | - | CSS class name | | ...props | SVGProps | - | Any valid SVG props |

Available Icons

Total: 130 icons (85 system icons + 45 illustration icons)

For a complete list with import examples, see the documentation website

System Icons (85)

Illustration Icons (45)

Variants Explained

| Variant | Preview | Description | Use Case | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -------------------------- | | primary | | Blue color scheme | Default, general use | | secondary | | Brown/pink color scheme | Alternative styling | | dark | | Dark monotone | Icons on light backgrounds | | light | | Light monotone | Icons on dark backgrounds |

Adding New Icons

System Icons

1. Add your SVG file to assets/system/stroke/ (for outline icons) or assets/system/filled/ (for filled icons)
2. Run pnpm build:icons

Illustration Icons

1. Add your SVG files to assets/illustrations/{variant}/ for each variant
2. Run pnpm build:icons

Development

# Install dependencies
pnpm install

# Build icons from SVG assets
pnpm build:icons

# Build the library
pnpm build

# Type check
pnpm typecheck

Tree Shaking

This library is fully tree-shakeable. Import only the icons you need:

// ✅ Good - only imports what you need
import { IconSearch, IconHeart } from "@maqsad/icons";

// ✅ Also good - imports from specific subpath
import { IconSearch } from "@maqsad/icons/system";
import { IllustrationNotes } from "@maqsad/icons/illustrations";

TypeScript

Full TypeScript support with exported types:

import type {
  SystemIconProps,
  IllustrationIconProps,
  SystemIconSize,
  IllustrationVariant,
} from "@maqsad/icons";

License

MIT