LineIcons Vue — Free & Pro Premium Icon Collection
Professional-grade Vue 3 components for LineIcons Free and LineIcons Pro.
Easily add scalable, customizable SVG icons to your Vue applications.
✨ Features
- 🎨 Multiple Styles — Stroke, Solid, Duotone, Bulk, and Outlined icons
- ⚡ Lightweight & Fast — Pure SVG components optimized for Vue 3
- 🧩 Customizable — Control size, color, stroke width, and CSS classes
- 🚀 Tree Shaking — Only bundles icons you import
- 🧑💻 TypeScript Support — Full type definitions
- 📦 Supports Free & Pro Icons
📦 Installation
Free Icons
npm install @lineiconshq/vue-lineicons @lineiconshq/free-icons
Pro Icons (Manual Local Install)
If you have access to LineIcons Pro, install your .tgz icon packages locally.
Option 1: Icons inside lineicons/ folder
npm install @lineiconshq/vue-lineicons
npm install ./lineicons/@lineicons-pro-core-solid-1.0.0.tgz
npm install ./lineicons/@lineicons-pro-core-bulk-1.0.0.tgz
npm install ./lineicons/@lineicons-pro-core-duotone-1.0.0.tgz
npm install ./lineicons/@lineicons-pro-core-stroke-1.0.0.tgz
npm install ./lineicons/@lineicons-pro-core-outlined-1.0.0.tgz
Option 2: Icons not in lineicons/ folder
npm install ./@lineicons-pro-core-solid-1.0.0.tgz
npm install ./@lineicons-pro-core-bulk-1.0.0.tgz
npm install ./@lineicons-pro-core-duotone-1.0.0.tgz
npm install ./@lineicons-pro-core-stroke-1.0.0.tgz
npm install ./@lineicons-pro-core-outlined-1.0.0.tgz
🚀 Usage
Free Icons Example (Composition API)
<template>
<div>
<Lineicons :icon="Home2Outlined" :size="24" color="blue" />
<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" />
<Lineicons :icon="Home2Stroke" :size="80" :stroke-width="2" />
</div>
</template>
<script setup lang="ts">
import { Lineicons } from "@lineiconshq/vue-lineicons";
import {
Home2Outlined,
CloudBolt1Bulk,
CloudBolt1Outlined,
CloudBolt1Duotone,
CloudBolt1Solid,
Home2Stroke,
} from "@lineiconshq/free-icons";
</script>
Pro Icons Example (Composition API)
<template>
<div class="icon-container">
<Lineicons :icon="AlarmError" :size="24" :color="'red'" />
<Lineicons :icon="Wallet2" :size="24" :color="'green'" />
<Lineicons :icon="Zen" :size="24" :color="'blue'" />
<Lineicons :icon="Barn" :size="24" :color="'orange'" />
<Lineicons :icon="BadgeBolt2" :size="24" :color="'purple'" />
</div>
</template>
<script setup lang="ts">
import { Lineicons } from "@lineiconshq/vue-lineicons";
import { AlarmError } from "@lineiconshq-pro/core-solid";
import { Wallet2 } from "@lineiconshq-pro/core-stroke";
import { Zen } from "@lineiconshq-pro/core-duotone";
import { Barn } from "@lineiconshq-pro/core-bulk";
import { BadgeBolt2 } from "@lineiconshq-pro/core-outlined";
</script>
Free Icons Example (Options API)
<template>
<Lineicons :icon="currentIcon" :size="24" 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>
⚙️ Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon |
Object |
— (required) | The icon component to render |
size |
Number | String |
24 |
Icon size in pixels or CSS units |
color |
String |
'currentColor' |
Icon color |
strokeWidth |
Number | String |
1.5 |
Stroke width for stroke icons |
class |
String |
— | Additional CSS class name |
style |
Object |
— | Inline styles |
All other valid SVG attributes are supported and passed through.
🎨 Available Icon Styles
| Style | Package | Description |
|---|---|---|
| Solid | @lineicons-pro/core-solid |
Filled style icons with solid colors. |
| Bulk | @lineicons-pro/core-bulk |
Bold, filled style icons. |
| Duotone | @lineicons-pro/core-duotone |
Two-tone style icons with primary and secondary colors. |
| Stroke | @lineicons-pro/core-stroke |
Stroke style icons with customizable stroke width. |
| Outlined | @lineicons-pro/core-outlined |
Outlined style icons. |
🧩 TypeScript Support
Fully typed — includes definitions for the Lineicons component, IconData interface, and all icon exports.
⚖️ License
- Free Icons: MIT License
- Pro Icons: Commercial License (see lineicons.com)