In the UI/UX field, adding icons helps create a visual indicator for a particular element (i.e., a button, or a tab header) to express the context/action without so much text. Moreover, adding icons makes the app eye-catching and friendly for users.
We can add icons to our Vue.js apps with various icon libraries that come with either font- or SVG-based icon sets. Some icon libraries come as a part of a popular Vue.js UI component library; other libraries were developed based on popular, library-agnostic icon collections.
In this article, I will help you choose an icon library for your Vue.js project by listing popular Vue.js icon libraries with features and demos. Also, I will mention some niche and lesser-known icon libraries for designing unique app screens.
Here’s a list of libraries we’ll cover:
You can create a new Vue 3 app with the following command to test the upcoming code examples on your computer:
npx create-vue@3
Or, you can copy-paste the following code into a CodeSandbox Vue.js 3 project.
Let’s get into it!
The heroicons library offers over 290 high-quality, MIT-licensed SVG icons for web development. It was developed by the Tailwind CSS team and offers an official component package for Vue.js. You can also copy-paste the library-agnostic SVG code from the official website.
text-gray-500)You can install this icon library with the following command:
npm install @heroicons/vue # --- or --- yarn add @heroicons/vue
You can import, use, and customize icons as shown in the following example:
<script>
import { BeakerIcon, Cog6ToothIcon } from '@heroicons/vue/24/solid';
export default {
components: { BeakerIcon, Cog6ToothIcon }
}
</script>
<template>
<div>
<beaker-icon class="icon"/>
<cog-6-tooth-icon class="icon"/>
</div>
</template>
<style>
.icon {
width: 36px;
height: 36px;
color: #222;
margin-left: 12px;
}
</style>
Browse all icons on the Heroicons website.
The @fortawesome/vue-fontawesome package lets you use the well-known FontAwesome icon collection’s free and open-source icons. This library lets you use inbuilt animations for icons and also lets you customize icons with pre-developed component props.
You can install this icon library and its dependencies with the following command:
npm install @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons # --- or --- yarn add @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
This icon library recommends using a global setup with your required icons in the main app entry point, as shown in the following main.js source:
import { createApp } from 'vue';
import App from './App.vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faUser, faClock } from '@fortawesome/free-solid-svg-icons';
import './assets/main.css';
library.add(faUser, faClock);
const app = createApp(App);
app.component('font-awesome-icon', FontAwesomeIcon)
app.mount('#app');
Next, you can display any pre-imported icon in your App.vue:
<template>
<div>
<font-awesome-icon icon="fa-solid fa-user" class="icon"/>
<font-awesome-icon icon="fa-solid fa-clock" class="icon"/>
</div>
</template>
<style>
.icon {
margin-left: 12px;
font-size: 36px;
color: #222;
}
</style>
Browse all available icons on the FontAwesome website.
PrimeIcons is the default icon library for all Prime-based UI component libraries. PrimeIcons is a library-agnostic icon library because it recommends you import font-based icons from a stylesheet. In Vue.js apps, you can either import icons from the primeicons.css stylesheets or copy-paste the SVG icon sources from the GitHub repository.
pl-spin CSS classYou can install this icon library with the following command:
npm install primeicons # --- or --- yarn add primeicons
You can import, use, and customize icons as shown in the following example:
<script>
import 'primeicons/primeicons.css';
</script>
<template>
<div>
<i class="icon pi pi-clock"></i>
<i class="icon pi pi-car"></i>
</div>
</template>
<style>
.icon {
color: #222;
margin-left: 12px;
font-size: 36px;
}
</style>
Browse all icons on the PrimeVue website.
CoreUI is a popular UI component library for vanilla JavaScript, Vue, Angular, and React. The CoreUI library offers over 1,500 free and open-source icons via the @coreui/icons package that offers both SVGs and an icon font. We can use all supported CoreUI SVG icons in Vue.js via the @coreui/icons-vue package.
You can install this icon library with the following command:
npm install @coreui/icons @coreui/icons-vue # --- or --- yarn add @coreui/icons @coreui/icons-vue
You can import, use, and customize icons as shown in the following example:
<script>
import { CIcon } from '@coreui/icons-vue';
import { cilCalendar, cilBell } from '@coreui/icons';
export default {
components: { CIcon },
setup() {
return { cilCalendar, cilBell }
}
}
</script>
<template>
<div>
<CIcon :icon="cilCalendar" width="36" customClassName="icon"/>
<CIcon :icon="cilBell" width="36" customClassName="icon"/>
</div>
</template>
<style>
.icon {
color: #222;
margin-left: 12px;
}
</style>
Browse all icons on the CoreUI website.
The Material Design concept offers a UI/UX specification for a component-based, fully-featured design system. It has several official implementations (i.e., Flutter widgets and Android UI) as well as third-party implementations. The @mdi/js package offers SVG data for icons in the Material design concept. The vue-material-design-icons library is a wrapper library that lets Vue.js developers use Material icons via @mdi/js.
You can install this icon library with the following command:
npm install vue-material-design-icons # --- or --- yarn add vue-material-design-icons
You can import, use, and customize icons as shown in the following example:
<script>
import AlarmIcon from 'vue-material-design-icons/Alarm.vue';
import BasketIcon from 'vue-material-design-icons/Basket.vue';
export default {
components: { AlarmIcon, BasketIcon },
}
</script>
<template>
<div>
<alarm-icon :size="36" class="icon"/>
<basket-icon :size="36" class="icon"/>
</div>
</template>
<style>
.icon {
color: #222;
margin-left: 12px;
}
</style>
Browse all icons on the Pictogrammers website.
The vue-feather package offers free, open-source, MIT-licensed, SVG-based icons from the popular feature-icons package for Vue.js projects.
You can install this icon library with the following command:
npm install vue-feather # --- or --- yarn add vue-feather
You can import, use, and customize icons as shown in the following example:
<script>
import VueFeather from 'vue-feather';
export default {
components: {
'vue-feather': VueFeather
}
}
</script>
<template>
<div>
<vue-feather type="star" size="36" class="icon"/>
<vue-feather type="sun" size="36" class="icon"/>
</div>
</template>
<style>
.icon {
margin-left: 12px;
color: #222;
}
</style>
Browse all icons on the library’s website.
The @iconscout/unicons package offers over 1,000 icons in the SVG format and via an icon font. The vue-unicons package lets you use all supported SVG Unicons via a pre-developed Vue.js component.
You can install this icon library with the following command:
npm install vue-unicons # --- or --- yarn add vue-unicons
This library offers an inbuilt API to register required icons from the main entry point of the Vue.js app without using local component imports. Look at the following main.js source:
import { createApp } from 'vue';
import App from './App.vue';
import Unicon from 'vue-unicons';
import { uniMusic, uniCarWash } from 'vue-unicons/dist/icons';
import './assets/main.css';
Unicon.add([uniMusic, uniCarWash]);
createApp(App).use(Unicon).mount('#app');
You can display any pre-imported icon in App.vue:
<template>
<div>
<unicon
name="car-wash"
width="36"
height="36"
class="icon"
fill="#222">
</unicon>
<unicon
name="music"
width="36"
height="36"
class="icon"
fill="#222">
</unicon>
</div>
</template>
<style>
.icon {
margin-left: 12px;
}
</style>
Browse all icons on the library’s website.
We can use various icon packs from different Vue.js icon libraries, but in some scenarios, we need to use several icon packs in one app. In this case, we’d have to install multiple icon libraries in our Vue.js projects.
What if you can access every popular icon library by installing one library, but only bundle the icons that you use? The oh-vue-icons package provides a single Vue.js component to access over 30,000 SVG icons from multiple icon collections.
You can install this icon library with the following command:
npm install oh-vue-icons # --- or --- yarn add oh-vue-icons
This icon library requires a global setup with required icons in the main app entry point, as shown in the following main.js source:
import { createApp } from 'vue';
import App from './App.vue';
import { OhVueIcon, addIcons } from 'oh-vue-icons';
import { BiBagFill, FaClock } from 'oh-vue-icons/icons';
import './assets/main.css';
addIcons(BiBagFill, FaClock);
const app = createApp(App);
app.component('v-icon', OhVueIcon);
app.mount('#app');
Next, you can display any pre-imported icon in your App.vue:
<template>
<div>
<v-icon
name="bi-bag-fill"
class="icon"
fill="#222"
scale="2"/>
<v-icon
name="fa-clock"
class="icon"
fill="#222"
scale="2"/>
</div>
</template>
<style>
.icon {
margin-left: 12px;
}
</style>
Browse all icons on the library’s website.
The above preview has two icons from two different icon packs, Bootstrap and FontAwesome.
Above, we’ve covered some of the primary icon libraries available based on popularity and icon offerings. In other scenarios, though, we may need niche icons to build special apps, such as cryptocurrency systems, games, etc., The following Vue.js icon libraries offer niche icons for special use cases:
vue-cryptoicon: Cryptocurrency iconsvue-country-flag: Country flag iconsThere are also some less-popular (compared to the downloads and GitHub stargazer counts for each of this article’s icon libraries), but highly usable icon packs for Vue.js:
vue-ionicons: Icons from the Ionicons projectvue-icons: An alternative for oh-vue-icons with over 60,000 icons@iconscout/vue-unicons: Official Unicons Vue.js package (an alternative for vue-unicons), but this is still growing and is less popular compared to the unofficial package at the time of writingvue-tabler-icons: Over 1,200 Tabler iconsvue-eva-icons: Over 480 Eva iconsIn this article, we discussed the features and given usage examples of popular Vue.js icon libraries. We imported icon components locally in the App.vue source file for most examples, but you can also register icon components globally with app.component method, as shown in other examples above (i.e., FontAwesome).
These popular icon libraries offer some generic icon packs that every web application will need at some point. For example, we can find icons for add, remove, and edit actions in a grid section from any popular icon library.
You can also create your own icon library for Vue.js by either re-using SVG files from an existing icon pack or creating your own SVG icons from scratch. Most of the above libraries offer high-quality non-antialiasing SVGs. Meanwhile, others offer library-agnostic, developer-friendly, high-quality icon fonts.
Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps, including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.
The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error and what state the application was in when an issue occurred.
Modernize how you debug your Vue apps — start monitoring for free.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Compare Prisma and Drizzle ORMs to learn their differences, strengths, and weaknesses for data access and migrations.
It’s easy for devs to default to JavaScript to fix every problem. Let’s use the RoLP to find simpler alternatives with HTML and CSS.
Learn how to manage memory leaks in Rust, avoid unsafe behavior, and use tools like weak references to ensure efficient programs.
Bypass anti-bot measures in Node.js with curl-impersonate. Learn how it mimics browsers to overcome bot detection for web scraping.
Learn more →
2 Replies to "Best icon libraries for Vue.js"
Maybe lucide should be here as well.
It seems that none of these libraries offer the same ease of use as `@iconify/vue`, but `@iconify/vue` has a hard time supporting SSG and I struggle with that.