Icon Components

The Icon Components provide a comprehensive collection of SVG icons for the WorkPayCore Frontend application. Icons are organized into logical categories including feature-specific icons, general UI icons, social media icons, and specialized utility icons.

Overview

This document covers all icon components available in the WorkPayCore Frontend application, including the main WPIcons collection and individual utility icons. All icons are built using Chakra UI's Icon component for consistency and theming.

Icon Categories

WPIcons Collection

FeatureIcons - Business feature-specific icons (33 icons)
GeneralIcons - General UI and interaction icons (87 icons)
SocialIcons - Social media platform icons (9 icons)

Individual Icons

PaymentIcons - Payment and financial service icons
StatusIcons - Status and state indicator icons
BrandIcons - Brand logos and identity icons
FlagIcons - Country and regional flag icons

FeatureIcons

Business feature-specific icons representing core WorkPay functionality and modules.

Component Location

import {
  UserSolid,
  UserOutline,
  WalletSolid,
  TimerSolid
} from 'components/WPIcons/FeatureIcons';

// Or import all FeatureIcons
import * from 'components/WPIcons/FeatureIcons';

Available FeatureIcons

People & User Management

User (Solid, Outline) - User profiles and employee management
People - Team and employee group representations
Performance - Performance management and reviews

Financial & Payroll

Wallet - Digital wallet and payment features
Money - General financial operations
Dollar - USD currency operations
Coins - Multi-currency and rewards
PiggyBank - Savings and investment features
SalaryAdvance - Salary advance requests
Loans - Loan management and applications
Receipt - Payment receipts and records
Billing - Billing and invoicing operations

Time & Attendance

Clock - Time tracking and attendance
Timer - Active time tracking sessions
Calendar - Scheduling and calendar events
Overtime - Overtime tracking and management

Business Operations

Company - Company and organization management
Project - Project management and tracking
Documents - Document management systems
Clipboard - Forms and data collection
Settings - System configuration and preferences
KPIs - Key performance indicators and metrics

Technology & Communication

Laptop - Technology and remote work
Globe - Global operations and multi-country
Global - International business operations
Airplane - Business travel and expenses
Headphone - Customer support and communication

Learning & Development

Training - Employee training and development
Heart - Employee wellbeing and benefits

Marketplace & Services

MarketPlace - Third-party integrations and services
Home - Dashboard and home screens
P9Forms - Tax forms and compliance documents
Payslip - Employee payslips and statements

Usage Examples

Basic Feature Icon Usage

import {
  UserSolid,
  WalletSolid,
  TimerSolid,
} from 'components/WPIcons/FeatureIcons';

function FeatureDashboard() {
  return (
    <HStack spacing={4}>
      &lt;VStack&gt;
        <UserSolid boxSize={8} color='green.500' />
        &lt;Text&gt;Employees</Text>
      </VStack>

      &lt;VStack&gt;
        <WalletSolid boxSize={8} color='blue.500' />
        &lt;Text&gt;Payroll</Text>
      </VStack>

      &lt;VStack&gt;
        <TimerSolid boxSize={8} color='orange.500' />
        &lt;Text&gt;Time Tracking</Text>
      </VStack>
    </HStack>
  );
}

import {
  UserOutline,
  ClockOutline,
  WalletOutline,
  PerformanceOutline,
} from 'components/WPIcons/FeatureIcons';

function NavigationMenu() {
  const menuItems = [
    { icon: UserOutline, label: 'Employees', path: '/employees' },
    { icon: ClockOutline, label: 'Time & Attendance', path: '/attendance' },
    { icon: WalletOutline, label: 'Payroll', path: '/payroll' },
    { icon: PerformanceOutline, label: 'Performance', path: '/performance' },
  ];

  return (
    <VStack spacing={2} align='stretch'>
      {menuItems.map(item => (
        <HStack
          key={item.path}
          as={Link}
          to={item.path}
          p={3}
          borderRadius='md'
        >
          <item.icon boxSize={5} />
          &lt;Text&gt;{item.label}</Text>
        </HStack>
      ))}
    </VStack>
  );
}

Icon Variants (Solid vs Outline)

Most FeatureIcons come in two variants:

import { UserSolid, UserOutline } from 'components/WPIcons/FeatureIcons';

