Vue. js is a progressive framework for JavaScript used to build web interfaces and one-page applications. Not just for web interfaces, Vue.js [https://vuejs.org/] 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 t
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.
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 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;
}
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 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!