✨ 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.
• 60,000+ icons from popular icon sets
• Stylable. You can change color and size of the icons
• Built for vue3
• Optimized with SVGO

💽 Installation

PNPM

pnpm add @kalimahapps/vue-icons

NPM

npm install @kalimahapps/vue-icons

🔧 Usage

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

Styling

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>

📚 Demo

To view the full list of icons, search and copy the import statement, check the demo: https://vue-icons.kalimah-apps.com/

📦 Icon Sets

Icon Set|Prefix|License|Version|Count ---|---|---|---|--- FontAudio|ad|MIT|1.1|155 Academicons|ai|SIL OFL 1.1|1.9.4|157 Akar|ak|MIT|1.9.14|454 Ant Design|an|MIT|4.2.1|831 Bootstrap Icons|bs|MIT|1.11.3|2050 Boxicons|bx|CC 4.0|2.1.4|1632 Carbon|ca|Apache-2.0|11.55.0|2102 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.35|461 Core UI Icons|co|CC 4.0|3.0.1|1569 css.gg|cg|MIT|2.1.1|704 Devicons|de|MIT|2.16.0|1516 FluentUI System|fl|MIT|1.1.201|5240 Font Awesome|fa|CC BY 4.0|6.5.2|2045 Feather|fe|MIT|4.29.1|287 GitLab|gl|MIT|3.46.0|405 Govicons|gv|SIL OFL 1.1|1.6.0|136 Healthicons|he|MIT|0.1.0|1278 Hero|hi|MIT|2.1.3|592 Humble Icons|hu|MIT|1.10.0|247 Jamicons|ja|MIT|3.1.0|940 Iconoir|ic|MIT|7.6.0|1573 IonIcons|io|MIT|7.3.1|1355 Line Awesome|la|MIT|1.2.1|1544 Linearicons|li|CC BY-SA 4.0|-|170 Lucide|lu|ISC|0.372.0|1456 Majesticons|mi|MIT|2.1.2|760 Maki|ma|CC0 1.0 Universal|8.0.0|213 Material Design|md|Apache-2.0|4.0.0|10609 MingCute|mc|Apache-2.0|2.94|2926 Octicons|oc|MIT|19.9.0|304 OpenWeb|ow|SIL Open Font License|1.6.3|115 Phosphor|ph|MIT|2.0.2|9072 Pixelarticons|px|MIT|1.8.1|486 Prime Icons|pr|MIT|7.0.0|313 Quill|qu|MIT|1.0.0|133 Radix|ra|MIT|1.3.0|318 Remix|re|Apache 2.0|4.2.0|2860 Simple Icons|si|CC0 1.0|11.13.0|3122 System UIcons|su|Unlicense|-|430 Tabler|ta|MIT|3.2.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.7.0|1254 Weather Icons|wi|SIL OFL 1.1|2.0.10|219 Total| | | | 69391

🧮 Version History

• 1.4.1

  • chore: update all icon packages

• 1.4.0

  • breaking change: fix CoolIcons prefix. It had the same prefix as coreicons co but not it is corrected to be cl.
  • 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

• 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

• 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

🏗️ Other projects

Vue Popper

A Vue 3 tooltip component using popper.js

Vite inherit attrs

A vite plugin that adds support for inheritAttrs in vue-setup

KalimahApps Eslint Config

Comprehensive eslint rules for vue projects with typescript

⚖️ 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.