function IconVariants() {
  return (
    <HStack spacing={4}>
      {/* Solid variant - for active/selected states */}
      <UserSolid boxSize={6} color='green.500' />

      {/* Outline variant - for inactive/unselected states */}
      <UserOutline boxSize={6} color='gray.500' />
    </HStack>
  );
}

GeneralIcons

General UI and interaction icons for common interface elements and actions.

Component Location

import {
  CheckSolid,
  ArrowRightOutline,
  HamburgerMenuOutline,
  SearchOutline
} from 'components/WPIcons/GeneralIcons';

// Or import all GeneralIcons
import * from 'components/WPIcons/GeneralIcons';

Icon Categories

Arrow series: ArrowUp, ArrowDown, ArrowLeft, ArrowRight
ArrowCircle series: ArrowCircleUp, ArrowCircleDown, ArrowCircleLeft, ArrowCircleRight
Chevron series: ChevronUp, ChevronDown, ChevronLeft, ChevronRight
ChevronDouble series: ChevronDoubleLeft, ChevronDoubleRight
ArrowElbow series: ArrowElbowUpLeft, ArrowElbowUpRight
Special: ArrowLineRight, CaretUpDown

Actions & Controls (20 icons)

Basic Actions: Plus, Minus, Check, XCircle
Media Controls: Play, Pause, Stop
File Operations: Upload, Download, Copy, Share
Edit Operations: Edit, Trash, Refresh, Undo
Communication: Send, PaperPlane, Message
Utility: Search, Filter, Pin, Printer

Interface Elements (15 icons)

Menu & Navigation: HamburgerMenu, DotMenu, MoreHorizontal, MoreVertical
Display Options: Grid, List, Eye, EyeOff
Status Indicators: Bell, BellOff, BellWithDot, Loader
Interaction: Cursor, LinkExternal, TooltipInfo

Input & Security (12 icons)

Authentication: Lock, LogIn, LogOut, Fingerprint
Input Elements: Email, Phone, SmartPhone, Camera
File Handling: FileAttachment, Image
Utility: Flashlight, Briefcase

User Management: UserMinus, UsersMultiple
Social Elements: Star, Heart, Cake
Gender Icons: GenderMale, GenderFemale, GenderAmbiguous

Status & Feedback (13 icons)

Status Indicators: SuccessIcon, Error, Alert
Information: HelpQuestion, TooltipInfo
Utility: Percentage, Vector, CircleIcon
Location: LocationPin, Globe
Accessories: Earphones, Bank

Usage Examples

Action Buttons with GeneralIcons

import {
  CheckSolid,
  TrashOutline,
  EditOutline,
  DownloadOutline,
} from 'components/WPIcons/GeneralIcons';

function ActionButtons() {
  return (
    <HStack spacing={2}>
      <IconButton
        aria-label='Approve'
        icon={<CheckSolid />}
        colorScheme='green'
        size='sm'
      />

      <IconButton
        aria-label='Edit'
        icon={<EditOutline />}
        colorScheme='blue'
        size='sm'
      />

      <IconButton
        aria-label='Download'
        icon={<DownloadOutline />}
        colorScheme='gray'
        size='sm'
      />

      <IconButton
        aria-label='Delete'
        icon={<TrashOutline />}
        colorScheme='red'
        size='sm'
      />
    </HStack>
  );
}

import {
  ChevronLeftOutline,
  ChevronRightOutline,
  ArrowLeftOutline,
  HamburgerMenuOutline,
} from 'components/WPIcons/GeneralIcons';

function NavigationControls() {
  return (
    <>
      {/* Mobile menu trigger */}
      <IconButton
        aria-label='Menu'
        icon={<HamburgerMenuOutline />}
        display={{ base: 'block', md: 'none' }}
      />

      {/* Back navigation */}
      <Button leftIcon={<ArrowLeftOutline />} variant='ghost'>
        Back
      </Button>

      {/* Pagination controls */}
      &lt;HStack&gt;
        <IconButton
          aria-label='Previous page'
          icon={<ChevronLeftOutline />}
          isDisabled={currentPage === 1}
        />

        &lt;Text&gt;
          {currentPage} of {totalPages}
        </Text>

        <IconButton
          aria-label='Next page'
          icon={<ChevronRightOutline />}
          isDisabled={currentPage === totalPages}
        />
      </HStack>
    </>
  );
}

Search and Filter Interface

