Icon Customization

HugeIcons provides extensive customization options through the HugeiconsIcon component, allowing you to perfectly match your project's design requirements. Our icons are designed to be flexible while maintaining their professional quality across all customization options.

Customization Options

The HugeiconsIcon component accepts various props to match your design needs:

Size: Adjust dimensions to fit your UI requirements
Color: Match your brand colors and theme
Stroke Width: Fine-tune line thickness (for stroke variants)
Alt Icon: Switch between two icons for interactive states
Style Selection: Choose from 9 different icon style packages

Style Packages

Instead of using variant props, HugeIcons uses separate packages for different styles:

# Stroke Styles
npm install @hugeicons-pro/core-stroke-rounded
npm install @hugeicons-pro/core-stroke-sharp
npm install @hugeicons-pro/core-stroke-standard
 
# Solid Styles
npm install @hugeicons-pro/core-solid-rounded
npm install @hugeicons-pro/core-solid-sharp
npm install @hugeicons-pro/core-solid-standard
 
# Special Styles
npm install @hugeicons-pro/core-bulk-rounded
npm install @hugeicons-pro/core-duotone-rounded
npm install @hugeicons-pro/core-twotone-rounded

Basic Properties

Size Customization

Adjust the icon size using the size prop (in pixels):

import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded';
 
// Default size is 24px
<HugeiconsIcon icon={SearchIcon} size={32} />

Color Customization

Change the icon color using the color prop:

import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded';
 
// Using named colors
<HugeiconsIcon icon={SearchIcon} color="blue" />
 
// Using hex values
<HugeiconsIcon icon={SearchIcon} color="#1a73e8" />
 
// Using CSS custom properties
<HugeiconsIcon icon={SearchIcon} color="var(--primary-color)" />

Stroke Width

For stroke-style icons, adjust the line thickness:

import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded';
 
// Default strokeWidth is 1.5
<HugeiconsIcon icon={SearchIcon} strokeWidth={2} />

Interactive States

Use altIcon and showAlt props for interactive states:

import { HugeiconsIcon } from '@hugeicons/react';
import { HeartIcon } from '@hugeicons-pro/core-stroke-rounded';
import { HeartIcon as HeartFilled } from '@hugeicons-pro/core-solid-rounded';
 
<HugeiconsIcon
  icon={HeartIcon}
  altIcon={HeartFilled}
  showAlt={isLiked}
  onClick={toggleLike}
/>

Style-Specific Features

Stroke Styles

Adjustable stroke width
Clean, scalable line icons
Three corner styles: rounded, sharp, and standard

import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded';
 
<HugeiconsIcon 
  icon={SearchIcon}
  size={24}
  color="currentColor"
  strokeWidth={1.5}
/>

Solid Styles

Full color fill
Great for emphasis
Three corner variations

import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons-pro/core-solid-rounded';
 
<HugeiconsIcon 
  icon={SearchIcon}
  size={24}
  color="currentColor"
/>

Special Styles

Bulk Style

import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons-pro/core-bulk-rounded';
 
<HugeiconsIcon 
  icon={SearchIcon}
  size={24}
  color="currentColor"
/>

Duotone Style

import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons-pro/core-duotone-rounded';
 
<HugeiconsIcon 
  icon={SearchIcon}
  size={24}
  color="currentColor"
/>

Twotone Style

import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons-pro/core-twotone-rounded';
 
<HugeiconsIcon 
  icon={SearchIcon}
  size={24}
  color="currentColor"
/>

Best Practices

Consistency: Use the same style package throughout your project for visual coherence
Bundle Size: Import only the style package you need
Color Inheritance: Use currentColor to inherit colors from parent elements
Responsive Design: Adjust icon sizes based on viewport or container size
Accessibility: Ensure sufficient color contrast and provide appropriate aria labels
Interactive States: Use altIcon and showAlt for hover, active, or selected states

Framework Integration

For framework-specific customization options and best practices, refer to our integration guides:

Autocomplete Icon Library