@hugeicons/preact

HugeIcons Pro Preact Component Library - Beautiful and customizable icons for your Preact applications

What is HugeIcons?

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

Key Highlights

• 4,000+ 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
• 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
  • Interactive Examples
• Performance
• Troubleshooting
• Related Packages
• Pro Version
• License

Features

• 🎨 Customizable colors and sizes
• 💪 TypeScript support with full type definitions
• 🎯 Tree-shakeable for optimal bundle size
• 📱 Native SVG rendering for optimal performance
• ⚡ Lightweight and optimized
• 🔄 Alternate icon support for dynamic interactions

Installation

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

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

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

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

Usage

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

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

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | icon | IconType | Required | The main icon to display | | altIcon | IconType | - | Alternative icon that can be used for states, interactions, animations, or dynamic icon swapping | | showAlt | boolean | false | When true, displays the altIcon instead of the main icon | | size | number | 24 | Icon size in pixels | | color | string | currentColor | Icon color (CSS color value) | | strokeWidth | number | undefined | Width of the icon strokes. When used with absoluteStrokeWidth, the stroke width will be automatically scaled relative to the icon size | | absoluteStrokeWidth | boolean | false | When true, the stroke width will be scaled relative to the icon size to maintain visual consistency across different sizes | | className | string | - | CSS classes for styling the icon |

Examples

Basic Usage

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

function BasicExample() {
  return (
    <div>
      <HugeiconsIcon icon={SearchIcon} />
    </div>
  );
}

Custom Size and Color

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

function CustomExample() {
  return (
    <div>
      <HugeiconsIcon
        icon={NotificationIcon}
        size={32}
        color="#FF5733"
      />
    </div>
  );
}

Interactive Examples

Search Bar with Clear Button

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

function SearchExample() {
  const [searchValue, setSearchValue] = useState('');

  return (
    <div className="search-container">
      <input
        value={searchValue}
        onInput={(e) => setSearchValue(e.target.value)}
        placeholder="Search..."
        className="search-input"
      />
      <button
        onClick={() => searchValue.length > 0 && setSearchValue('')}
        className="search-button"
      >
        <HugeiconsIcon
          icon={SearchIcon}
          altIcon={CloseCircleIcon}
          showAlt={searchValue.length > 0}
          color="#666"
        />
      </button>
    </div>
  );
}

Theme Toggle

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

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

  return (
    <button onClick={() => setIsDark(!isDark)} className="theme-toggle">
      <HugeiconsIcon
        icon={SunIcon}
        altIcon={MoonIcon}
        showAlt={isDark}
        color={isDark ? '#FFF' : '#000'}
      />
    </button>
  );
}

Performance

The @hugeicons/preact package is designed with performance in mind:

• Tree-shakeable: Only the icons you use are included in your bundle
• Optimized SVG: All icons are optimized for size and performance
• Minimal dependencies: The package has minimal dependencies to keep your bundle size small

Troubleshooting

Icons not rendering correctly

Make sure you're using the correct import paths:

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

// Incorrect
import { SearchIcon } from '@hugeicons/preact';

TypeScript errors

If you're experiencing TypeScript errors, make sure you have the correct types installed:

npm install --save-dev @types/preact

Related Packages

• @hugeicons/core-free-icons - Free icon pack
• @hugeicons/react - React component library
• @hugeicons/react-native - React Native component library

Pro Version

The pro version of HugeIcons includes:

• 36,000+ icons across 9 unique styles
• Regular updates with new icons
• Premium support
• Commercial license

Visit hugeicons.com to learn more about the pro version.

License

This package is licensed under the MIT License.