@nice2dev/icons-business

Animated business icons for enterprise applications. Part of the Nice2Dev UI component library.

Features

• 🎭 60 Unique Icons — Finance, Office, HR, and Project Management categories
• ✨ SMIL Animations — 9 built-in animation types (pulse, grow, shake, spin, bounce, fade, flip, slide, glow)
• 🎨 3 Variants — Filled, outlined, and duotone styles
• ⚡ Tree-shakeable — Import only what you need
• 📦 Lazy Loading — Icon collections support dynamic imports
• 🔧 TypeScript — Full type safety with strict typing
• ♿ Accessible — ARIA attributes and keyboard support

Installation

# npm
npm install @nice2dev/icons-business

# pnpm
pnpm add @nice2dev/icons-business

# yarn
yarn add @nice2dev/icons-business

Quick Start

import { DollarIcon, KanbanIcon, TeamIcon } from '@nice2dev/icons-business';

function App() {
  return (
    <div>
      {/* Static icon */}
      <DollarIcon size={24} />

      {/* Animated icon */}
      <KanbanIcon animation="pulse" size={32} />

      {/* Custom styling */}
      <TeamIcon variant="duotone" color="#3b82f6" accentColor="#93c5fd" animation="grow" />
    </div>
  );
}

Icon Categories

Finance (15 icons)

| Icon | Name | Description | | ---- | ---------------- | --------------------------- | | 📈 | ChartLineIcon | Line chart for trends | | 📊 | ChartBarIcon | Bar chart for comparisons | | 🥧 | ChartPieIcon | Pie chart for distributions | | 💵 | DollarIcon | USD currency symbol | | 💶 | EuroIcon | EUR currency symbol | | 📄 | InvoiceIcon | Invoice/bill document | | 👛 | WalletIcon | Digital wallet | | 💳 | CreditCardIcon | Credit/debit card | | 🏦 | BankIcon | Banking institution | | 🐷 | PiggyBankIcon | Savings/piggy bank | | 🪙 | CoinStackIcon | Stacked coins | | 📈 | GrowthIcon | Growth arrow up | | 📉 | LossIcon | Loss arrow down | | 📋 | BudgetIcon | Budget planning | | 🧾 | ReceiptIcon | Payment receipt |

Office (15 icons)

| Icon | Name | Description | | ---- | --------------- | ------------------------ | | 💼 | BriefcaseIcon | Business briefcase | | 📋 | ClipboardIcon | Clipboard with checklist | | 📅 | CalendarIcon | Calendar/scheduling | | 🪑 | DeskIcon | Office desk | | 🖨️ | PrinterIcon | Printer device | | 📠 | ScannerIcon | Document scanner | | 📁 | FolderIcon | File folder | | 📄 | FileIcon | Document file | | 📝 | DocumentIcon | Text document | | 🔖 | StampIcon | Approval stamp | | 📎 | PaperClipIcon | Paper clip | | 📌 | StaplerIcon | Stapler | | 📓 | NotebookIcon | Notebook/journal | | ✍️ | PenIcon | Writing pen | | ☕ | CoffeeIcon | Coffee cup |

HR (15 icons)

| Icon | Name | Description | | ---- | ----------------- | --------------------- | | 👥 | TeamIcon | Team/group of people | | 🤝 | MeetingIcon | Meeting/conference | | ➕ | HireIcon | New hire/recruitment | | 🤝 | HandshakeIcon | Business handshake | | 🪪 | IdCardIcon | Employee ID card | | 🏛️ | OrgChartIcon | Organization chart | | 📊 | PerformanceIcon | Performance metrics | | 🎤 | InterviewIcon | Job interview | | 📜 | ContractIcon | Employment contract | | 🚀 | OnboardingIcon | Employee onboarding | | 💰 | PayrollIcon | Payroll/salary | | 🎁 | BenefitsIcon | Employee benefits | | 🎓 | TrainingIcon | Training/education | | 💬 | FeedbackIcon | Employee feedback | | 🌈 | DiversityIcon | Diversity & inclusion |

Project Management (15 icons)

