Hugeicons Pro with Svelte

Use Hugeicons Pro directly in your Svelte app. Pro subscribers get access to over 40,000 icons across 9 unique styles, delivered via our private npm registry.

Prerequisites

Before using Pro with Svelte, make sure you have:

• A Svelte or SvelteKit project set up
• An active Hugeicons Pro subscription
• Your Universal License Key ready (see Activate License)

If you are not a Pro user yet, you can purchase a license from the Hugeicons pricing page (opens in a new tab).

1. Authenticate with the Private Registry

To install Pro packages, you need to authenticate your package manager with the Hugeicons private registry using your Universal License Key.

For npm, pnpm, and Yarn (npm-style config), create or update an .npmrc file in your project root:

@hugeicons-pro:registry=https://npm.hugeicons.com/
//npm.hugeicons.com/:_authToken=UNIVERSAL_LICENSE_KEY

Replace UNIVERSAL_LICENSE_KEY with the key from your Hugeicons account.
For Yarn modern config and Bun-specific examples, see the full activation guide.

2. Install Pro Packages

Install the Svelte component package if you haven't already:

npm install @hugeicons/svelte

Then, install one or more of our 9 Pro icon styles:

Stroke Styles

npm install @hugeicons-pro/core-stroke-rounded
npm install @hugeicons-pro/core-stroke-sharp
npm install @hugeicons-pro/core-stroke-standard

Solid Styles

npm install @hugeicons-pro/core-solid-rounded
npm install @hugeicons-pro/core-solid-sharp
npm install @hugeicons-pro/core-solid-standard

Duotone & Bulk Styles

npm install @hugeicons-pro/core-duotone-rounded
npm install @hugeicons-pro/core-twotone-rounded
npm install @hugeicons-pro/core-bulk-rounded

For more details on our core packages and available styles, visit the Core Packages page.

3. Use Pro icons in Svelte

Once authenticated and installed, you can import Pro icons and render them with HugeiconsIcon just like the free icons:

<script>
  import { HugeiconsIcon } from '@hugeicons/svelte'
  import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded'
</script>
 
<HugeiconsIcon
  icon={SearchIcon}
  size={24}
  color="currentColor"
  strokeWidth={1.5}
/>

You can mix free and Pro icons in the same project, as long as they’re imported from their respective packages.

Icon naming

Each icon in our Pro packages can be imported using either its main name or a style-specific alias:

import { FavouriteStrokeStandard } from '@hugeicons-pro/core-stroke-standard'
import { FavouriteSolidStandard } from '@hugeicons-pro/core-solid-standard'

We recommend using the shorter main name (e.g., SearchIcon) for readability, and using style-specific aliases when you need multiple styles of the same icon in one file to avoid name collisions.

4. Tips for Pro usage

• Keep your Universal License Key out of version control (use environment variables or a local config file)
• Import only the icons you actually use to help bundlers tree-shake unused code
• For advanced props and patterns (alt icons, dynamic switching, etc.), see the HugeiconsIcon wrapper and Examples with Svelte