Does it work with Nuxt?

Yes. Import icons directly in your components; they render on the server and hydrate normally.

Are they tree-shakeable?

Yes. Every icon is its own export, so only what you import is bundled.

How do I colour the icons?

Icons use currentColor, so they follow the text colour. Use a class or the color prop to change it.

Free Vue icons

152 icon components for Vue 3 and Nuxt in outline, solid, duotone and two-tone, rounded or sharp. Tree-shakeable, typed and MIT licensed.

Install

npm i @uv-foundry/icons-vue

Also works with pnpm, yarn and bun.

Use

<script setup>
import { HomeIcon, BellOffIcon } from '@uv-foundry/icons-vue';
</script>

<template>
  <HomeIcon />
  <HomeIcon variant="solid" corner="sharp" :size="16" />
  <BellOffIcon variant="duotone" class="text-red-600" />
  <HomeIcon title="Home" />
</template>

Nuxt

Import icons in any component; they render on the server and the client. Requires Vue 3.5 or later.

Options

Prop	Values	Default
`variant`	stroke, solid, duotone, twotone	stroke
`corner`	rounded, sharp	rounded
`size`	pixels	24
`strokeWidth`	1 to 2	adapts to size: 2.25 at 16px, 1.8 at 20px, 1.5 at 24px
`color`	any CSS colour	currentColor
`title`	accessible label	none (hidden from screen readers)

All 152 icons

Click an icon for its component name, SVG code and every style. Using an AI coding tool? Connect the MCP server and it finds the right icon names for you.

Questions

Does it work with Nuxt?: Yes. Import icons directly in your components; they render on the server and hydrate normally.
Which Vue versions are supported?: Vue 3.5 and later.
Are they tree-shakeable?: Yes. Every icon is its own export, so only what you import is bundled.
How do I colour the icons?: Icons use currentColor, so they follow the text colour. Use a class or the color prop to change it.