Vuejs-Vue zondicons: vue-zondicons Zondiconvue-zondicons - Vue component for the beautiful Zondicon svg icons


Easily add Zondicon icons to your vue web project


npm install --save vue-zondicons

To Use

In your main.js Vue file add the following

import Zondicon from 'vue-zondicons';

Vue.component('Zondicon', Zondicon);

Browse Zondicons on the Zondicon website then add the name of the icon to the icon attribute

  <Zondicon icon="arrow-left" />

You can also pass css classes to the Zondicon svg element

Note: fill-content and text-red are from the Tailwinds CSS library and vue-zondicons doesnt come with any css.

  <Zondicon icon="arrow-left" class="fill-current text-red"/>


The icon filter has been changed to filter-icon since filter is a registered keyword in Vuejs and will throw errors.

Project setup

npm install

Development setup

clone this repo

npm install # Install dependancies

./scripts/ # download zondicons from zondicon repo and generate vue components

npm build # Build package for npm

npm publish 

Pull Request

Pull Requests are always welcome :)

License: MIT


  • Will this work on nuxt?
    Will this work on nuxt?

    Feb 20, 2019

    I can't get this package working on nuxt, are there any special requirements?

  • How can change text color?
    How can change text color?

    Aug 18, 2020

    I am using tailwind css but i can't change the text color with fill-content text-white

  • vue3.0 support?
    vue3.0 support?

    Jul 20, 2021

    does it surpport vue3?