@kalimahapps/vue-icons

VueIcons

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

Icons Demo

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