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 install @lineiconshq/vue-lineicons @lineiconshq/free-iconsUsing 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>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.