import {
  SearchOutline,
  FilterOutline,
  GridOutline,
  ListOutline,
} from 'components/WPIcons/GeneralIcons';

function SearchAndFilter() {
  const [viewMode, setViewMode] = useState('grid');

  return (
    <HStack spacing={4} p={4}>
      {/* Search input */}
      &lt;InputGroup&gt;
        &lt;InputLeftElement&gt;
          <SearchOutline color='gray.400' />
        </InputLeftElement>
        <Input placeholder='Search employees...' />
      </InputGroup>

      {/* Filter button */}
      <Button leftIcon={<FilterOutline />} variant='outline'>
        Filters
      </Button>

      {/* View mode toggle */}
      <ButtonGroup isAttached>
        <IconButton
          aria-label='Grid view'
          icon={<GridOutline />}
          isActive={viewMode === 'grid'}
          onClick={() => setViewMode('grid')}
        />
        <IconButton
          aria-label='List view'
          icon={<ListOutline />}
          isActive={viewMode === 'list'}
          onClick={() => setViewMode('list')}
        />
      </ButtonGroup>
    </HStack>
  );
}

Status Indicators

import {
  BellOutline,
  BellWithDotOutline,
  SuccessIcon,
  ErrorIcon,
} from 'components/WPIcons/GeneralIcons';

function StatusIndicators() {
  const [hasNotifications, setHasNotifications] = useState(true);
  const [operationStatus, setOperationStatus] = useState('success');

  return (
    <HStack spacing={4}>
      {/* Notification bell */}
      <IconButton
        aria-label='Notifications'
        icon={hasNotifications ? <BellWithDotOutline /> : <BellOutline />}
        variant='ghost'
      />

      {/* Operation status */}
      &lt;HStack&gt;
        {operationStatus === 'success' && (
          <>
            <SuccessIcon color='green.500' />
            <Text color='green.500'>Operation successful</Text>
          </>
        )}

        {operationStatus === 'error' && (
          <>
            <ErrorIcon color='red.500' />
            <Text color='red.500'>Operation failed</Text>
          </>
        )}
      </HStack>
    </HStack>
  );
}

SocialIcons

Social media platform icons with branded colors and styling.

Component Location

import {
  FacebookColoured,
  TwitterColoured,
  LinkedInColoured,
  InstagramColoured
} from 'components/WPIcons/SocialIcons';

// Or import all SocialIcons
import * from 'components/WPIcons/SocialIcons';

Available SocialIcons

Major Platforms

Facebook (Coloured, Grey) - Facebook social platform
Twitter (Coloured, Grey) - Twitter/X social platform
LinkedIn (Coloured, Grey) - LinkedIn professional network
Instagram (Coloured, Grey) - Instagram photo platform
YouTube (Coloured, Grey) - YouTube video platform
TikTok (Coloured, Grey) - TikTok short video platform

App Stores

AppStore - Apple App Store
PlayStore - Google Play Store

Search Engines

Google - Google services and authentication

Icon Variants

Most social icons come in two variants:

Coloured Variants

Use branded colors for emphasis and brand recognition:

import {
  FacebookColoured,
  TwitterColoured,
  LinkedInColoured,
} from 'components/WPIcons/SocialIcons';

function SocialLinksColoured() {
  return (
    <HStack spacing={3}>
      <FacebookColoured boxSize={6} />
      <TwitterColoured boxSize={6} />
      <LinkedInColoured boxSize={6} />
    </HStack>
  );
}

Grey Variants

Use neutral colors for subtle integration:

import {
  FacebookGrey,
  TwitterGrey,
  LinkedInGrey,
} from 'components/WPIcons/SocialIcons';

function SocialLinksGrey() {
  return (
    <HStack spacing={3}>
      <FacebookGrey boxSize={6} />
      <TwitterGrey boxSize={6} />
      <LinkedInGrey boxSize={6} />
    </HStack>
  );
}

Usage Examples

import {
  GoogleColoured,
  FacebookColoured,
} from 'components/WPIcons/SocialIcons';

function SocialLoginButtons() {
  return (
    <VStack spacing={3} width='100%'>
      <Button
        leftIcon={<GoogleColoured />}
        variant='outline'
        width='100%'
        onClick={handleGoogleLogin}
      >
        Continue with Google
      </Button>

      <Button
        leftIcon={<FacebookColoured />}
        variant='outline'
        width='100%'
        onClick={handleFacebookLogin}
      >
        Continue with Facebook
      </Button>
    </VStack>
  );
}

