Skip to main content

Icon Components

Icon components provide a comprehensive collection of SVG icons for the WorkPay application. All icons are built using Chakra UI's Icon component and support consistent styling, theming, and accessibility features.

Overview​

The icon system is organized into several categories:

  • GeneralIcons: Basic UI icons (arrows, actions, status)
  • FeatureIcons: Application-specific icons (users, projects, home)
  • SocialIcons: Social media platform icons
  • Flags: Country flag icons
  • Illustrations: Complex graphics and empty states
  • Logo Components: Branding elements

Base Location: src/components/WPIcons/

General Icons​

ChevronDown, ChevronUp, ChevronLeft, ChevronRight​

Direction indicators for dropdowns, navigation, and expandable content.

Location: src/components/WPIcons/GeneralIcons/

Usage:

import { ChevronDownSolid, ChevronUpSolid, ChevronLeftOutline, ChevronRightOutline } from 'components/WPIcons';

// Dropdown indicator
<Button rightIcon={<ChevronDownSolid />}>
  Options
</Button>

// Navigation
<IconButton icon={<ChevronLeftOutline />} aria-label="Previous" />
<IconButton icon={<ChevronRightOutline />} aria-label="Next" />

ArrowDown, ArrowUp, ArrowLeft, ArrowRight​

Directional arrows for navigation and movement.

Usage:

import { ArrowDownSolid, ArrowUpSolid, ArrowLeftOutline, ArrowRightOutline } from 'components/WPIcons';

// Sort indicators
<Button rightIcon={<ArrowDownSolid />}>
  Sort Descending
</Button>

// Navigation buttons
<Button leftIcon={<ArrowLeftOutline />}>
  Back
</Button>
<Button rightIcon={<ArrowRightOutline />}>
  Next
</Button>

Action Icons​

EditSolid​

Edit action for forms and content modification.

Usage:

import { EditSolid } from 'components/WPIcons';

<IconButton icon={<EditSolid />} aria-label='Edit' onClick={handleEdit} />;

TrashSolid​

Delete action with confirmation patterns.

Usage:

import { TrashSolid } from 'components/WPIcons';

<IconButton
  icon={<TrashSolid />}
  aria-label='Delete'
  colorScheme='red'
  onClick={handleDelete}
/>;

SearchSolid​

Search functionality for forms and navigation.

Usage:

import { SearchSolid } from 'components/WPIcons';

&lt;InputGroup&gt;
  &lt;InputLeftElement&gt;
    <SearchSolid color='gray.400' />
  </InputLeftElement>
  <Input placeholder='Search...' />
</InputGroup>;

FilterOutline​

Filter controls for data tables and lists.

Usage:

import { FilterOutline } from 'components/WPIcons';

<Button leftIcon={<FilterOutline />} variant='outline' onClick={openFilters}>
  Filter
</Button>;

Status Icons​

CheckSolid​

Success states and confirmations.

Usage:

import { CheckSolid } from 'components/WPIcons';

<Alert status='success'>
  <CheckSolid color='green.500' />
  &lt;AlertTitle&gt;Success!</AlertTitle>
</Alert>;

XCircleSolid​

Error states and close actions.

Usage:

import { XCircleSolid } from 'components/WPIcons';

<Alert status='error'>
  <XCircleSolid color='red.500' />
  &lt;AlertTitle&gt;Error occurred</AlertTitle>
</Alert>;

BellSolid​

Notifications and alerts.

Usage:

import { BellSolid } from 'components/WPIcons';

<IconButton icon={<BellSolid />} aria-label='Notifications' position='relative'>
  {hasNotifications && (
    <Badge colorScheme='red' position='absolute' top='-1' right='-1'>
      {notificationCount}
    </Badge>
  )}
</IconButton>;

Communication Icons​

EmailSolid​

Email actions and contact information.

Usage:

import { EmailSolid } from 'components/WPIcons';

<Button leftIcon={<EmailSolid />} colorScheme='blue' onClick={sendEmail}>
  Send Email
</Button>;

MessageSolid​

Chat and messaging features.

Usage:

import { MessageSolid } from 'components/WPIcons';

<IconButton icon={<MessageSolid />} aria-label='Messages' onClick={openChat} />;

PhoneSolid​

Phone contact actions.

Usage:

import { PhoneSolid } from 'components/WPIcons';

<Link href={`tel:${phoneNumber}`}>
  <PhoneSolid />
  Call Now
</Link>;

Media Icons​

PlaySolid, PauseSolid, StopSolid​

