halo-icons-react

A customizable React icon library with two-color support, built with TypeScript.

Installation

npm install halo-icons-react

Features

• 🎨 Two-color customization - Control primary and secondary colors
• 📏 Adjustable stroke width - Dynamically control icon thickness
• 📦 Tree-shakeable - Import only the icons you need
• 🔷 TypeScript support - Full type definitions included
• ⚡ Lightweight - Optimized SVG components
• 🎯 React-ready - Works seamlessly with React 16.8+
• 🌀 Animated Loaders - Beautiful built-in loading components

Demo

Usage

Basic Usage

import { AnnualLeaveThick, Dashboard, HaloIcon } from 'halo-icons-react';

function App() {
  return (
    <div>
      <AnnualLeaveThick /> {/* Leave icons have Thick, Thicker, Thinner variants */}
      <Dashboard />
      <HaloIcon />
      <HaloLoader /> {/* Brand-specific animated loader */}
    </div>
  );
}

Animated Loader (HaloLoader)

The HaloLoader is a special animated component that follows the Halo brand mark motion.

import { HaloLoader } from 'halo-icons-react';

// Use with custom size and color
<HaloLoader width={120} height={120} secondaryColor="#F26522" />

Customizing Colors

Primary Color (via CSS)

The primary color inherits from the parent's text color:

<AnnualLeaveThick style={{ color: 'blue' }} />
<Dashboard className="text-primary" />

Secondary Color (via prop)

Control the secondary/accent color using the secondaryColor prop:

<AnnualLeaveThick secondaryColor="green" />
<SickLeaveThicker secondaryColor="#ff6b6b" />

Both Colors

Combine both customization methods:

<AnnualLeaveThick 
  style={{ color: 'navy' }} 
  secondaryColor="gold" 
/>

Size Customization

Icons default to 1em (inherit font size). Customize via CSS:

<HaloIcon style={{ fontSize: '24px' }} />
<Dashboard style={{ width: '32px', height: '32px' }} />

Stroke Width Customization

Control the thickness of icon strokes using the strokeWidth prop. For Leave icons, choose the base variant that suits you best (Thick, Thicker, Thinner) and fine-tune if needed.

<Dashboard strokeWidth={1} />  {/* Thinner */}
<Dashboard strokeWidth={3} />  {/* Thicker */}
<Dashboard strokeWidth={1.5} /> {/* Custom thickness */}

<AnnualLeaveThick strokeWidth={1.5} /> {/* Override default thickness */}

Additional Props

All standard SVG props are supported:

<AnnualLeaveThinner 
  className="my-icon"
  onClick={() => console.log('clicked')}
  aria-label="Annual Leave Icon"
/>

Available Icons

Leave Icons

Leave icons are available in three weight variants: Thick, Thicker, and Thinner. Append the variant to the icon name (e.g., AnnualLeaveThick).

• AnnualLeave
• SickLeave
• MaternityLeave
• PaternityLeave
• BereavementLeave
• CircumcisionLeave
• DutyTravelInternational
• DutyTravelNational
• FamilyResponsibilityLeave
• HajjLeave
• UmraLeave
• InitialLeave
• NoPayLeave
• ReleasedFromOffice

Sidebar Icons

• Dashboard
• Employees
• Documents
• Attendance
• Leaves
• Notifications
• Organisation
• Overtime
• Payroll
• Recruitment
• Reports
• Rosters
• Schedule
• Settings
• Workflows

Brand Icons

• HaloIcon
• HaloFooter
• HaloLogoHorizontal
• HaloLoader (Animated)
• MaclIcon
• MaclLogo

TypeScript

Full TypeScript support is included. Each icon component accepts:

type IconProps = SVGProps<SVGSVGElement> & {
  secondaryColor?: string;
  strokeWidth?: number; // Default: 2
};

License

MIT

Author

Anas