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-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>

Component API

<Lineicons />

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

All other standard SVG attributes are supported.