Media controls for audio/video content.

Usage:

import { PlaySolid, PauseSolid, StopSolid } from 'components/WPIcons';

&lt;HStack&gt;
  <IconButton
    icon={isPlaying ? <PauseSolid /> : <PlaySolid />}
    onClick={togglePlayPause}
  />
  <IconButton icon={<StopSolid />} onClick={stopPlayback} />
</HStack>;

ImageSolid​

Image upload and gallery features.

Usage:

import { ImageSolid } from 'components/WPIcons';

<Button leftIcon={<ImageSolid />} onClick={openImageUpload}>
  Upload Image
</Button>;

Feature Icons​

User Management​

UserSolid​

User profiles and account management.

Location: src/components/WPIcons/FeatureIcons/User.tsx

Usage:

import { UserSolid } from 'components/WPIcons';

<Avatar icon={<UserSolid />} name={user.name} src={user.avatar} />;

PeopleIcon​

Team and group management.

Usage:

import { PeopleIcon } from 'components/WPIcons';

<Button leftIcon={<PeopleIcon />} onClick={openTeamManagement}>
  Manage Team
</Button>;

HomeSolid​

Dashboard and home navigation.

Location: src/components/WPIcons/FeatureIcons/Home.tsx

Usage:

import { HomeSolid } from 'components/WPIcons';

<NavLink to='/dashboard'>
  <HomeSolid />
  Dashboard
</NavLink>;

ProjectOutline​

Project management features.

Location: src/components/WPIcons/FeatureIcons/Project.tsx

Usage:

import { ProjectOutline } from 'components/WPIcons';

<MenuItem icon={<ProjectOutline />}>Projects</MenuItem>;

Social Icons​

Social media platform icons for sharing and integration.

Location: src/components/WPIcons/SocialIcons/

Common Social Icons​

import {
  FacebookIcon,
  TwitterIcon,
  LinkedInIcon,
  InstagramIcon,
} from 'components/WPIcons';

&lt;HStack&gt;
  <IconButton icon={<FacebookIcon />} aria-label='Facebook' />
  <IconButton icon={<TwitterIcon />} aria-label='Twitter' />
  <IconButton icon={<LinkedInIcon />} aria-label='LinkedIn' />
  <IconButton icon={<InstagramIcon />} aria-label='Instagram' />
</HStack>;

Flag Icons​

Country flag icons for international features.

Location: src/components/WPIcons/Flags/

Flag Usage​

import { KenyanFlagIcon, NigerianFlagIcon } from 'components/WPIcons';

&lt;Select&gt;
  <option value='KE'>
    <KenyanFlagIcon /> Kenya
  </option>
  <option value='NG'>
    <NigerianFlagIcon /> Nigeria
  </option>
</Select>;

Illustrations​

Complex graphics and empty state illustrations.

Location: src/components/WPIcons/Illustrations/

NoDataIcon​

Empty state illustration for data tables and empty content.

Usage:

import NoDataIcon from 'components/WPIcons/Illustrations/NoDataIcon';

<VStack spacing={4}>
  <NoDataIcon />
  &lt;Text&gt;No data available</Text>
  <Button onClick={handleRefresh}>Refresh</Button>
</VStack>;

WPAlertIcon​

Alert illustrations for important notifications.

Usage:

import { WPAlertDangerIcon } from 'components/WPIcons/Illustrations/WPAlertIcon';

<Alert status='error'>
  <WPAlertDangerIcon />
  &lt;AlertTitle&gt;Important Alert</AlertTitle>
  &lt;AlertDescription&gt;Please review the following information.</AlertDescription>
</Alert>;

PiggySaveIcon​

Financial and savings-related illustrations.

Usage:

import PiggySaveIcon from 'components/WPIcons/Illustrations/PiggyBank';

&lt;VStack&gt;
  <PiggySaveIcon />
  &lt;Text&gt;Start Saving Today</Text>
  <Button colorScheme='green'>Open Savings Account</Button>
</VStack>;

Logo Components​

Brand identity elements and logos.

Location: src/components/WPIcons/

Logo (Main)​

Primary WorkPay logo component.

Usage:

import Logo from 'components/WPIcons/Logo';

<Logo color='green' height='2rem' />;

LogoWhite​

White version for dark backgrounds.

Usage:

import LogoWhite from 'components/WPIcons/LogoWhite';

<Box bg='dark'>
  <LogoWhite height='2rem' />
</Box>;

LogoMobileWhite​

Mobile-optimized white logo.

