Free Icons for Vue — 47,000+ Icons Ready to Use

Browse and export 47,000+ icons optimized for Vue projects. Get Vue component code, raw SVG, or download as PNG/WebP. Copy-paste ready.

How to Use Icons in Vue Without Installing Packages

Vue developers typically use packages like @fortawesome/vue-fontawesome, lucide-vue-next, or unplugin-icons. These require npm install, plugin registration, and build configuration. IconFontToPNG gives you a faster path — search an icon, click, and copy a complete Vue Single-File Component. Save as .vue file, import, done.

Why Get Vue Icons Here?

  • Complete .vue SFC — <template> + <script setup>, ready to save as file
  • No plugin registration needed — unlike most Vue icon packages
  • Works in Nuxt 3/4, Vite, Vue CLI, Quasar — any Vue 3 project
  • No build plugin (unplugin-icons) configuration required
  • Lighter than importing an entire icon library for a few icons

Vue Icon Code Example

What you get when you copy an icon from IconFontToPNG:

<template>
  <svg width="24" height="24" fill="#52c41a" viewBox="0 0 512 512">
    <path d="M502.6 278.6c12.5-12.5..."/>
  </svg>
</template>

<script setup>
defineOptions({ name: 'arrow-right' })
</script>

Best Icon Libraries for Vue

For Vue 3, lucide-vue-next and @phosphor-icons/vue are top choices with tree-shaking. unplugin-icons auto-imports any icon set but requires build config. For Nuxt, nuxt-icon works well. If you only need a handful of icons, a standalone SFC from IconFontToPNG avoids all that setup.

LibraryIconsVue PackageTree-shakeable
Lucide~1,500lucide-react / lucide-vue-nextYes
Heroicons~450@heroicons/react / @heroicons/vueYes
Phosphor~7,500@phosphor-icons/react / vueYes
Font Awesome~2,000@fortawesome/react-fontawesomeYes
Bootstrap Icons~2,000react-bootstrap-iconsYes
Tabler~5,000@tabler/icons-react / vueYes
Ionicons~1,300@ionic/react (built-in)Partial
Remix Icon~2,800remixicon-reactYes

Frequently Asked Questions

unplugin-icons vs standalone SFC — when to use which?
unplugin-icons is powerful for large projects (auto-import, any icon set). Standalone SFCs are better for small projects, prototypes, or when you want zero build dependencies. No vite plugin config needed.
Does the Vue component work with Nuxt auto-imports?
Yes. Save the SFC in your components/ directory and Nuxt will auto-import it. Use it as <IconArrowRight /> in any template without explicit imports.
Can I add props to the Vue component for dynamic size/color?
Yes. Add defineProps in <script setup>: const props = defineProps({ size: { default: 24 }, color: { default: "#000" } }). Then use :width="size" :height="size" :fill="color" in the SVG.
Are these icons free for commercial Vue apps?
Yes. All 47,000+ icons come from open-source libraries (MIT, Apache 2.0, ISC, CC0, CC BY 4.0). Free for commercial use.
Do I need to install anything?
No. IconFontToPNG runs in your browser. Search, click, copy the code. No npm packages, no build config.

Related Tools

Icons for Other Frameworks