A high-quality SVG icons for Vue.js

Heroicons for Vue.js - Free, Open source icons

A set of free MIT-licensed high-quality SVG icons for Vue.js development.


  • npm

    npm i @bytegem/vue-heroicons -S
  • yarn

    yarn add @bytegem/vue-heroicons


Global register components:

import Vue from 'vue';
import Heroicons from '@bytegem/vue-heroicons';

Vue.use(Heroicons /* , options */);


Key Desc
compomnents Vue Components. You can only register part of the Heroicons icon component globally or a custom Vue component.
removePrefix Used to remove the Heroicons prefix from the component name.
onlySolid Register only solid style icon components.
onlyOutline Register only outline style icon components.

Only one of them can be set for onlysolid and onlyoutline selection, otherwise unexpected registration will occur

Only using single Icon to Vue Component

import { HeroiconsAnnotationOutline } from '@bytegem/vue-heroicons';

export default {
    components: { HeroiconsAnnotationOutline }


<HeroiconsAnnotationOutline />


<heroicons-annotation-outline />

Package sizes

name size gzip
heroicons.umd.min.js 181.97 KiB 34.67 KiB
heroicons.umd.js 757.71 KiB 58.13 KiB
heroicons.common.js 757.32 KiB 58.01 KiB

Download Details:

Author: bytegem

Live Demo: https://bytegem.github.io/vue-heroicons/

GitHub: https://github.com/bytegem/vue-heroicons

#vuejs #javascript #vue-js

A high-quality SVG icons for Vue.js
19.60 GEEK