Vue Integration

Lineicons Vue lets you easily add clean, scalable SVG icons to your Vue 3 projects. Each icon is a lightweight Vue component, fully customizable with props for size, color, and stroke — perfect for building modern UIs.

Install Lineicons Vue to your project with NPM and start using Free or Pro icons instantly. You can control size, color, and styling easily with props to match your design system.

🚀 Installation

npm


npm install @lineiconshq/vue-lineicons @lineiconshq/free-icons

pnpm


pnpm add @lineiconshq/vue-lineicons @lineiconshq/free-icons

yarn


yarn add @lineiconshq/vue-lineicons @lineiconshq/free-icons

bun


bun add @lineiconshq/vue-lineicons @lineiconshq/free-icons

Using Lineicons Vue


<template>
  <div>
    <Lineicons
      :icon="Home2Outlined"
      :size="24"
      color="blue"
      :stroke-width="1.5"
    />
    <Lineicons :icon="CloudBolt1Bulk" :size="40" color="orange" />
    <Lineicons :icon="CloudBolt1Outlined" :size="50" color="blue" />
    <Lineicons :icon="CloudBolt1Duotone" :size="30" color="green" />
    <Lineicons :icon="CloudBolt1Solid" :size="24" />
  </div>
</template>
 
<script setup lang="ts">
import { Lineicons } from "@lineiconshq/vue-lineicons";
import {
  Home2Outlined,
  CloudBolt1Bulk,
  CloudBolt1Outlined,
  CloudBolt1Duotone,
  CloudBolt1Solid,
} from "@lineiconshq/free-icons";
</script>

Using the Options API


<template>
  <Lineicons :icon="currentIcon" :size="32" color="red" />
</template>
 
<script>
import { Lineicons } from "@lineiconshq/vue-lineicons";
import { Home2Outlined } from "@lineiconshq/free-icons";
 
export default {
  components: { Lineicons },
  data() {
    return { currentIcon: Home2Outlined };
  },
};
</script>

Using Pro Icons

Pro gives you access to all 31,204 icons and works the same way as the free package.

Pro packages are not on the public npm registry, so npm install @lineiconshq-pro/... on its own will fail. Log in to your Lineicons account and download the package files from the Downloads page, then install them from a local file.

Download the Pro packages

Log in to your Lineicons account and open Downloads from the account menu. Download the .tgz file for each style you need: Stroke, Outlined, Solid, Duotone, or Bulk.

Move them into your project

Run this from your project root (change ~/Downloads if you saved the files elsewhere):


mkdir -p vendor/lineicons && mv ~/Downloads/lineiconshq-pro-core-*.tgz vendor/lineicons/

Install the Pro packages

This installs every .tgz file in vendor/lineicons:

npm


npm install ./vendor/lineicons/*.tgz

pnpm


pnpm add ./vendor/lineicons/*.tgz

yarn


yarn add ./vendor/lineicons/*.tgz

bun


bun add ./vendor/lineicons/*.tgz

On Windows, *.tgz is not expanded. List each file path instead, as shown in the Pro Packages guide.

Install the wrapper

Pro icons render through @lineiconshq/vue-lineicons, the same package you use for free icons. Skip this step if you already installed it.

npm


npm install @lineiconshq/vue-lineicons

pnpm


pnpm add @lineiconshq/vue-lineicons

yarn


yarn add @lineiconshq/vue-lineicons

bun


bun add @lineiconshq/vue-lineicons

Use Pro icons

Import icons from the Pro package for the style you want. Pro icon names have no style suffix, so the outlined AlarmError comes from @lineiconshq-pro/core-outlined.


<template>
  <div>
    <Lineicons
      :icon="AlarmError"
      :size="24"
      color="blue"
      :stroke-width="1.5"
    />
  </div>
</template>
 
<script setup lang="ts">
import { Lineicons } from "@lineiconshq/vue-lineicons";
import { AlarmError } from "@lineiconshq-pro/core-outlined";
</script>

To get an icon’s import name, open it on lineicons.com/icons , click Copy Icon Name, and convert it to PascalCase (alarm-error → AlarmError).

Tip: You can install free and Pro packages together. If two imports share a name, rename one on import, for example import { AlarmError as AlarmErrorSolid } from "@lineiconshq-pro/core-solid";.

Commit vendor/lineicons so CI and hosting builds can install it, but only in private repositories. Never publish the .tgz files to npm or push them to a public repo.

For deploying, updating, and troubleshooting, see Pro Packages.

Component API

`<Lineicons />`


interface LineiconsProps {
  icon: IconData;
  size?: number | string;
  color?: string;
  class?: string;
  strokeWidth?: number;
}

Prop	Type	Default	Description
`icon`	`IconData`	— (required)	The icon object to render.
`size`	`number \| string`	`24`	Icon size (pixels or any CSS size unit).
`color`	`string`	`currentColor`	Icon color.
`class`	`string`	—	CSS class for custom styling.
`strokeWidth`	`number`	`1.5`	Stroke width for outlined icons.

All other standard SVG attributes are supported.