60,000+ SVG icons from popular icon sets that you can add seamlessly to your vue projects
- 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.
- 60,000+ icons from popular icon sets
- Stylable. You can change color and size of the icons
- Built for vue3
- Optimized with SVGO
pnpm add @kalimahapps/vue-icons
npm install @kalimahapps/vue-icons
<template>
<div class="button">
<BsCalendar4Range /> Select Date
</div>
</template>
<script setup>
import { BsCalendar4Range } from '@kalimahapps/vue-icons';
</script>
Using resolvers with unplugin-vue-components
vue-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,
],
})
],
});
You can change the color and size of the icons by adding style or class to the icon component.
<template>
<div class="button">
<BsCalendar4Range class="icon" />
<span>Select Date</span>
</div>
</template>
<script setup>
import { BsCalendar4Range } from '@kalimahapps/vue-icons';
</script>
<style scoped lang="scss">
.button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
border: 1px solid #ccc;
border-radius: 0.25rem;
background-color: #fff;
color: #000000;
cursor: pointer;
/* Change color and size of the icon */
.icon {
color: #c9330a;
font-size: 1.3em;
margin-right: 0.5em;
}
&:hover {
background-color: #eee;
}
}
</style>
To view the full list of icons, search and copy the import statement, check the demo: https://vue-icons.kalimah-apps.com/
Icon Set | Prefix | License | Version | Count |
---|---|---|---|---|
FontAudio | ad | MIT | 1.1 | 155 |
Academicons | ai | SIL OFL 1.1 | 1.9.3 | 151 |
Akar | ak | MIT | 1.9.14 | 438 |
Ant Design | an | MIT | 4.2.1 | 789 |
Bootstrap Icons | bs | MIT | 1.10.5 | 1953 |
Boxicons | bx | CC 4.0 | 2.1.4 | 1632 |
Carbon | ca | Apache-2.0 | 11.28.0 | 1917 |
Charm Icons | ch | MIT | 0.18.0 | 261 |
CoolIcons | cl | CC 4.0 | 4.1 | 442 |
Bytesize | by | MIT | 1.4 | 101 |
Circum | ci | MPL-2.0 | 2.0.0 | 288 |
Codicons | cd | MIT | 0.0.33 | 426 |
Core UI Icons | co | CC 4.0 | 3.0.1 | 1569 |
css.gg | cg | MIT | 2.0.0 | 704 |
Devicons | de | MIT | 2.15.1 | 784 |
FluentUI System | fl | MIT | 1.1.201 | 4689 |
Font Awesome | fa | CC BY 4.0 | 6.4.0 | 2020 |
Feather | fe | MIT | 4.29.0 | 287 |
GitLab | gl | MIT | 3.46.0 | 391 |
Govicons | gv | SIL OFL 1.1 | 1.6.0 | 136 |
Healthicons | he | MIT | 0.1.0 | 1158 |
Hero | hi | MIT | 2.0.18 | 584 |
Humble Icons | hu | MIT | 1.9.0 | 235 |
Jamicons | ja | MIT | 3.1.0 | 940 |
Iconoir | ic | MIT | 6.8.0 | 1350 |
IonIcons | io | MIT | 7.1.0 | 1338 |
Line Awesome | la | MIT | 1.2.1 | 1544 |
Linearicons | li | CC BY-SA 4.0 | - | 170 |
Lucide | lu | ISC | 0.216.0 | 1083 |
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 | 10609 |
MingCute | mc | Apache-2.0 | 2.84 | 2212 |
Octicons | oc | MIT | 19.1.0 | 266 |
OpenWeb | ow | SIL Open Font License | 1.6.3 | 115 |
Phosphor | ph | MIT | 2.0.2 | 7488 |
Pixelarticons | px | MIT | 1.7.0 | 480 |
Prime Icons | pr | MIT | 6.0.1 | 260 |
Quill | qu | MIT | 1.0.0 | 133 |
Radix | ra | MIT | 1.3.0 | 318 |
Remix | re | Apache 2.0 | 3.2.0 | 2469 |
Simple Icons | si | CC0 1.0 | 8.13.0 | 2456 |
System UIcons | su | Unlicense | - | 430 |
Tabler | ta | MIT | 2.18.0 | 4158 |
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.10 | 214 |
VSCode | vs | MIT | 12.4.0 | 1215 |
Weather Icons | wi | SIL OFL 1.1 | 2.0.10 | 219 |
Total | 63442 |
-
1.4.0
- breaking change: fix CoolIcons prefix. It had the same prefix as coreicons
co
but not it is corrected to becl
. - breaking change: Replace official material design repo with a generated one for SVG only.
- fix: add missing 'ad' entry in package.json
- chore: Update all icons
- breaking change: fix CoolIcons prefix. It had the same prefix as coreicons
-
1.3.0
- Add global import. No need to add a set name like
@kalimahapps/vue-icons/bs
. All icons now can be imported using@kalimahapps/vue-icons
- Add typescript types
- Add new icon sets
- FontAudio
- Akar
- Charm Icons
- CoolIcons
- GitLab SVGs
- Humble Icons
- Lucide
- Quill
- Radix
- System UIcons
- Refactor code
- Add global import. No need to add a set name like
-
1.2.0
- Updated icon packages
- Updated dev dependencies
- Added tests
- Added missing 'cd' to package.json
-
1.1.5
- Add missing export "he" to package.json
-
1.1.3
- Updated icon packages
- Updated dev dependencies
-
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
A Vue 3 tooltip component using popper.js
A vite plugin that adds support for inheritAttrs in vue-setup
Comprehensive eslint rules for vue projects with typescript
This project is licensed under the MIT License For each icons set, please check the icon project licenses accordingly.
This project was inspired by the React Icons package.