Docs / Vue
HTML embedReactVueCDN

Vue — @openstroke/vue-icons

Every Free OpenStroke icon as a Vue 3 component, generated straight from the icon database. Same subpath scheme as the React package: import only the style folder you use.

Install

bash
npm install @openstroke/vue-icons vue

Subpath imports (recommended)

Each {type}/{style} folder is its own build entry. Importing from a subpath only pulls in the icons in that one type + style set.

vue
<script setup>
import { Heart } from '@openstroke/vue-icons/classic/line';
</script>

<template>
  <Heart :size="24" class="text-red-500" />
</template>

Components are plain defineComponent + h()render functions under the hood — from the outside they're just Vue components; use them in a template or a render function either way. There are 9 valid subpaths — one per type + style combination that actually has icons:

Every icon takes a size prop

size (default 48) sets both width and height. Everything else — class, style, native listeners like onClick, id — falls through onto the root <svg>automatically via Vue's attribute inheritance. No v-bind="$attrs" needed.

Component names

Names are PascalCase, derived from the icon's slug. A slug that starts with a digit gets an Icon prefix:

text
heart               -> Heart
table-tennis-paddle-ball -> TableTennisPaddleBall
500px               -> Icon500Px   // leading digit gets an "Icon" prefix

Color theming — a real limitation

Icons whose source SVG uses exactly one literal color have that color replaced with currentColor, so setting CSS coloractually changes the icon. Icons with two or more literal colors — every Duo-style icon, plus a number of nominally single-tone icons that actually use two very close near-black shades — keep their literal colors as-is and aren't themeable via CSS color. This is a known, deliberate limitation, not a bug.

Free, non-Brands & Logos icons only

The package ships Free icons, excluding the Brands & Logos category — those are third-party trademarks (Adobe, Apple, Amazon, and so on), not original artwork, so they can't be distributed under this package's MIT license. Paid icons stay web-app-only, gated behind the OpenStroke Cloud subscription. Both are deliberate licensing boundaries, not gaps in the package. Brand icons ship separately as @openstroke/vue-icons-brands, CC0-licensed with an explicit trademark disclaimer — same subpath API, different install.

Root import (convenience)

A root-level import also exists, namespaced per folder (ClassicLine, SharpDuo, etc.) rather than flattened, since the same icon slug legitimately recurs in every style folder it has a variant in. It pulls the entire icon set into your bundle, so prefer the subpath imports above in production.

ts
import { ClassicLine } from '@openstroke/vue-icons';
// <component :is="ClassicLine.Heart" :size="24" />