@hugeicons/react

Hugeicons Pro React Component Library - Beautiful and customizable icons for your React applications

What is Hugeicons?

Hugeicons is a comprehensive icon library designed for modern web and mobile applications. The free package includes 4,400+ carefully crafted icons in the Stroke Rounded style, while the pro version offers over 40,000+ icons across 9 unique styles.

Key Highlights

• 4,400+ Free Icons: Extensive collection of Stroke Rounded icons covering essential UI elements, actions, and concepts
• Pixel Perfect: Every icon is crafted on a 24x24 pixel grid ensuring crisp, clear display at any size
• Customizable: Easily adjust colors, sizes, and styles to match your design needs
• Multicolor Support: Full multicolor customization for Bulk, Duotone, and Twotone styles in the Pro version
• Regular Updates: New icons added regularly to keep up with evolving design trends

📚 Looking for Pro Icons? Check out our comprehensive documentation at docs.hugeicons.com for detailed information about pro icons, styles, and advanced usage.

Table of Contents

• What is Hugeicons?
• Features
• Installation
• Usage
• Props
• Examples
  • Basic Usage
  • Custom Size and Color
  • Multicolor Examples
  • Interactive Examples
• Performance
• Troubleshooting
• Browser Support
• Related Packages
• Pro Version
• License
• Related

Features

• 🎨 Customizable colors and sizes
• 🌈 Multicolor support for Bulk, Duotone, and Twotone styles
• 💪 TypeScript support with full type definitions
• 🎯 Tree-shakeable for optimal bundle size
• 📦 Multiple bundle formats (ESM, CJS, UMD)
• ⚡ Lightweight and optimized
• 🔄 Alternate icon support for dynamic interactions

Installation

# Using npm
npm install @hugeicons/react @hugeicons/core-free-icons

# Using yarn
yarn add @hugeicons/react @hugeicons/core-free-icons

# Using pnpm
pnpm add @hugeicons/react @hugeicons/core-free-icons

# Using bun
bun add @hugeicons/react @hugeicons/core-free-icons

Usage

import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons/core-free-icons';

function App() {
  return (
    <HugeiconsIcon
      icon={SearchIcon}
      size={24}
      color="currentColor"
      strokeWidth={1.5}
    />
  );
}

Props

Examples

Basic Usage

import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons/core-free-icons';

<HugeiconsIcon icon={SearchIcon} />

Custom Size and Color

import { NotificationIcon } from '@hugeicons/core-free-icons';

<HugeiconsIcon
  icon={NotificationIcon}
  size={32}
  color="#FF5733"
/>

Multicolor Examples

Bulk Style with Custom Colors

import { HugeiconsIcon } from '@hugeicons/react';
import { DocumentIcon } from '@hugeicons-pro/core-bulk-rounded';

<HugeiconsIcon
  icon={DocumentIcon}
  size={32}
  primaryColor="#4361EE"
  secondaryColor="#B5CCFF"
  disableSecondaryOpacity={true}
/>

Duotone Style with Custom Colors

import { HugeiconsIcon } from '@hugeicons/react';
import { CalendarIcon } from '@hugeicons-pro/core-duotone-rounded';

<HugeiconsIcon
  icon={CalendarIcon}
  size={32}
  primaryColor="#FF5733"
  secondaryColor="#FFD6CC"
/>

Twotone Style with Custom Colors

import { HugeiconsIcon } from '@hugeicons/react';
import { ChartIcon } from '@hugeicons-pro/core-twotone-rounded';

<HugeiconsIcon
  icon={ChartIcon}
  size={32}
  primaryColor="#10B981"
  secondaryColor="#D1FAE5"
  disableSecondaryOpacity={true}
/>

Interactive Examples

Search Bar with Clear Button

import { useState } from 'react';
import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon, CloseCircleIcon } from '@hugeicons/core-free-icons';

function SearchBar() {
  const [value, setValue] = useState('');

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Search..."
      />
      <HugeiconsIcon
        icon={SearchIcon}
        altIcon={CloseCircleIcon}
        showAlt={value.length > 0}
        onClick={() => value.length > 0 && setValue('')}
      />
    </div>
  );
}

Theme Toggle

import { useState } from 'react';
import { HugeiconsIcon } from '@hugeicons/react';
import { SunIcon, MoonIcon } from '@hugeicons/core-free-icons';

function ThemeToggle() {
  const [isDark, setIsDark] = useState(false);

  return (
    <button onClick={() => setIsDark(!isDark)}>
      <HugeiconsIcon
        icon={SunIcon}
        altIcon={MoonIcon}
        showAlt={isDark}
      />
    </button>
  );
}

Menu Toggle

import { useState } from 'react';
import { HugeiconsIcon } from '@hugeicons/react';
import { MenuIcon, CancelIcon } from '@hugeicons/core-free-icons';

function MenuButton() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <button onClick={() => setIsOpen(!isOpen)}>
      <HugeiconsIcon
        icon={MenuIcon}
        altIcon={CancelIcon}
        showAlt={isOpen}
      />
    </button>
  );
}

Performance

• Tree-shaking: The package is fully tree-shakeable, ensuring only the icons you use are included in your final bundle
• Optimized SVGs: All icons are optimized for size and performance
• Code Splitting: Icons can be easily code-split when using dynamic imports

Troubleshooting

Common Issues

1. Icons not showing up?

   • Make sure you've installed both @hugeicons/react and @hugeicons/core-free-icons
   • Check that the icon names are correctly imported

2. TypeScript errors?

   • Ensure your tsconfig.json includes the necessary type definitions
   • Check that you're using the latest version of the package

3. Bundle size concerns?

   • Use named imports instead of importing the entire icon set
   • Implement code splitting for different sections of your app

Browser Support

The library supports all modern browsers.

Related Packages

• @hugeicons/vue - Vue component
• @hugeicons/angular - Angular component
• @hugeicons/svelte - Svelte component
• @hugeicons/react-native - React Native component

Pro Version

🌟 Want access to 36,000+ icons and 9 unique styles? Check out our Pro Version and visit docs.hugeicons.com for comprehensive documentation.

Available Pro Styles

• Stroke Styles
  • Stroke Rounded (@hugeicons-pro/core-stroke-rounded)
  • Stroke Sharp (@hugeicons-pro/core-stroke-sharp)
  • Stroke Standard (@hugeicons-pro/core-stroke-standard)
• Solid Styles
  • Solid Rounded (@hugeicons-pro/core-solid-rounded)
  • Solid Sharp (@hugeicons-pro/core-solid-sharp)
  • Solid Standard (@hugeicons-pro/core-solid-standard)
• Special Styles
  • Bulk Rounded (@hugeicons-pro/core-bulk-rounded)
  • Duotone Rounded (@hugeicons-pro/core-duotone-rounded)
  • Twotone Rounded (@hugeicons-pro/core-twotone-rounded)

License

This project is licensed under the MIT License.

Related

• @hugeicons/core-free-icons - Free icon package
• Hugeicons Website - Browse all available icons