/vue-icons

Thousands of SVG icons of popular icon sets that you can add seamlessly to your vue projects

Primary LanguageJavaScript

Vue Icons

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>


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(),
      ],
    })
  ],
});


📚 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.