| Icon | Name | Description | | ---- | ------------------- | ----------------- | | 📋 | KanbanIcon | Kanban board | | 📏 | TimelineIcon | Project timeline | | 🏁 | MilestoneIcon | Project milestone | | 🏃 | SprintIcon | Agile sprint | | 📝 | BacklogIcon | Product backlog | | ✅ | TaskIcon | Task/to-do item | | ⏰ | DeadlineIcon | Deadline/due date | | 📊 | ProgressIcon | Progress bar | | 🗺️ | RoadmapIcon | Product roadmap | | 📉 | GanttIcon | Gantt chart | | 🔄 | AgileIcon | Agile methodology | | 🏈 | ScrumIcon | Scrum framework | | 📆 | PlanningIcon | Sprint planning | | 🔍 | RetrospectiveIcon | Retrospective | | 🚀 | VelocityIcon | Team velocity |

Animation Types

import { DollarIcon } from '@nice2dev/icons-business';

// Available animations
<DollarIcon animation="pulse" />     // Pulsing opacity
<DollarIcon animation="grow" />      // Scale up/down
<DollarIcon animation="shake" />     // Horizontal shake
<DollarIcon animation="spin" />      // 360° rotation
<DollarIcon animation="bounce" />    // Vertical bounce
<DollarIcon animation="fade" />      // Fade in/out
<DollarIcon animation="flip" />      // Y-axis flip
<DollarIcon animation="slide" />     // Horizontal slide
<DollarIcon animation="glow" />      // Drop shadow glow

Animation Duration

<DollarIcon animation="pulse" animationDuration="fast" />    // 0.5s
<DollarIcon animation="pulse" animationDuration="normal" />  // 1s (default)
<DollarIcon animation="pulse" animationDuration="slow" />    // 2s

Icon Variants

import { TeamIcon } from '@nice2dev/icons-business';

// Filled (default)
<TeamIcon variant="filled" />

// Outlined
<TeamIcon variant="outlined" />

// Duotone (two-color)
<TeamIcon
  variant="duotone"
  color="#3b82f6"
  accentColor="#93c5fd"
/>

Props Reference

| Prop | Type | Default | Description | | ------------------- | ------------------------------------- | ---------------- | ------------------------------------------ | | size | number \| string | 24 | Icon size in pixels or CSS string | | color | string | 'currentColor' | Primary icon color | | accentColor | string | color | Secondary/accent color for duotone | | variant | 'filled' \| 'outlined' \| 'duotone' | 'filled' | Icon style variant | | animation | BusinessIconAnimation | 'none' | Animation type | | animationDuration | 'slow' \| 'normal' \| 'fast' | 'normal' | Animation speed | | animate | boolean | true | Whether animation should play | | strokeWidth | number | 2 | Stroke width for outlined variant | | className | string | undefined | Additional CSS class | | title | string | undefined | Accessible title (also enables aria-label) | | style | CSSProperties | undefined | Inline styles |

Dynamic Imports

For code-splitting, use the icon collections:

import { FinanceIcons } from '@nice2dev/icons-business';

// Dynamically load an icon
const loadDollarIcon = async () => {
  const DollarIcon = await FinanceIcons.Dollar();
  return DollarIcon;
};

Creating Custom Icons

Use the factory function to create custom business icons:

import { createBusinessIcon } from '@nice2dev/icons-business';

const CustomIcon = createBusinessIcon(
  ({ color, accentColor, variant }) => (
    <>
      <path d="M12 2L2 22h20L12 2z" fill={variant === 'outlined' ? 'none' : color} stroke={color} />
      {variant === 'duotone' && <circle cx="12" cy="14" r="3" fill={accentColor || color} />}
    </>
  ),
  { displayName: 'CustomIcon', viewBox: '0 0 24 24' },
);

TypeScript

All icons are fully typed:

import type {
  BusinessIconProps,
  BusinessIconAnimation,
  FinanceIconName,
  OfficeIconName,
  HRIconName,
  ProjectIconName,
} from '@nice2dev/icons-business';

// Type-safe icon name unions
type AllIconNames = FinanceIconName | OfficeIconName | HRIconName | ProjectIconName;

License

MIT © Nice2Dev