@azodik/icons

A comprehensive collection of React icon components for the Azodik UI design system.

Installation

npm install @azodik/icons

Usage

import React from "react";
import { UserIcon, SettingsIcon, ChevronDownIcon } from "@azodik/icons";

function MyComponent() {
  return (
    <div>
      <UserIcon size={24} className="text-blue-500" />
      <SettingsIcon size={20} />
      <ChevronDownIcon size={16} />
    </div>
  );
}

Available Icons

Navigation Icons

• ArrowRightIcon - Right arrow
• ChevronDownIcon - Down chevron
• ChevronDownSmallIcon - Small down chevron
• ChevronRightIcon - Right chevron
• ChevronUpIcon - Up chevron
• LeftLongArrowIcon - Long left arrow
• RightLongArrowIcon - Long right arrow
• SidebarToggleIcon - Sidebar toggle

User Icons

• UserIcon - Basic user icon
• User3Icon - User with circle
• UserAddIcon - Add user icon
• UserCheckIcon - User with checkmark
• GroupIcon - Group of users

Interface Icons

• ApplicationIcon - Application icon
• AppsIcon - Apps grid icon
• BarChartIcon - Bar chart icon
• CopyIcon - Copy icon
• GithubIcon - GitHub icon
• MoneyDollarIcon - Dollar sign
• SettingsIcon - Settings gear
• ShieldIcon - Shield icon
• TickIcon - Checkmark

Social Media Icons

• GoogleIcon - Google logo
• AppleIcon - Apple logo
• FacebookIcon - Facebook logo
• InstagramIcon - Instagram logo

Common Icons

• HeartIcon - Heart (with filled prop)
• StarIcon - Star (with filled prop)
• SearchIcon - Search magnifying glass
• HomeIcon - Home/house
• MailIcon - Email/mail
• PhoneIcon - Phone
• CalendarIcon - Calendar
• ClockIcon - Clock/time
• DownloadIcon - Download arrow
• UploadIcon - Upload arrow

Props

All icons accept the following props:

interface IconProps {
  size?: number; // Icon size in pixels (default varies by icon)
  className?: string; // CSS classes
  style?: React.CSSProperties; // Inline styles
  color?: string; // Icon color (some icons only)
  filled?: boolean; // Filled state (HeartIcon, StarIcon only)
}

Features

• TypeScript Support: Full TypeScript definitions included
• Tree Shakeable: Import only the icons you need
• Consistent API: All icons follow the same prop interface
• Accessible: Proper ARIA attributes and semantic markup
• Customizable: Size, color, and styling options
• React 18+ Compatible: Works with React 18 and 19

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch for changes
npm run dev

# Type check
npm run type-check

License

MIT © Azodik