import {
  FacebookColoured,
  TwitterColoured,
  LinkedInColoured,
  InstagramColoured,
} from 'components/WPIcons/SocialIcons';

function FooterSocialLinks() {
  const socialLinks = [
    {
      Icon: FacebookColoured,
      href: 'https://facebook.com/workpay',
      label: 'Facebook',
    },
    {
      Icon: TwitterColoured,
      href: 'https://twitter.com/workpay',
      label: 'Twitter',
    },
    {
      Icon: LinkedInColoured,
      href: 'https://linkedin.com/company/workpay',
      label: 'LinkedIn',
    },
    {
      Icon: InstagramColoured,
      href: 'https://instagram.com/workpay',
      label: 'Instagram',
    },
  ];

  return (
    <HStack spacing={4}>
      {socialLinks.map(({ Icon, href, label }) => (
        <Link key={label} href={href} isExternal>
          <IconButton
            aria-label={label}
            icon={<Icon />}
            variant='ghost'
            size='lg'
          />
        </Link>
      ))}
    </HStack>
  );
}

App Download Links

import {
  AppStoreColoured,
  PlayStoreColoured,
} from 'components/WPIcons/SocialIcons';

function AppDownloadLinks() {
  return (
    <VStack spacing={3} align='stretch'>
      <Text fontWeight='bold'>Download our mobile app</Text>

      <HStack spacing={3}>
        <Link href='https://apps.apple.com/workpay' isExternal>
          <Button leftIcon={<AppStoreColoured />} variant='outline' size='lg'>
            App Store
          </Button>
        </Link>

        <Link href='https://play.google.com/store/workpay' isExternal>
          <Button leftIcon={<PlayStoreColoured />} variant='outline' size='lg'>
            Play Store
          </Button>
        </Link>
      </HStack>
    </VStack>
  );
}

Individual Icons

Specialized icons for specific use cases, including payment services, status indicators, and brand elements.

PaymentIcons

Available Payment Icons

MpesaActiveIcon - Active M-Pesa payment state
MpesaInactiveIcon - Inactive M-Pesa payment state
EquitelIcon - Equitel payment service
FlutterwaveIcon - Flutterwave payment gateway

Usage Examples

import MpesaActiveIcon from 'components/Icons/MpesaActiveIcon';
import EquitelIcon from 'components/Icons/EquitelIcon';

function PaymentMethods() {
  const [selectedMethod, setSelectedMethod] = useState('mpesa');

  return (
    <VStack spacing={3}>
      <Button
        leftIcon={<MpesaActiveIcon />}
        variant={selectedMethod === 'mpesa' ? 'solid' : 'outline'}
        onClick={() => setSelectedMethod('mpesa')}
      >
        Pay with M-Pesa
      </Button>

      <Button
        leftIcon={<EquitelIcon />}
        variant={selectedMethod === 'equitel' ? 'solid' : 'outline'}
        onClick={() => setSelectedMethod('equitel')}
      >
        Pay with Equitel
      </Button>
    </VStack>
  );
}

StatusIcons

Available Status Icons

SuccessGroupIcon - Success state with checkmark
AlertGroup - Alert/warning state
ExclamationTriangleFillIcon - Warning triangle
UndefinedImageIcon - Placeholder for missing images
EmptyAssetIcon - Empty state placeholder

Usage Examples

import SuccessGroupIcon from 'components/Icons/SuccessGroupIcon';
import AlertGroup from 'components/Icons/AlertGroup';

function StatusMessages() {
  return (
    <VStack spacing={4}>
      {/* Success message */}
      &lt;HStack&gt;
        <SuccessGroupIcon boxSize={12} />
        <VStack align='start'>
          <Text fontWeight='bold' color='green.500'>
            Payment Successful
          </Text>
          <Text color='gray.600'>
            Your payment has been processed successfully.
          </Text>
        </VStack>
      </HStack>

      {/* Alert message */}
      &lt;HStack&gt;
        <AlertGroup boxSize={12} />
        <VStack align='start'>
          <Text fontWeight='bold' color='orange.500'>
            Action Required
          </Text>
          <Text color='gray.600'>Please verify your account information.</Text>
        </VStack>
      </HStack>
    </VStack>
  );
}

