Hugeicons with Svelte Overview

Hugeicons gives you a flexible icon system for Svelte, from a free starter pack to the full 40,000+ icon Pro library.
The @hugeicons/svelte package exposes a HugeiconsIcon Svelte component that can render any icon you import from our packages.

Use this overview page as the entry point into all Svelte-related docs.

Prerequisites

Before using Hugeicons with Svelte, you should have:

A Svelte or SvelteKit app (Vite, SvelteKit CLI, etc.)
Node.js and a package manager (npm, pnpm, or Yarn)
Basic familiarity with Svelte components and templates

Free vs Pro at a glance

	Free	Pro
Icon library	4,000+ free icons in 1 style (Stroke Rounded only)	40,000+ icons across 9 styles
Packages	`@hugeicons/svelte`, `@hugeicons/core-free-icons`	`@hugeicons/svelte`, `@hugeicons-pro/core-*`
Registry	Public npm registry	Private Hugeicons registry (`https://npm.hugeicons.com/`)
Best for	Trying Hugeicons, simple projects, or commercial projects that only need Stroke Rounded icons	Full access for personal and commercial projects with all 9 styles and 40K icons
Setup guide	Quick Start (Free)	Hugeicons Pro with Svelte

Choose your path

Just getting started and want free icons?
Go to Quick Start (Free) to install @hugeicons/svelte and @hugeicons/core-free-icons, and render your first icon.
Already a Pro customer or need more styles?
Go to Hugeicons Pro with Svelte to authenticate with our private registry, install Pro icon packages, and use them in your app.
Need the full API for the HugeiconsIcon component?
Go to HugeiconsIcon Wrapper for the props table, styling options, accessibility guidance, and performance tips.
Optimizing how you use icons across your app?
Go to Best Practices with Svelte for patterns around imports, theming, accessibility, and component composition.
Looking for ready-made patterns and snippets?
Go to Examples with Svelte for copy-paste examples like search bars, theme toggles, and navigation bars that showcase dynamic icon behavior.

Examples with Angular Quick Start (Free)