How to use icons in Vue
Vue makes icons easy whether you prefer local SVG components or a giant on-demand set. Here are the approaches that scale.
Local SVG components
With vite-svg-loader or unplugin-icons you can import an SVG straight into a component and bind classes and sizes to it.
Icon packages
Sets like lucide-vue-next and @phosphor-icons/vue expose one component per icon, tree-shaken so only what you use ships.
On-demand with Iconify
import { Icon } from '@iconify/vue'
<Icon icon="tabler:rocket" width="24" />The Iconify Vue component fetches any icon by name — great when you don't want to commit to a single icon library up front.
Frequently asked questions
Can I use Iconify without a build step?
Yes — the iconify-icon web component works in plain HTML and any framework, including Vue.
How do I recolor a Vue icon?
Use currentColor and set the text color, or pass a colour prop the icon component supports.