Vue3-icons NPM

Vue3 Icons

Include popular icons in your Vue3 projects easily with vue3-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

Installation (for standard modern project)

pnpm add vue3-icons
# or
npm install vue3-icons --save

example usage

<script lang="ts" setup>
import { FaBeer } from 'vue-icons/fa';
</script>
<template>
  <FaBeer />
</template>

Icons

Icon Library	License	Version	Count
Circum Icons	MPL-2.0 license	1.0.0	288
Font Awesome 5	CC BY 4.0 License	5.15.4-3-gafecf2a	1612
Ionicons 4	MIT	4.6.3	696
Ionicons 5	MIT	5.5.0	1332
Material Design icons	Apache License Version 2.0	4.0.0-61-g511eea577b	4341
Typicons	CC BY-SA 3.0	2.1.2	336
Github Octicons icons	MIT	8.5.0	184
Feather	MIT	4.28.0	286
Game Icons	CC BY 3.0	12920d6565588f0512542a3cb0cdfd36a497f910	4040
Weather Icons	SIL OFL 1.1	2.0.12	219
Devicons	MIT	1.8.0	192
Ant Design Icons	MIT	4.2.1	789
Bootstrap Icons	MIT	1.10.3	2592
Remix Icon	Apache License Version 2.0	2.5.0	2271
Flat Color Icons	MIT	1.0.2	329
Grommet-Icons	Apache License Version 2.0	4.9.0	620
Heroicons	MIT	1.0.6	460
Heroicons 2	MIT	2.0.16	584
Simple Icons	CC0 1.0 Universal	8.6.0	2437
Simple Line Icons	MIT	2.5.5	189
IcoMoon Free	CC BY 4.0 License	d006795ede82361e1bac1ee76f215cf1dc51e4ca	491
BoxIcons	CC BY 4.0 License	2.1.4	814
css.gg	MIT	2.0.0	704
VS Code Icons	CC BY 4.0	0.0.32	423
Tabler Icons	MIT	2.7.0	3455
Themify Icons	MIT	v0.1.2-2-g9600186	352
Radix Icons	MIT	@modulz/generate-icon-lib@0.2.1	318

You can add more icons by submitting pull requests or creating issues.

Configuration

You can configure vue3-icons props using vue3 Provider API.

import { IconContextProvider } from "vue3-icons";

<IconContextProvider :value="{ color: 'blue', className: 'global-class-name' }">
  <div>
    <FaFolder />
  </div>
</IconContext.Provider>;

Key	Default	Notes
`color`	`undefined` (inherit)
`size`	`1em`
`className`	`undefined`
`style`	`undefined`	Can overwrite size and color
`attr`	`undefined`	Overwritten by other attributes
`title`	`undefined`	Icon description for accessibility

Contributing

./build-script.sh will build the whole project. See also CI scripts for more information.

Development

yarn
cd packages/vue3-icons
yarn fetch  # fetch icon sources
yarn build

Preview

The preview site is the vue3-icons website.

cd packages/vue3-icons
yarn fetch
yarn build

cd ../preview
yarn start

Demo

The demo is a vue3 boilerplate with vue3-icons added as a dependency for easy testing.

cd packages/vue3-icons
yarn fetch
yarn build

cd ../demo
yarn start

Why Vue3 SVG components instead of fonts?

SVG is supported by all major browsers. With vue-icons, you can serve only the needed icons instead of one big font file to the users, helping you to recognize which icons are used in your project.