Integrations
Vue
Quick Start (Free)

Quick Start with Vue (Free)

Get up and running with Hugeicons Free in your Vue app. This guide covers prerequisites, installing the Vue 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 Vue 3 app set up (Vite, Nuxt, Vue CLI, etc.)
  • Basic familiarity with Vue Single File Components and <script setup>

1. Install Packages

First, install the Vue component package:

npm install @hugeicons/vue

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 setup>
import { HugeiconsIcon } from '@hugeicons/vue'
import { Notification03Icon } from '@hugeicons/core-free-icons'
</script>
 
<template>
  <HugeiconsIcon :icon="Notification03Icon" :size="24" color="currentColor" :strokeWidth="1.5" />
</template>

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

3. Next steps

OverviewHugeicons Pro with Vue