kalimahapps / vue-icons

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

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

🧮 Version History

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

vue-icons's Issues

Tree-shaking doesn't seem to be working?

Problem screenshot：

import { CaLocationFilled as LocationIcon } from '@kalimahapps/vue-icons';

<LocationIcon />

Technology Stack: vue3、webpack5(use vue-cli).

Thank you very much for the author's efforts. This library is great, and I hope to use it better in the project. I hope tree shaking can work well.

Can't retrieve health icons

[vite] Internal server error: Missing "./he" export in "@kalimahapps/vue-icons" package

error TS2307: Cannot find module '@kalimahapps/vue-icons/bs' or its corresponding type

``
1.

cnpm install @kalimahapps/vue-icons
√ Installed 1 packages
√ Linked 1 latest versions
√ Run 0 scripts
√ All packages installed (used 25ms(network 22ms), speed 0B/s, json 0(0B), tarball 0B, manifests cache hit 1, etag hit 0 / miss 0

yarn add @kalimahapps/vue-icons
yarn add v1.22.19
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning Workspaces can only be enabled in private projects.
[4/4] Building fresh packages...
warning Workspaces can only be enabled in private projects.
success Saved 1 new dependency.
info Direct dependencies
└─ @kalimahapps/[email protected]
info All dependencies
└─ @kalimahapps/[email protected]
Done in 6.00s.

<script setup lang="ts"> import { BsCalendar4Range } from '@kalimahapps/vue-icons/bs'; </script>

yarn build
src/views/AboutView.vue:4:34 - error TS2307: Cannot find module '@kalimahapps/vue-icons/bs' or its corresponding type declarations.

``
why?
how?

How to change size / color?

Lovely idea! Your intro text says "Stylable. You can change color and size of the icons" - I'm just trying to figure out how to change the icon size. I've tried:

<BsCalendar4Range class="w-4" />
<BsCalendar4Range style="width: 4em;" />
<BsCalendar4Range width="4em" />

But can't get the size to change. I see the SVG seems hardcoded at 1em?

Many thanks for any advice.