@hugeicons/svelte

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

What is HugeIcons?

HugeIcons is a comprehensive icon library designed for modern web and mobile 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
• Browser Support
• Related Packages
• Pro Version
• License
• Related

Features

• 🎨 Customizable colors and sizes
• 💪 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/svelte @hugeicons/core-free-icons

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

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

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

Usage

<script>
  import { HugeiconsIcon } from '@hugeicons/svelte';
  import { SearchIcon } from '@hugeicons/core-free-icons';
</script>

<HugeiconsIcon
  icon={SearchIcon}
  size={24}
  color="currentColor"
  strokeWidth={1.5}
/>

Props

Examples

Basic Usage

<script>
  import { HugeiconsIcon } from '@hugeicons/svelte';
  import { SearchIcon } from '@hugeicons/core-free-icons';
</script>

<HugeiconsIcon icon={SearchIcon} />

Custom Size and Color

<script>
  import { HugeiconsIcon } from '@hugeicons/svelte';
  import { NotificationIcon } from '@hugeicons/core-free-icons';
</script>

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

Interactive Examples

Search Bar with Clear Button

<script>
  import { HugeiconsIcon } from '@hugeicons/svelte';
  import { SearchIcon, CloseCircleIcon } from '@hugeicons/core-free-icons';
  
  let value = '';
</script>

<div>
  <input
    type="text"
    bind:value
    placeholder="Search..."
  />
  <HugeiconsIcon
    icon={SearchIcon}
    altIcon={CloseCircleIcon}
    showAlt={value.length > 0}
    on:click={() => value.length > 0 && (value = '')}
  />
</div>

Theme Toggle

<script>
  import { HugeiconsIcon } from '@hugeicons/svelte';
  import { SunIcon, MoonIcon } from '@hugeicons/core-free-icons';
  
  let isDark = false;
</script>

<button on:click={() => isDark = !isDark}>
  <HugeiconsIcon
    icon={SunIcon}
    altIcon={MoonIcon}
    showAlt={isDark}
  />
</button>

Menu Toggle

<script>
  import { HugeiconsIcon } from '@hugeicons/svelte';
  import { MenuIcon, CancelIcon } from '@hugeicons/core-free-icons';
  
  let isOpen = false;
</script>

<button on:click={() => isOpen = !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/svelte 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/react - React component
• @hugeicons/vue - Vue component
• @hugeicons/angular - Angular 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