@softicons/vue

Tree-shakeable Vue 3 components for the Softicons icon set — 24×24, mono-line, currentColor, zero runtime dependencies.

Works with Vue 3 and Nuxt 3/4. Vue 2 / Nuxt 2 are not supported.

Install

npm i @softicons/vue
# or
pnpm add @softicons/vue
# or
yarn add @softicons/vue

Use

<script setup>
import { ArrowRightIcon, HeartIcon } from "@softicons/vue";
</script>

<template>
  <ArrowRightIcon />
  <HeartIcon :size="20" :stroke-width="1.5" color="#e06a8b" aria-label="Like" />
</template>

Or register every icon globally via the plugin:

import { createApp } from "vue";
import { Softicons } from "@softicons/vue";

createApp(App).use(Softicons).mount("#app");

| Prop | Type | Default | |---|---|---| | size | number \| string | 24 | | color | string | currentColor | | strokeWidth | number \| string | 1.5 | | aria-label | string | — (adds role="img", else aria-hidden) |

Named imports are individually tree-shakeable, and every icon ships with types.

Links

• 🌐 softicons.dev — browse all icons
• 📖 Docs
• 📦 All Softicons packages on npm

MIT © Softicons