Usage:

import LogoMobileWhite from 'components/WPIcons/LogoMobileWhite';

<Box display={{ base: 'block', md: 'none' }}>
  <LogoMobileWhite height='1.5rem' />
</Box>;

Icon Usage Patterns​

Icon Props​

All icons inherit from Chakra UI's Icon component and support:

PropTypeDescription
colorstringIcon color (theme color or CSS color)
sizestring/numberIcon size (xs, sm, md, lg, xl, or pixel value)
boxSizestring/numberWidth and height
...restIconPropsAll Chakra UI Icon props

Common Usage Examples​

Icon Buttons​

<IconButton
  icon={<SearchSolid />}
  aria-label='Search'
  size='sm'
  colorScheme='blue'
  variant='ghost'
/>
<MenuItem icon={<UserSolid />}>Profile Settings</MenuItem>

Input Elements​

&lt;InputGroup&gt;
  &lt;InputLeftElement&gt;
    <SearchSolid color='gray.400' />
  </InputLeftElement>
  <Input placeholder='Search...' />
</InputGroup>

Status Indicators​

&lt;HStack&gt;
  <CheckSolid color='green.500' />
  &lt;Text&gt;Completed</Text>
</HStack>

Responsive Icons​

<Icon
  as={HomeSolid}
  boxSize={{ base: 4, md: 6 }}
  color={{ base: 'gray.500', md: 'blue.500' }}
/>

Animated Icons​

<Icon
  as={RefreshSolid}
  animation='spin 1s linear infinite'
  onClick={handleRefresh}
/>

Icon with Badge​

<Box position='relative'>
  <BellSolid />
  <Badge
    colorScheme='red'
    position='absolute'
    top='-1'
    right='-1'
    borderRadius='full'
  >
    3
  </Badge>
</Box>

Accessibility​

ARIA Labels​

<IconButton
  icon={<EditSolid />}
  aria-label='Edit user profile'
  onClick={handleEdit}
/>

Screen Reader Support​

<Icon as={CheckSolid} aria-hidden="true" />
&lt;Text&gt;Task completed</Text>

Focus Management​

<IconButton
  icon={<TrashSolid />}
  aria-label='Delete item'
  _focus={{ boxShadow: '0 0 0 2px red' }}
/>

Theming and Customization​

Custom Colors​

<Icon as={HomeSolid} color='brand.500' _hover={{ color: 'brand.600' }} />

Size Variations​

&lt;VStack&gt;
  <Icon as={UserSolid} boxSize={4} />
  <Icon as={UserSolid} boxSize={6} />
  <Icon as={UserSolid} boxSize={8} />
</VStack>

Theme Integration​

// In theme
const theme = {
  components: {
    Icon: {
      baseStyle: {
        color: 'gray.600',
      },
      variants: {
        primary: {
          color: 'blue.500',
        },
        secondary: {
          color: 'gray.400',
        },
      },
    },
  },
};

// Usage
<Icon as={SearchSolid} variant='primary' />;

Performance Considerations​

Bundle Size​

  • Icons are tree-shakeable - only import what you need
  • Use specific imports to reduce bundle size
  • Consider icon fonts for very large icon sets

Lazy Loading​

const LazyIcon = lazy(() => import('components/WPIcons/ComplexIllustration'));

<Suspense fallback={<Spinner />}>
  <LazyIcon />
</Suspense>;

Caching​

  • SVG icons are cached by the browser
  • Use consistent icon sizes to leverage caching
  • Consider sprite sheets for repeated icons

Best Practices​

Icon Selection​

  • Use consistent icon styles (all solid or all outline)
  • Choose icons that match user mental models
  • Test icons with different user groups

Icon Placement​

  • Place icons consistently (left of text, right of text)
  • Use appropriate spacing between icons and text
  • Consider icon hierarchy in complex layouts

Color and Contrast​

  • Ensure sufficient contrast ratios
  • Use semantic colors for status icons
  • Test with colorblind users

Icon Sizes​

  • Use consistent sizing scale
  • Consider touch targets for mobile
  • Ensure icons remain legible at small sizes
  • Button Components: Icon button implementations
  • Form Components: Input icon integration
  • Navigation Components: Menu and nav icons
  • Status Components: Status indicator icons

Migration Notes​

From Font Icons​

// Old font icon approach
<i className="fa fa-user" />

// New component approach
<UserSolid />

Version Updates​

  • Check for breaking changes in icon names
  • Update import paths when restructuring
  • Test icon accessibility after updates