VueIcons
55,000+ SVG icons from popular icon sets that you can add seamlessly to your vue projects
✨ Features
- Tree-shaking. Only the icons you use will be included in your bundle
- Easy to use. No need for import statement if used through resolvers with vite.
- 55,000+ icons from popular icon sets
- Stylable. You can change color and size of the icons
- Built for vue3
- Optimized with SVGO
💽 Installation
NPM
npm install @kalimahapps/vue-icons
PNPM
pnpm add @kalimahapps/vue-icons
🔧 Usage
<template>
<div class="button"><BsCalendar4Range /> Select Date</div>
</template>
<script>
import { BsCalendar4Range } from '@kalimahapps/vue-icons/bs';
export default {
components: {
BsCalendar4Range
}
};
</script>
<style></style>
unplugin-vue-components
Using resolvers withvue-icons provides a resolver that can be used with unplugin-vue-components so you don't have to add import IconName from '@kalimahapps/vue-icons/iconSet'
for every icon you want to use.
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueIconsResolver from '@kalimahapps/vue-icons/resolver';
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
VueIconsResolver(),
],
})
],
});
📚 Demo
To view the full list of icons, search and copy the import statement, check the demo: https://kalimah-apps.github.io/vue-icons/
📦 Icon Sets
Icon Set | Prefix | License | Version | Count |
---|---|---|---|---|
Academicons | ai | SIL OFL 1.1 | 1.9.2 | 149 |
Ant Design | an | MIT | 4.2.1 | 789 |
Bootstrap Icons | bs | MIT | 1.10.2 | 1851 |
Boxicons | bx | CC 4.0 | 2.1.4 | 1632 |
Carbon | ca | Apache-2.0 | 11.17.0 | 1849 |
Bytesize | by | MIT | 1.4 | 101 |
Circum | ci | MPL-2.0 | 2.0.0 | 285 |
Codicons | cd | MIT | 0.0.32 | 422 |
Core UI Icons | co | CC 4.0 | 2.0.1 | 1569 |
css.gg | cg | MIT | 2.0.0 | 704 |
Devicons | de | MIT | 2.15.1 | 784 |
FluentUI System | fl | MIT | 1.1.186 | 4285 |
Font Awesome | fa | CC BY 4.0 | 6.2.1 | 2016 |
Feather | fe | MIT | 4.29.0 | 287 |
Govicons | gv | SIL OFL 1.1 | 1.6.0 | 136 |
Healthicons | he | MIT | 0.1.0 | 1154 |
Hero | hi | MIT | 2.0.13 | 584 |
Jamicons | ja | MIT | 3.1.0 | 940 |
Iconoir | ic | MIT | 5.4.1 | 1209 |
IonIcons | io | MIT | 6.0.4 | 1332 |
Line Awesome | la | MIT | 1.2.1 | 1544 |
Linearicons | li | CC BY-SA 4.0 | - | 170 |
Majesticons | mi | MIT | 2.1.2 | 760 |
Maki | ma | CC0 1.0 Universal | 8.0.0 | 211 |
Material Design | md | Apache-2.0 | 4.0.0 | 10750 |
MingCute | mc | Apache-2.0 | 2.4 | 1346 |
Octicons | oc | MIT | 17.9.0 | 241 |
OpenWeb | ow | SIL Open Font License | 1.6.3 | 115 |
Phosphor | ph | MIT | 1.4.1 | 6282 |
Pixelarticons | px | MIT | 1.7.0 | 480 |
Prime Icons | pr | MIT | 6.0.1 | 260 |
Remix | re | Apache 2.0 | 2.5.0 | 2271 |
Simple Icons | si | CC0 1.0 | 7.20.0 | 2402 |
Tabler | ta | MIT | 1.113.0 | 2907 |
Themify | th | SIL Open Font License (OFL) | 1.0.1 | 352 |
Typicons | ti | CC BY-SA 4.0 | 2.1.2 | 336 |
Unicons | un | IconScout Simple License | 3.0.0 | 1206 |
uiw icons | ui | MIT | 2.6.7 | 214 |
VSCode | vs | MIT | 12.0.1 | 1180 |
Weather Icons | wi | SIL OFL 1.1 | 2.0.10 | 219 |
🧮 Version History
-
1.0.6
- Fixed bugs
- Add 2 icon sets (bytesize, codicons)
-
1.0.5
- Fixed bugs
- Added a new icon set (majesticons)
-
1.0.3
- Added three icon sets
- Updated icon packages
- Fixed minor bugs
-
1.0.1
- Added icons resolver
-
1.0.0
- Added 23 icon sets
- Export format is changed to SVG to decrease package size
- Updated demo UI and search
-
0.0.7
- Update icons set
-
0.0.2
- Initial Release
🏗️ Other projects
Vue Popper
A Vue 3 tooltip component using popper.js
KalimahApps Eslint Config
Comprehensive eslint rules for vue projects with typescript
Vite inherit attrs
A vite plugin that adds support for inheritAttrs in vue-setup
⚖️ License
This project is licensed under the MIT License For each icons set, please check the icon project licenses accordingly.
🙏 Acknowledgement
This project was inspired by the React Icons package.