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.

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