Skip to Content
FeaturesCustomizable Icons

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 10 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-duotone-standard
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

  1. Consistency: Use the same style package throughout your project for visual coherence
  2. Bundle Size: Import only the style package you need
  3. Color Inheritance: Use currentColor to inherit colors from parent elements
  4. Responsive Design: Adjust icon sizes based on viewport or container size
  5. Accessibility: Ensure sufficient color contrast and provide appropriate aria labels
  6. 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:

AutocompleteIcon Library