Popular Icon Sets for VueJs Apps

Vue. js is a progressive framework for JavaScript used to build web interfaces and one-page applications. Not just for web interfaces, Vue.js is also used both for desktop and mobile app development with Electron framework. Vue.js is getting immense popularity amongst the developers because Vue has it all to make development smooth and easy. Its gentle learning curve is the first significant factor. Vue is also lightweight, flexible, modular and highly performant.

Some of the biggest tech companies like Google, Adobe, Trustpilot, etc. are opting towards this framework. To help you build your next project in Vue, you must need some nice icons that can help you make your design much better. To save your time and energy, here we have listed some of the popular icon sets available for Vue.js applications. Take a look at them and let us know which one you liked the most.

Vue-FontAwesome

Now FontAwesome has a Vue.js component that is available and it let us use the Font Awesome icons in Vue.js projects. The package is made to integrate Font Awesome with Vue.js projects.

You can access all the icons within a single component. The customization of all the icons is also possible,  you can rotate, add border, change position, and also add some advance features to it.

Installation

npm i vue-fontawesome-icon --save
npm i font-awesome --save 

Usage

import Vue from 'vue'

import "font-awesome/css/font-awesome.min.css";

Vue.component('VueFontawesome', require('vue-fontawesome-icon/VueFontawesome.vue').default);

new Vue({
  render: h => h(App),
}).$mount('#app')

Vue Material

Vue Material is an integration between Vue.js and Material Design. Material Design is a simple lightweight and built exactly to the Google Material Design specs.

Material icons uses geometric shapes to visually represent core ideas and topics. Icons can use icon fonts or external SVGs. It also has some premium themes.

Installation

npm i vue-material-design-icons

or

yarn add vue-material-design-icons

Usage

import MenuIcon from 'vue-material-design-icons/Menu.vue';

components: {
  MenuIcon;
}

Vue-Unicons

Unicons are Open Source, free to use icons designed by Iconscout with 11100+ Pixel-Perfect vector icons as Vue Components. The icons are available as SVGs as well as Web-Fonts.

To make your project more elegant and beautiful, they also have illustrations. And if you fail to find the perfect icons and illustrations for your project, they can provide you customized packs according to your need.

Installation

npm install --save @iconscout/vue-unicons

or

yarn add @iconscout/vue-unicons

Usage

<template>
  <div>
    <uil-vuejs size="180px" class="logo" />
  </div>
</template>

<script>
import { UilVuejs } from '@iconscout/vue-unicons'

export default {
  components: {
    UilVuejs
  }
}
</script>

Vue-Feather

Vue Feather is a Feather component for Vue.js. Feather is a collection of simply beautiful open source icons. Each icon is designed on 24x24 grid with an emphasis on simplicity and flexibility.

You can customize the sizes, weights, and colour of icons as well as add animations and transitions to them.

Installation

npm install vue feather-icons vue-feather

Also add the feather.js, vue.js and vue-feather.js in the project.

<script src="/path/to/vue.js"></script><!-- Vue.js is required -->
<script src="/path/to/feather.js"></script><!-- Feather is required -->
<script src="/path/to/vue-feather.js"></script><!-- Register automatically once loaded -->

Usage

import Vue from 'vue';
import VueFeather from 'vue-feather';

Vue.use(VueFeather);
// Or
Vue.component(VueFeather.name, VueFeather);
// Or
Vue.component('vue-feather', VueFeather);

<feather type="feather"></feather>

Icon sets are great way to liven up the Web App. Hope this article helps you to find what suits the best for your project. Visit Resources Category on our blog to find many other useful design resources.

You can also check out Iconscout to download millions of icons, illustrations and stock photos. We will come up with more such resources to provide you the best possible guide. Till then, Happy designing!