Features
Icon Library

Icon Library & Styles

The HugeIcons Icon Library stands at the core of our offering, providing a vast and diverse collection of over 36,000 professionally designed icons. Each icon is available in 9 different styles through our modular package system, ensuring you can find the perfect style for your project while maintaining optimal bundle size.

Overview

Our Icon Library is meticulously organized into categories and styles, making it easy to navigate and find the icons you need. Whether you're looking for icons for web design, mobile applications, or marketing materials, HugeIcons has you covered with its comprehensive collection.

Features

Expansive Collection

  • Over 36,000 Icons: From basic shapes to complex illustrations, our library includes icons for every possible need.
  • 9 Unique Styles: Each icon is available in 9 different styles, including stroke, solid, and special treatments.
  • Diverse Categories: Icons are organized into categories such as Business, Social Media, UI/UX, Weather, and more.

Icon Styles

Our icons are available in three main categories, each with multiple style variations:

  1. Stroke Styles (Line icons with different corner styles)

    • Core Stroke Rounded
    • Core Stroke Sharp
    • Core Stroke Standard

  2. Solid Styles (Filled icons with different corner styles)

    • Core Solid Rounded
    • Core Solid Sharp
    • Core Solid Standard

  3. Special Styles (Unique visual treatments)

    • Core Bulk Rounded (Chunky style with depth)
    • Core Duotone Rounded (Two-color design with primary/secondary emphasis)
    • Core Twotone Rounded (Alternative two-color treatment)

High-Quality Design

  • Professional Quality: Each icon is crafted by expert designers, ensuring they are of the highest quality.
  • Consistent Style: Icons maintain consistency across different styles and categories.
  • Modern Design: Regular updates to keep up with current design trends and user needs.

Package Structure

Icons are organized into separate npm packages by style, allowing you to:

  • Install only the styles you need
  • Reduce bundle size
  • Maintain clean dependencies
# Framework Component (Required)
npm install @hugeicons/react
 
# Icon Style Package (Choose one or more)
npm install @hugeicons-pro/core-stroke-rounded

Using the Icon Library

To use icons from the HugeIcons library:

  1. Install Packages:
# Install the framework component
npm install @hugeicons/react
 
# Install your preferred style package
npm install @hugeicons-pro/core-stroke-rounded
  1. Import Components:
// Import the framework component
import { HugeiconsIcon } from '@hugeicons/react';
 
// Import icons from your chosen style package
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded';
  1. Use in Your Components:
function MyComponent() {
  return (
    <HugeiconsIcon
      icon={SearchIcon}
      size={24}
      color="currentColor"
      strokeWidth={1.5}
    />
  );
}

Interactive Example

Here's an example of using different styles 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';
 
function LikeButton({ isLiked, onClick }) {
  return (
    <button onClick={onClick}>
      <HugeiconsIcon
        icon={HeartIcon}
        altIcon={HeartFilled}
        showAlt={isLiked}
        size={24}
        color="currentColor"
      />
    </button>
  );
}

Continuous Updates

The HugeIcons library is continuously updated with:

  • New icons and categories
  • Additional style variations
  • Performance improvements
  • Enhanced compatibility with popular frameworks

Framework Support

For framework-specific integration guides and examples, refer to:

Customizable IconsApplication Integration