Integrations
Svelte
Quick Start (Free)

Quick Start with Svelte (Free)

Get up and running with Hugeicons Free in your Svelte app. This guide covers prerequisites, installing the Svelte component and free icon package, and rendering your first icon.

Prerequisites

Before you start, make sure you have:

  • Node.js and npm (or Yarn / pnpm) installed
  • A Svelte or SvelteKit app set up (Vite, SvelteKit, etc.)
  • Basic familiarity with Svelte components and <script> blocks

1. Install Packages

First, install the Svelte component package:

npm install @hugeicons/svelte

Then, install the free icon pack:

npm install @hugeicons/core-free-icons

Our free package, @hugeicons/core-free-icons, includes 4,000+ icons in 1 style (Stroke Rounded only) you can use in any projects at no cost. For more styles, upgrade to Hugeicons Pro.

2. Basic Usage

Import the HugeiconsIcon component and any icon from the free package to get started.

<script>
  import { HugeiconsIcon } from '@hugeicons/svelte'
  import { Notification03Icon } from '@hugeicons/core-free-icons'
</script>
 
<HugeiconsIcon
  icon={Notification03Icon}
  size={24}
  color="currentColor"
  strokeWidth={1.5}
/>

You can adjust the size, color, and strokeWidth props to match your design system.

3. Next steps

OverviewHugeicons Pro with Svelte