BrandIcons

Available Brand Icons

Logo - WorkPay main logo
LogoWhite - WorkPay white variant logo
LogoMobileWhite - Mobile optimized white logo
WorkPayWhiteIcon - WorkPay icon in white

Usage Examples

import Logo from 'components/WPIcons/Logo';
import LogoWhite from 'components/WPIcons/LogoWhite';

function AppHeader() {
  const { colorMode } = useColorMode();

  return (
    <Box bg={colorMode === 'dark' ? 'gray.800' : 'white'} p={4}>
      {colorMode === 'dark' ? <LogoWhite height={8} /> : <Logo height={8} />}
    </Box>
  );
}

Icon Component Patterns

Common Props

All icon components support standard Chakra UI Icon props:

Prop	Type	Default	Description
boxSize	string/number	-	Sets both width and height
width	string/number	-	Icon width
height	string/number	-	Icon height
color	string	'currentColor'	Icon color
as	ElementType	'svg'	Component to render as

Styling Patterns

Size Standardization

// Use consistent sizing patterns
<UserSolid boxSize={4} />  // 16px - Small
<UserSolid boxSize={5} />  // 20px - Medium
<UserSolid boxSize={6} />  // 24px - Large
<UserSolid boxSize={8} />  // 32px - Extra Large

Color Theming

// Use theme colors for consistency
<CheckSolid color="green.500" />     // Success
<ErrorIcon color="red.500" />        // Error
<AlertIcon color="orange.500" />     // Warning
<InfoIcon color="blue.500" />        // Information

Interactive States

function InteractiveIcon() {
  return (
    <Icon
      as={HeartOutline}
      boxSize={6}
      color='gray.400'
      _hover={{ color: 'red.500' }}
      _active={{ color: 'red.600' }}
      cursor='pointer'
      transition='color 0.2s'
    />
  );
}

Accessibility

// Provide meaningful labels
<IconButton
  aria-label="Delete item"
  icon={<TrashOutline />}
  onClick={handleDelete}
/>

// For decorative icons, hide from screen readers
<Icon as={StarSolid} aria-hidden="true" />

Focus States

// Ensure focusable icons have proper focus indicators
<Icon
  as={UserOutline}
  tabIndex={0}
  _focus={{
    outline: '2px solid',
    outlineColor: 'blue.500',
    outlineOffset: '2px',
  }}
/>

Performance Considerations

Bundle Optimization

// Import only what you need to reduce bundle size
import { UserSolid } from 'components/WPIcons/FeatureIcons/User';

// Avoid importing entire icon collections
// ❌ Don't do this
import * as FeatureIcons from 'components/WPIcons/FeatureIcons';

// ✅ Do this instead
import { UserSolid, WalletSolid } from 'components/WPIcons/FeatureIcons';

Icon Caching

// Icons are automatically cached by the browser
// No additional caching needed for static SVG icons

// For dynamic icon loading, consider using React.memo
const MemoizedIcon = React.memo(({ iconName, ...props }) => {
  const IconComponent = iconMap[iconName];
  return <IconComponent {...props} />;
});

Animation Performance

// Use CSS transforms for better performance
<Icon
  as={LoaderIcon}
  animation='spin 1s linear infinite'
  css={{
    '@keyframes spin': {
      '0%': { transform: 'rotate(0deg)' },
      '100%': { transform: 'rotate(360deg)' },
    },
  }}
/>

Testing Strategies

Icon Rendering Tests

import { render, screen } from '@testing-library/react';
import { UserSolid } from 'components/WPIcons/FeatureIcons';

describe('UserSolid Icon', () => {
  it('renders with correct attributes', () => {
    render(<UserSolid data-testid='user-icon' boxSize={6} color='blue.500' />);

    const icon = screen.getByTestId('user-icon');
    expect(icon).toBeInTheDocument();
    expect(icon).toHaveAttribute('width', '24');
    expect(icon).toHaveAttribute('height', '24');
  });

  it('applies custom props correctly', () => {
    render(<UserSolid aria-label='User profile' className='custom-icon' />);

    const icon = screen.getByLabelText('User profile');
    expect(icon).toHaveClass('custom-icon');
  });
});

Visual Regression Tests

// Example with Storybook and Chromatic
export default {
  title: 'Icons/FeatureIcons',
  component: UserSolid,
  parameters: {
    chromatic: { viewports: [320, 1200] },
  },
};

