Browse icons

free Vue icons

Free icons for Vue

Short answer

Click an icon below to copy its SVG and paste it straight into a Vue template: it uses currentColor, so it follows your text colour and dark mode. Prefer components? npm i @withicons/vue (Vue 3) brings all 500 icons in 20 styles. MIT licensed.

Pick an icon, copy the code

A starter set for Vue. Search to find any of all 500.

Click an icon to copy it for a Vue template. The arrow opens its page.

The package

Same names, same props as React

Install it with npm i @withicons/vue, then import icons as components; the default is Line and other styles are subpaths. No build step? Paste inline SVG from the grid or use the icon classes.

Quick facts
Package@withicons/vue (Vue 3)
Propssize, color, stroke-width, title
LicenceMIT
Toolbar.vue
<script setup>
import { Home, Search } from '@withicons/vue'
import { Home as HomeSolid } from '@withicons/vue/solid'
</script>

<template>
  <Home />
  <Search :size="20" :stroke-width="1.5" />
  <HomeSolid :size="32" color="#e11d48" title="Home" />
</template>

FAQ

Questions people ask

Is @withicons/vue on npm?

Yes: npm i @withicons/vue (Vue 3). You can also paste inline SVG from this page, or get sprites and CSS from the developer page.

Does it work with Nuxt?

Yes. Inline SVG works anywhere in Nuxt templates, and the component package targets Vue 3, which Nuxt 3 uses.

How do I colour the icons in Vue?

They use currentColor: set the CSS color on the icon or its parent, e.g. with a Tailwind text class.

Find your icon in seconds

500 free icons, 20 styles, no account. Copy, download or drag them into your work.

Browse all icons