[!Important] This project is maintained by developer from Ukraine 🇺🇦
I do my best, but due to Russia's ongoing full-scale invasion of Ukraine, I barely have the energy to support open source projects.
If my work has been useful to you, please consider supporting Ukraine or me personally. Even your $1 has an impact!
A superset standalone icon-components for Vue with zero dependencies. Designed for ease of use and high performance.
- Easy to use
- No plugins required! Compatible with any build tools.
- Designed for the best compatibility with IDE auto-completion (Demo).
- Zero dependencies.
- SSR / SSG friendly.
- TypeScript support.
- Unified API across all icon sets.
- High performance
- Does not require any external resources like fonts, css, images.
- The icon code is embedded in your bundle.
- Supports tree shaking, so only those icons that you have used will be included in the bundle.
- Works offline.
- Powered by iconify.
Live demo: https://stackblitz.com/edit/iconify-prerendered-demo?file=src%2FApp.vue
Install the appropriate icon set
npm i @iconify-prerendered/vue-<icon-set-name>
# Bootstrap Icons
npm i @iconify-prerendered/vue-bi
# Material Design Icons
npm i @iconify-prerendered/vue-mdi
Import icon-component from a set like usual.
<script setup>
// Import two icons from Font Awesome Brands
import { IconVuejs, IconJs } from '@iconify-prerendered/vue-fa-brands';
// Import one Icon from Material Design icons
import { IconCardsHeart } from '@iconify-prerendered/vue-mdi';
</script>
<template>
<p>
<IconJs />
<IconCardsHeart />
<IconVuejs />
</p>
</template>
Only these three icons will be included in your bundle. Your bundler may tree-shake all other icons.
That's all you need. No plugins, extra configs, IDE extensions or something else.
By default, all icons have only two attributes: role="img"
and
aria-hidden="true"
. While you are free to redefine these attributes or add new
ones for each icon, you might want to apply certain attributes, such as class
or style
, to all icons within a set.
To achieve this, you can re-export icons through a new Proxy
and include
default attributes
import * as defaultIcons from '@iconify-prerendered/vue-mdi';
// accessing to icon through this Proxy will add additional attributes
export const themedIcons = new Proxy({} as typeof defaultIcons, {
get(_, iconKey: keyof typeof defaultIcons) {
return () =>
defaultIcons[iconKey]({
class: 'pre-defined-class',
// ... any other attributes
});
},
});
Icon set | Package | Last modified |
---|---|---|
Academicons | @iconify-prerendered/vue-academicons |
Sep 28, 2024 |
Akar Icons | @iconify-prerendered/vue-akar-icons |
Aug 4, 2024 |
Ant Design Icons | @iconify-prerendered/vue-ant-design |
Dec 16, 2024 |
Arcticons | @iconify-prerendered/vue-arcticons |
Dec 23, 2024 |
Basil | @iconify-prerendered/vue-basil |
Aug 4, 2024 |
Bitcoin Icons | @iconify-prerendered/vue-bitcoin-icons |
Aug 4, 2024 |
Bootstrap Icons | @iconify-prerendered/vue-bi |
Jan 5, 2024 |
BoxIcons | @iconify-prerendered/vue-bx |
Aug 4, 2024 |
BoxIcons Logo | @iconify-prerendered/vue-bxl |
Aug 4, 2024 |
BoxIcons Solid | @iconify-prerendered/vue-bxs |
Aug 4, 2024 |
BPMN | @iconify-prerendered/vue-bpmn |
Aug 4, 2024 |
Brandico | @iconify-prerendered/vue-brandico |
Aug 4, 2024 |
Bytesize Icons | @iconify-prerendered/vue-bytesize |
Aug 4, 2024 |
Carbon | @iconify-prerendered/vue-carbon |
Oct 26, 2024 |
Catppuccin Icons | @iconify-prerendered/vue-catppuccin |
Dec 3, 2024 |
Charm Icons | @iconify-prerendered/vue-charm |
Aug 4, 2024 |
Circle Flags | @iconify-prerendered/vue-circle-flags |
Dec 12, 2024 |
Circum Icons | @iconify-prerendered/vue-circum |
Apr 22, 2024 |
Clarity | @iconify-prerendered/vue-clarity |
Jun 3, 2024 |
Codicons | @iconify-prerendered/vue-codicon |
Dec 12, 2024 |
coolicons | @iconify-prerendered/vue-ci |
Aug 4, 2024 |
CoreUI Brands | @iconify-prerendered/vue-cib |
Jul 25, 2024 |
CoreUI Flags | @iconify-prerendered/vue-cif |
Jul 25, 2024 |
CoreUI Free | @iconify-prerendered/vue-cil |
Jul 25, 2024 |
Covid Icons | @iconify-prerendered/vue-covid |
Aug 4, 2024 |
Cryptocurrency Color Icons | @iconify-prerendered/vue-cryptocurrency-color |
Aug 4, 2024 |
Cryptocurrency Icons | @iconify-prerendered/vue-cryptocurrency |
Aug 4, 2024 |
css.gg | @iconify-prerendered/vue-gg |
Aug 4, 2024 |
Cuida Icons | @iconify-prerendered/vue-cuida |
Oct 3, 2024 |
Custom Brand Icons | @iconify-prerendered/vue-cbi |
Nov 19, 2024 |
Dashicons | @iconify-prerendered/vue-dashicons |
May 27, 2024 |
Devicon | @iconify-prerendered/vue-devicon |
Dec 23, 2024 |
Devicon Plain | @iconify-prerendered/vue-devicon-plain |
Dec 23, 2024 |
Duoicons | @iconify-prerendered/vue-duo-icons |
Sep 28, 2024 |
Elegant | @iconify-prerendered/vue-et |
Aug 4, 2024 |
Element Plus | @iconify-prerendered/vue-ep |
Mar 11, 2024 |
Elusive Icons | @iconify-prerendered/vue-el |
Aug 4, 2024 |
Emoji One (Colored) | @iconify-prerendered/vue-emojione |
Aug 4, 2024 |
Emoji One (Monotone) | @iconify-prerendered/vue-emojione-monotone |
Aug 4, 2024 |
Emoji One (v1) | @iconify-prerendered/vue-emojione-v1 |
Aug 4, 2024 |
Entypo+ | @iconify-prerendered/vue-entypo |
Aug 4, 2024 |
Entypo+ Social | @iconify-prerendered/vue-entypo-social |
Aug 4, 2024 |
EOS Icons | @iconify-prerendered/vue-eos-icons |
Aug 4, 2024 |
Eva Icons | @iconify-prerendered/vue-eva |
Aug 4, 2024 |
Evil Icons | @iconify-prerendered/vue-ei |
Aug 4, 2024 |
Feather Icon | @iconify-prerendered/vue-fe |
Aug 4, 2024 |
Feather Icons | @iconify-prerendered/vue-feather |
Aug 4, 2024 |
File Icons | @iconify-prerendered/vue-file-icons |
Jul 17, 2024 |
Firefox OS Emoji | @iconify-prerendered/vue-fxemoji |
Aug 4, 2024 |
Flag Icons | @iconify-prerendered/vue-flag |
Oct 7, 2024 |
Flagpack | @iconify-prerendered/vue-flagpack |
Aug 4, 2024 |
Flat Color Icons | @iconify-prerendered/vue-flat-color-icons |
Aug 4, 2024 |
Flat UI Icons | @iconify-prerendered/vue-flat-ui |
Aug 4, 2024 |
Flowbite Icons | @iconify-prerendered/vue-flowbite |
Oct 11, 2024 |
Fluent Emoji | @iconify-prerendered/vue-fluent-emoji |
Oct 3, 2024 |
Fluent Emoji Flat | @iconify-prerendered/vue-fluent-emoji-flat |
Oct 3, 2024 |
Fluent Emoji High Contrast | @iconify-prerendered/vue-fluent-emoji-high-contrast |
Oct 3, 2024 |
Fluent UI MDL2 | @iconify-prerendered/vue-fluent-mdl2 |
Apr 7, 2024 |
Fluent UI System Color Icons | @iconify-prerendered/vue-fluent-color |
Dec 16, 2024 |
Fluent UI System Icons | @iconify-prerendered/vue-fluent |
Dec 16, 2024 |
Font Awesome 4 | @iconify-prerendered/vue-fa |
Dec 11, 2023 |
Font Awesome 5 Brands | @iconify-prerendered/vue-fa-brands |
Aug 4, 2024 |
Font Awesome 5 Regular | @iconify-prerendered/vue-fa-regular |
Aug 4, 2024 |
Font Awesome 5 Solid | @iconify-prerendered/vue-fa-solid |
Aug 4, 2024 |
Font Awesome Brands | @iconify-prerendered/vue-fa6-brands |
Dec 17, 2024 |
Font Awesome Regular | @iconify-prerendered/vue-fa6-regular |
Nov 19, 2024 |
Font Awesome Solid | @iconify-prerendered/vue-fa6-solid |
Nov 19, 2024 |
Font-GIS | @iconify-prerendered/vue-gis |
Aug 1, 2024 |
FontAudio | @iconify-prerendered/vue-fad |
Aug 4, 2024 |
Fontelico | @iconify-prerendered/vue-fontelico |
Aug 4, 2024 |
Fontisto | @iconify-prerendered/vue-fontisto |
Aug 4, 2024 |
FormKit Icons | @iconify-prerendered/vue-formkit |
Apr 9, 2024 |
Foundation | @iconify-prerendered/vue-foundation |
Aug 4, 2024 |
Framework7 Icons | @iconify-prerendered/vue-f7 |
Aug 4, 2024 |
Gala Icons | @iconify-prerendered/vue-gala |
Nov 26, 2023 |
Game Icons | @iconify-prerendered/vue-game-icons |
Apr 7, 2024 |
GeoGlyphs | @iconify-prerendered/vue-geo |
Aug 4, 2024 |
Gitlab SVGs | @iconify-prerendered/vue-pajamas |
Nov 14, 2024 |
Google Material Icons | @iconify-prerendered/vue-ic |
Aug 4, 2024 |
Gravity UI Icons | @iconify-prerendered/vue-gravity-ui |
Dec 16, 2024 |
Gridicons | @iconify-prerendered/vue-gridicons |
Aug 4, 2024 |
Grommet Icons | @iconify-prerendered/vue-grommet-icons |
May 27, 2024 |
Guidance | @iconify-prerendered/vue-guidance |
Aug 4, 2024 |
Health Icons | @iconify-prerendered/vue-healthicons |
Nov 25, 2024 |
HeroIcons | @iconify-prerendered/vue-heroicons |
Jul 25, 2024 |
HeroIcons v1 Outline | @iconify-prerendered/vue-heroicons-outline |
Aug 4, 2024 |
HeroIcons v1 Solid | @iconify-prerendered/vue-heroicons-solid |
Aug 4, 2024 |
Huge Icons | @iconify-prerendered/vue-hugeicons |
Dec 21, 2024 |
Humbleicons | @iconify-prerendered/vue-humbleicons |
Dec 23, 2024 |
Icalicons | @iconify-prerendered/vue-il |
Dec 11, 2023 |
IcoMoon Free | @iconify-prerendered/vue-icomoon-free |
Aug 4, 2024 |
IconaMoon | @iconify-prerendered/vue-iconamoon |
Aug 4, 2024 |
Iconoir | @iconify-prerendered/vue-iconoir |
Nov 30, 2024 |
IconPark | @iconify-prerendered/vue-icon-park |
Nov 26, 2023 |
IconPark Outline | @iconify-prerendered/vue-icon-park-outline |
Aug 4, 2024 |
IconPark Solid | @iconify-prerendered/vue-icon-park-solid |
Aug 4, 2024 |
IconPark TwoTone | @iconify-prerendered/vue-icon-park-twotone |
Aug 4, 2024 |
Icons8 Windows 10 Icons | @iconify-prerendered/vue-icons8 |
Aug 4, 2024 |
Icons8 Windows 8 Icons | @iconify-prerendered/vue-wpf |
Aug 4, 2024 |
Innowatio Font | @iconify-prerendered/vue-iwwa |
Aug 4, 2024 |
IonIcons | @iconify-prerendered/vue-ion |
May 2, 2024 |
Jam Icons | @iconify-prerendered/vue-jam |
Aug 4, 2024 |
Lets Icons | @iconify-prerendered/vue-lets-icons |
Aug 4, 2024 |
Ligature Symbols | @iconify-prerendered/vue-ls |
Aug 4, 2024 |
Line Awesome | @iconify-prerendered/vue-la |
Aug 4, 2024 |
Lineicons | @iconify-prerendered/vue-lineicons |
Oct 26, 2024 |
Lsicon | @iconify-prerendered/vue-lsicon |
Oct 3, 2024 |
Lucide | @iconify-prerendered/vue-lucide |
Dec 21, 2024 |
Lucide Lab | @iconify-prerendered/vue-lucide-lab |
Nov 9, 2024 |
Mage Icons | @iconify-prerendered/vue-mage |
Aug 4, 2024 |
Majesticons | @iconify-prerendered/vue-majesticons |
Aug 4, 2024 |
Maki | @iconify-prerendered/vue-maki |
Dec 16, 2024 |
Map Icons | @iconify-prerendered/vue-map |
Aug 4, 2024 |
Marketeq | @iconify-prerendered/vue-marketeq |
Apr 4, 2024 |
Material Design Iconic Font | @iconify-prerendered/vue-zmdi |
Dec 11, 2023 |
Material Design Icons | @iconify-prerendered/vue-mdi |
Jun 20, 2024 |
Material Design Light | @iconify-prerendered/vue-mdi-light |
Aug 4, 2024 |
Material Line Icons | @iconify-prerendered/vue-line-md |
Dec 9, 2024 |
Material Symbols | @iconify-prerendered/vue-material-symbols |
Dec 6, 2024 |
Material Symbols Light | @iconify-prerendered/vue-material-symbols-light |
Dec 6, 2024 |
Medical Icons | @iconify-prerendered/vue-medical-icon |
Aug 4, 2024 |
Memory Icons | @iconify-prerendered/vue-memory |
Jan 2, 2024 |
Meteocons | @iconify-prerendered/vue-meteocons |
Jul 1, 2024 |
Meteor Icons | @iconify-prerendered/vue-meteor-icons |
Nov 9, 2024 |
MingCute Icon | @iconify-prerendered/vue-mingcute |
Dec 23, 2024 |
Mono Icons | @iconify-prerendered/vue-mi |
Aug 4, 2024 |
Mono Icons | @iconify-prerendered/vue-mono-icons |
Aug 4, 2024 |
Myna UI Icons | @iconify-prerendered/vue-mynaui |
Nov 25, 2024 |
Nimbus | @iconify-prerendered/vue-nimbus |
Aug 4, 2024 |
Nonicons | @iconify-prerendered/vue-nonicons |
Dec 16, 2024 |
Noto Emoji | @iconify-prerendered/vue-noto |
Oct 7, 2024 |
Noto Emoji (v1) | @iconify-prerendered/vue-noto-v1 |
Aug 4, 2024 |
NRK Core Icons | @iconify-prerendered/vue-nrk |
Nov 14, 2024 |
Octicons | @iconify-prerendered/vue-octicon |
Dec 6, 2024 |
OOUI | @iconify-prerendered/vue-ooui |
Dec 21, 2024 |
Open Iconic | @iconify-prerendered/vue-oi |
Aug 4, 2024 |
OpenMoji | @iconify-prerendered/vue-openmoji |
Oct 23, 2024 |
OpenSearch UI | @iconify-prerendered/vue-oui |
Nov 2, 2024 |
Pepicons | @iconify-prerendered/vue-pepicons |
Jan 2, 2023 |
Pepicons Pencil | @iconify-prerendered/vue-pepicons-pencil |
Aug 4, 2024 |
Pepicons Pop! | @iconify-prerendered/vue-pepicons-pop |
Aug 4, 2024 |
Pepicons Print | @iconify-prerendered/vue-pepicons-print |
Aug 4, 2024 |
Phosphor | @iconify-prerendered/vue-ph |
May 6, 2024 |
Pixelarticons | @iconify-prerendered/vue-pixelarticons |
Apr 18, 2024 |
PrestaShop Icons | @iconify-prerendered/vue-ps |
Aug 4, 2024 |
Prime Icons | @iconify-prerendered/vue-prime |
May 9, 2024 |
ProIcons | @iconify-prerendered/vue-proicons |
Dec 16, 2024 |
Qlementine Icons | @iconify-prerendered/vue-qlementine-icons |
Nov 25, 2024 |
Quill Icons | @iconify-prerendered/vue-quill |
Aug 4, 2024 |
Radix Icons | @iconify-prerendered/vue-radix-icons |
Aug 4, 2024 |
Raphael | @iconify-prerendered/vue-raphael |
Aug 4, 2024 |
Remix Icon | @iconify-prerendered/vue-ri |
Dec 17, 2024 |
Rivet Icons | @iconify-prerendered/vue-rivet-icons |
Jun 20, 2024 |
Sargam Icons | @iconify-prerendered/vue-si |
Oct 8, 2024 |
Siemens Industrial Experience Icons | @iconify-prerendered/vue-ix |
Nov 9, 2024 |
Simple Icons | @iconify-prerendered/vue-simple-icons |
Dec 23, 2024 |
Simple line icons | @iconify-prerendered/vue-simple-line-icons |
Aug 4, 2024 |
Skill Icons | @iconify-prerendered/vue-skill-icons |
Jul 17, 2024 |
SmartIcons Glyph | @iconify-prerendered/vue-si-glyph |
Aug 4, 2024 |
Solar | @iconify-prerendered/vue-solar |
Aug 4, 2024 |
Stash Icons | @iconify-prerendered/vue-stash |
Oct 8, 2024 |
Streamline | @iconify-prerendered/vue-streamline |
Aug 4, 2024 |
Streamline Emojis | @iconify-prerendered/vue-streamline-emojis |
Aug 4, 2024 |
Subway Icon Set | @iconify-prerendered/vue-subway |
Jun 3, 2024 |
SVG Logos | @iconify-prerendered/vue-logos |
Oct 3, 2024 |
SVG Spinners | @iconify-prerendered/vue-svg-spinners |
Jan 15, 2023 |
System UIcons | @iconify-prerendered/vue-system-uicons |
Aug 4, 2024 |
Tabler Icons | @iconify-prerendered/vue-tabler |
Dec 16, 2024 |
TDesign Icons | @iconify-prerendered/vue-tdesign |
Nov 28, 2024 |
Teenyicons | @iconify-prerendered/vue-teenyicons |
Aug 4, 2024 |
TopCoat Icons | @iconify-prerendered/vue-topcoat |
Aug 4, 2024 |
Twitter Emoji | @iconify-prerendered/vue-twemoji |
Aug 4, 2024 |
Typicons | @iconify-prerendered/vue-typcn |
Aug 4, 2024 |
uiw icons | @iconify-prerendered/vue-uiw |
Jun 24, 2024 |
Unicons | @iconify-prerendered/vue-uil |
Dec 17, 2024 |
Unicons Monochrome | @iconify-prerendered/vue-uim |
Dec 17, 2024 |
Unicons Solid | @iconify-prerendered/vue-uis |
Dec 17, 2024 |
Unicons Thin Line | @iconify-prerendered/vue-uit |
Dec 17, 2024 |
UnJS Logos | @iconify-prerendered/vue-unjs |
Jul 17, 2024 |
Vaadin Icons | @iconify-prerendered/vue-vaadin |
Aug 4, 2024 |
Vesper Icons | @iconify-prerendered/vue-vs |
Dec 11, 2023 |
VSCode Icons | @iconify-prerendered/vue-vscode-icons |
Dec 16, 2024 |
Weather Icons | @iconify-prerendered/vue-wi |
Aug 4, 2024 |
Web Symbols Liga | @iconify-prerendered/vue-websymbol |
Dec 11, 2023 |
Web3 Icons | @iconify-prerendered/vue-token |
Dec 19, 2024 |
Web3 Icons Branded | @iconify-prerendered/vue-token-branded |
Dec 19, 2024 |
WebHostingHub Glyphs | @iconify-prerendered/vue-whh |
Aug 4, 2024 |
WeUI Icon | @iconify-prerendered/vue-weui |
Jun 20, 2024 |
Zondicons | @iconify-prerendered/vue-zondicons |
Aug 4, 2024 |
The code for generating the icon sets is distributed under the MIT license. The icon sets themselves are distributed under the license of their author.
- Install Deno.
- Run
deno task generate
for generate all collections. Params:--version
or-v
specify version base for generated packages. Optional.--prefix
or-p
specify with a collection to generate. Maybe multiple times. Optional.--no-replace-ids
disable replacing ids. Required for a test case. Optional.--output
or-o
directory to place generated files. Optional.
- Run
deno task test
for run all tests. See more about test running.
You can benchmark two versions of icon sets. To do that:
- Generate baseline icon set by command:
deno task generate -p=fluent-emoji -o=benckmarks/generated/baseline
- Make any changes to the generation process or whatever
- Generate tested icon set by command:
deno task generate -p=fluent-emoji -o=benckmarks/generated/test
- Run benchmark by
deno bench --allow-env
- Go to step #2