Pro Icon Packages

Hugeicons provides its icons through separate npm packages, allowing you to install only the styles you need. Each package contains a specific icon style, helping you keep your bundle size minimal.

Warning: Core packages only contain the icon assets. To use these icons in your project, you'll need to install the appropriate framework-specific package (e.g., @hugeicons/react, @hugeicons/vue, etc.) alongside your chosen core package. Visit our framework integration guides for detailed setup instructions.

Quick Start

Get started with Hugeicons in 2 simple steps:

# 1. Install your preferred style package
npm install @hugeicons-pro/core-stroke-rounded
 
# 2. Import the icon you need
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded'

Available Icon Styles

Right-click on any style to copy its installation command (npm, yarn, pnpm, or bun).

Package Structure

Each icon is available in 9 different styles, organized into separate packages:

# Stroke Styles (Line icons with different corner styles)
@hugeicons-pro/core-stroke-rounded
@hugeicons-pro/core-stroke-sharp
@hugeicons-pro/core-stroke-standard
 
# Solid Styles (Filled icons with different corner styles)
@hugeicons-pro/core-solid-rounded
@hugeicons-pro/core-solid-sharp
@hugeicons-pro/core-solid-standard
 
# Special Styles (Unique visual treatments)
@hugeicons-pro/core-bulk-rounded      # Chunky style with depth
@hugeicons-pro/core-duotone-rounded   # Two-color design with primary/secondary emphasis
@hugeicons-pro/core-twotone-rounded   # Alternative two-color treatment

Installation

Install your preferred icon package using npm, yarn, or pnpm:

npm install @hugeicons-pro/core-stroke-rounded

You can install multiple packages if you want to use different styles in your project:

npm install @hugeicons-pro/core-stroke-rounded @hugeicons-pro/core-solid-rounded

Importing Icons

Each icon in our packages can be imported using either its main name or its style-specific alias:

// Using the main name (recommended)
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded';
 
// Using the style-specific alias
import { SearchStrokeRounded } from '@hugeicons-pro/core-stroke-rounded';

When using the same icon from different style packages, you have two approaches to avoid naming conflicts:

1. Using the as keyword to create aliases:

import { SearchIcon as SearchStroke } from '@hugeicons-pro/core-stroke-rounded';
import { SearchIcon as SearchSolid } from '@hugeicons-pro/core-solid-rounded';

2. Using the native style-specific aliases:

import { SearchStrokeRounded } from '@hugeicons-pro/core-stroke-rounded';
import { SearchSolidRounded } from '@hugeicons-pro/core-solid-rounded';

Both approaches work equally well - choose the one that better fits your coding style. The first approach using as is more explicit about the relationship between the icons, while the second approach using native aliases might be more concise.

Dynamic Icon Loading

For applications that need to load icons dynamically based on user input or runtime conditions, we provide a powerful loader feature that loads icons on-demand without bundling all icons upfront.

Why Use Dynamic Loading?

• Performance: Load only the icons you need, when you need them (8-20ms per icon)
• Bundle Size: Initial payload only includes a tiny ~2KB loader file
• Scalability: Handle 40,000+ icons effortlessly without memory bloat
• Developer Experience: Simple API with TypeScript support and error handling

Basic Usage

Each icon package includes a loader.js file with four functions:

import { loadIcon, loadIcons } from '@hugeicons-pro/core-stroke-rounded/loader';
 
// Load a single icon
const HomeIcon = await loadIcon('Home01Icon');
 
// Load multiple icons in parallel
const [SearchIcon, UserIcon, SettingsIcon] = await loadIcons([
  'Search01Icon',
  'User01Icon', 
  'Settings01Icon'
]);

Style-Specific Aliases

To prevent naming conflicts when working with multiple styles, each loader also provides style-specific aliases:

import { 
  loadIconStrokeRounded,
  loadIconsStrokeRounded 
} from '@hugeicons-pro/core-stroke-rounded/loader';
 
import { 
  loadIconSolidRounded,
  loadIconsSolidRounded 
} from '@hugeicons-pro/core-solid-rounded/loader';
 
// No naming conflicts!
const strokeHome = await loadIconStrokeRounded('Home01Icon');
const solidHome = await loadIconSolidRounded('Home01Icon');

Available Loader Functions

Each package provides these loader functions:

Performance Metrics

Based on browser testing:

• Single icon load: 8-20ms (with caching)
• Batch loading (3 icons): ~37ms
• Initial load: Only ~20KB total for all loaders
• Network efficiency: Only requested icons are loaded on-demand

Error Handling

The loader functions handle errors gracefully:

import { loadIcon } from '@hugeicons-pro/core-stroke-rounded/loader';
 
try {
  const icon = await loadIcon('InvalidIconName');
} catch (error) {
  console.error('Icon not found:', error);
  // Handle error (show fallback icon, etc.)
}

When to Use Dynamic Loading

Use dynamic loading when:

• Building icon pickers or search interfaces
• Loading icons based on user data or API responses
• Working with large icon sets where only a subset will be used
• Building modular applications where icons are loaded per module

Use static imports when:

• You know exactly which icons you need at build time
• Working with a small, fixed set of icons
• Performance is critical and you want icons bundled upfront

Icon Naming Convention

Our icons follow a consistent naming pattern:

1. Basic Icons: Simple, descriptive names

   import { HomeIcon, SearchIcon, UserIcon } from '@hugeicons-pro/core-stroke-rounded';

2. Variant Icons: Numbered suffixes for different versions

   import { Notification01Icon, Notification02Icon, Notification03Icon } from '@hugeicons-pro/core-stroke-rounded';

3. Style-Specific Names: Full style name for explicit imports

   import { HomeStrokeRounded, SearchStrokeRounded } from '@hugeicons-pro/core-stroke-rounded';
   import { HomeSolidRounded, SearchSolidRounded } from '@hugeicons-pro/core-solid-rounded';

Bundle Size Optimization

To keep your application's bundle size minimal, we recommend:

1. Tree Shaking: Our packages support tree shaking out of the box. Only the icons you import will be included in your final bundle.

2. Single Style Package: If possible, stick to one style package throughout your application.

3. Dynamic Imports: For applications with many icons, consider using dynamic imports:

// Instead of static import
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded'
 
// Use dynamic import
const SearchIcon = dynamic(() => 
  import('@hugeicons-pro/core-stroke-rounded').then(mod => mod.SearchIcon)
)

4. Monitor Bundle Size: Use tools like webpack-bundle-analyzer to track which icons are included in your bundle.

Using with Framework Components

After installing your desired icon packages, you'll need to use them with our framework-specific components. Check out our integration guides for:

• React
• Vue
• Angular
• Svelte
• React Native