export const AllSizes = () => (
  <HStack spacing={4}>
    <UserSolid boxSize={4} />
    <UserSolid boxSize={6} />
    <UserSolid boxSize={8} />
    <UserSolid boxSize={12} />
  </HStack>
);

export const AllColors = () => (
  <HStack spacing={4}>
    <UserSolid color='gray.500' />
    <UserSolid color='green.500' />
    <UserSolid color='blue.500' />
    <UserSolid color='red.500' />
  </HStack>
);

Migration Guide

From Legacy Icons

Update Import Statements

// Old approach
import UserIcon from 'components/icons/UserIcon';

// New approach
import { UserSolid, UserOutline } from 'components/WPIcons/FeatureIcons';

Update Component Usage

// Old approach
<UserIcon size="large" variant="filled" />

// New approach
<UserSolid boxSize={8} />

Handle Icon Variants

// Old approach
<Icon name='user' variant={isActive ? 'filled' : 'outline'} />;

// New approach
{
  isActive ? <UserSolid /> : <UserOutline />;
}

Breaking Changes

Import Paths: Icon import paths have changed
Prop Names: Size and variant props are now handled differently
Icon Names: Some icons have been renamed for consistency

Migration Steps

Audit Icon Usage: Find all icon imports and usage
Map Icon Names: Create mapping from old to new icon names
Update Imports: Change import statements to new structure
Update Props: Convert size/variant props to new format
Test Thoroughly: Verify all icons render correctly

Best Practices

Icon Selection

Use FeatureIcons for business feature navigation and headers
Use GeneralIcons for UI actions, buttons, and controls
Use SocialIcons for social media integrations
Use Individual Icons for specialized use cases

Consistency Guidelines

Maintain consistent sizing across similar UI elements
Use appropriate variants (solid for active states, outline for inactive)
Follow color conventions (green for success, red for errors, etc.)
Provide accessibility labels for all interactive icons

Performance Guidelines

Import only needed icons to minimize bundle size
Use consistent icon sizes to leverage browser caching
Avoid inline styling when possible, use theme colors
Consider icon sprite sheets for very high-usage scenarios

Design System Integration

Follow spacing guidelines when positioning icons
Maintain visual hierarchy with appropriate icon sizes
Use theme colors for consistent brand representation
Test across color modes (light/dark themes)

Icon Reference

Quick Reference Guide

FeatureIcons (33 total)

Airplane, Billing, Calendar, Clipboard, Clock, Coins, Company,
Documents, Dollar, Globe, Global, Headphone, Heart, Home, KPIs,
Laptop, Loans, MarketPlace, Money, Overtime, Project, P9Forms,
Payslip, People, Performance, PiggyBank, Receipt, SalaryAdvance,
Settings, Timer, Training, User, Wallet

GeneralIcons (87 total)

Alert, ArrowCircleDown, ArrowCircleLeft, ArrowCircleRight,
ArrowCircleUp, ArrowDown, ArrowDownLeft, ArrowDownRight,
ArrowElbowUpLeft, ArrowElbowUpRight, ArrowLeft, ArrowLineRight,
ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight, Bank, Bell,
BellOff, BellWithDot, Briefcase, Cake, Camera, CaretUpDown,
Check, ChevronDoubleLeft, ChevronDoubleRight, ChevronDown,
ChevronLeft, ChevronRight, ChevronUp, Copy, Cursor, DotMenu,
Download, Earphones, Edit, Email, Error, Eye, EyeOff,
FileAttachment, Filter, Fingerprint, Flashlight, GenderAmbiguous,
GenderFemale, GenderMale, Grid, HamburgerMenu, HelpQuestion,
Image, LinkExternal, List, Loader, LocationPin, Lock, LogIn,
LogOut, Message, Minus, MoreHorizontal, MoreVertical, PaperPlane,
Pause, Percentage, Phone, Pin, Play, Plus, Printer, Refresh,
Search, Send, Share, SmartPhone, Stop, Star, SuccessIcon,
TooltipInfo, Trash, Undo, Upload, UserMinus, UsersMultiple,
XCircle, CircleIcon, Vector

SocialIcons (9 total)

AppStore, Facebook, Google, Instagram, LinkedIn, PlayStore,
TikTok, Twitter, YouTube

Individual Icons

