@hugeicons/svelte

@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

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	1.5	Width of the icon strokes (works with stroke-style icons)
absoluteStrokeWidth	boolean	false	When true, strokeWidth will be absolute and won't scale with the icon size
class	string	-	Additional CSS classes

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