1. Icon Monks
  2. Vue icons

Vue icons

5,518 free icon components for Vue 3 and Nuxt, each in six weights, tree-shakeable and fully typed.

Install

npm install @icon-monks/vue

Use an icon

<script setup>
import { House, Heart } from '@icon-monks/vue';
</script>

<template>
  <House />
  <Heart :size="32" color="crimson" weight="fill" />
</template>

Set defaults

<script setup>
import { provide } from 'vue';
import { IconContextKey } from '@icon-monks/vue';

provide(IconContextKey, { size: 24, weight: 'bold' });
</script>

Props

size, color, weight (thin, light, regular, bold, fill, duotone) and mirrored. Other attributes fall through to the <svg>.

Popular icons

Browse all 5,518 iconsBrowse by category

Frequently asked questions

Does it work with Nuxt?

Yes. The components render on the server and in the browser, so they work in Nuxt pages, layouts and components.

Does it support Vue 2?

The package targets Vue 3. For Vue 2 projects, use the web component or the SVG files.

Is it tree-shakeable?

Yes. Each icon is a separate module, so only the icons you import end up in your bundle.

Other platforms