MpesaActiveIcon, MpesaInactiveIcon, EquitelIcon, FlutterwaveIcon,
SuccessGroupIcon, AlertGroup, ExclamationTriangleFillIcon,
UndefinedImageIcon, EmptyAssetIcon, WorkPayWhiteIcon, Logo,
LogoWhite, LogoMobileWhite

Icon Naming Conventions

Solid variants: No suffix (e.g., UserSolid → User)
Outline variants: "Outline" suffix (e.g., UserOutline)
Colored variants: "Coloured" suffix (e.g., FacebookColoured)
Grey variants: "Grey" suffix (e.g., FacebookGrey)
Special states: Descriptive suffix (e.g., MpesaActiveIcon)

This comprehensive icon system provides consistent, accessible, and performant iconography for the entire WorkPayCore Frontend application.

Overview​

Icon Categories​

WPIcons Collection​

Individual Icons​

FeatureIcons​

Component Location​

Available FeatureIcons​

People & User Management​

Financial & Payroll​

Time & Attendance​

Business Operations​

Technology & Communication​

Learning & Development​

Marketplace & Services​

Usage Examples​

Basic Feature Icon Usage​

Navigation Menu with FeatureIcons​

Icon Variants (Solid vs Outline)​

GeneralIcons​

Component Location​

Icon Categories​

Navigation & Direction (19 icons)​

Actions & Controls (20 icons)​

Interface Elements (15 icons)​

Input & Security (12 icons)​

People & Social (8 icons)​

Status & Feedback (13 icons)​

Usage Examples​

Action Buttons with GeneralIcons​

Navigation Controls​

Search and Filter Interface​

Status Indicators​

SocialIcons​

Component Location​

Available SocialIcons​

Major Platforms​

App Stores​

Search Engines​

Icon Variants​

Coloured Variants​

Grey Variants​

Usage Examples​

Social Login Buttons​

Footer Social Links​

App Download Links​

Individual Icons​

PaymentIcons​

Available Payment Icons​

Usage Examples​

StatusIcons​

Available Status Icons​

Usage Examples​

BrandIcons​

Available Brand Icons​

Usage Examples​

Icon Component Patterns​

Common Props​

Styling Patterns​

Size Standardization​

Color Theming​

Interactive States​

Accessibility​

Screen Reader Support​

Focus States​

Performance Considerations​

Bundle Optimization​

Icon Caching​

Animation Performance​

Testing Strategies​

Icon Rendering Tests​

Visual Regression Tests​

Migration Guide​

From Legacy Icons​

Update Import Statements​

Update Component Usage​

Handle Icon Variants​

Breaking Changes​

Migration Steps​

Best Practices​

Icon Selection​

Overview

Icon Categories

WPIcons Collection

Individual Icons

FeatureIcons

Component Location

Available FeatureIcons

People & User Management

Financial & Payroll

Time & Attendance

Business Operations

Technology & Communication

Learning & Development

Marketplace & Services

Usage Examples

Basic Feature Icon Usage

Navigation Menu with FeatureIcons

Icon Variants (Solid vs Outline)

GeneralIcons

Component Location

Icon Categories

Navigation & Direction (19 icons)

Actions & Controls (20 icons)

Interface Elements (15 icons)

Input & Security (12 icons)

People & Social (8 icons)

Status & Feedback (13 icons)

Usage Examples

Action Buttons with GeneralIcons

Navigation Controls

Search and Filter Interface

Status Indicators

SocialIcons

Component Location

Available SocialIcons

Major Platforms

App Stores

Search Engines

Icon Variants

Coloured Variants

Grey Variants

Usage Examples

Social Login Buttons

Footer Social Links

App Download Links

Individual Icons

PaymentIcons

Available Payment Icons

Usage Examples

StatusIcons

Available Status Icons

Usage Examples

BrandIcons

Available Brand Icons

Usage Examples

Icon Component Patterns

Common Props

Styling Patterns

Size Standardization

Color Theming

Interactive States

Accessibility

Screen Reader Support

Focus States

Performance Considerations

Bundle Optimization

Icon Caching

Animation Performance

Testing Strategies

Icon Rendering Tests

Visual Regression Tests

Migration Guide

From Legacy Icons

Update Import Statements

Update Component Usage

Handle Icon Variants

Breaking Changes

Migration Steps

Best Practices

Icon Selection