v0.2.15

Maqsad Icons

A beautiful, consistent icon library designed for Maqsad's products. Featuring both system icons and colorful illustrations.

📦76 Total Icons

🎨5 Illustration Variants

⚡Tree Shakeable

Icon Preview

System

Illustration

Installation

pnpm add @maqsad/icons

npm install @maqsad/icons

yarn add @maqsad/icons

Icon Categories

63 icons

System Icons

Line-based UI icons for interfaces, actions, and navigation. Available in 16px, 18px, and 24px sizes.

13 icons

Illustrations

Detailed, multi-color illustrations with 4 variants: primary, secondary, dark, and light.

Quick Start

System Icons

import { IconArrowBack, IconSearch, IconStar } from '@maqsad/icons';
// or import from system subpath
import { IconArrowBack } from '@maqsad/icons/system';

function App() {
  return (
    <div>
      {/* Default size (24px) */}
      <IconArrowBack />
      
      {/* Custom size */}
      <IconSearch size={18} />
      
      {/* Custom color */}
      <IconStar color="gold" />
      
      {/* Custom stroke width */}
      <IconArrowBack strokeWidth={1.5} />
    </div>
  );
}

Illustration Icons

import { IllustrationNotes, IllustrationVideoLectures } from '@maqsad/icons';
// or import from illustrations subpath
import { IllustrationNotes } from '@maqsad/icons/illustrations';

function App() {
  return (
    <div>
      {/* Default variant (primary - blue) */}
      <IllustrationNotes />
      
      {/* Secondary variant */}
      <IllustrationNotes variant="secondary" />
      
      {/* Dark variant */}
      <IllustrationNotes variant="dark" />
      
      {/* Light variant */}
      <IllustrationNotes variant="light" />
      
      {/* Custom size */}
      <IllustrationVideoLectures size={64} />
    </div>
  );
}

Props Reference

System Icon Props

Prop	Type	Default
`size`	number	24
`color`	string	currentColor
`strokeWidth`	number	2
`className`	string	-

Illustration Props

Prop	Type	Default
`variant`	string	primary
`size`	number	48
`primaryColor`	string	#3B82F6
`accentColor`	string	#F59E0B

Features

TypeScript

Full TypeScript support with exported types for all props and variants.

Tree Shakeable

Import only the icons you need. Unused icons are automatically removed from your bundle.

Customizable

Easily customize size, color, stroke width, and variants to match your design.