Vue Icons Plus

Vue icons plus icons total 50000+, support Vue 3/Vue 2.7+, allowing you to easily import and use them directly in Vue projects.

Installation (for standard modern project)

yarn add vue-icons-plus
# or
npm install vue-icons-plus --save

Example usage for Vue 3

<script>
  import { FaBeer } from "vue-icons-plus/fa";
</script>

<template>
  <div>
    <FaBeer />
  </div>
</template>

Example usage for Vue ^2.7

<script>
  import { FaBeer } from "vue-icons-plus/fa";
  export default {
    components: {
      FaBeer
    }
  }
</script>

<template>
  <div>
    <FaBeer />
  </div>
</template>

Example usage for Uniapp

<template>
  <view>
    <BiSearch />
  </view>
</template>

<script lang="uts">
  import { BiSearch } from 'vue-icons-plus/bi';
  export default {
    components: {
      BiSearch
    },
  }
</script>

View the documentation for further usage examples and how to use icons from other packages. NOTE: each Icon package has it's own subfolder under vue-icons-plus you import from.

For example, to use an icon from Material Design, your import would be: import { ICON_NAME } from 'vue-icons-plus/md';

Installation (for Webpack 3, etc)

Due to npm restrictions, only supports: ai、bi、bs、cg、ci、di、fa、fa6、fc、fi、gi、go、gr、hi、hi2、im、io、lia.

If your project grows in size, this option is available. This method has the trade-off that it takes a long time to install the package.

yarn add @vue-icons-plus/all-files
# or
npm install @vue-icons-plus/all-files --save

Example usage for Vue 3

<script>
  import { FaBeer } from "@vue-icons-plus/all-files/fa/FaBeer";
</script>

<template>
  <div>
    <FaBeer />
  </div>
</template>

Example usage for Vue ^2.7

<script>
  import { FaBeer } from "@vue-icons-plus/all-files/fa/FaBeer";
  export defautls {
    components: {
      FaBeer
    }
  }
</script>

<template>
  <div>
    <FaBeer />
  </div>
</template>

Icons

| Icon Library | License | Version | Count | | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----: | | Circum Icons | MPL-2.0 license | v2.0.2-22-gcec1364 | 288 | | Font Awesome 5 | CC BY 4.0 License | 5.15.4-3-gafecf2a | 1612 | | Font Awesome 6 | CC BY 4.0 License | 6.5.2 | 2045 | | Ionicons 4 | MIT | 7.2.2 | 1338 | | Ionicons 5 | MIT | 5.5.4 | 1332 | | Material Design icons | Apache License Version 2.0 | 4.0.0-98-g9beae745bb | 4341 | | Typicons | CC BY-SA 3.0 | v2.1.2 | 336 | | Github Octicons icons | MIT | 19.8.0 | 273 | | Feather | MIT | 4.29.1 | 287 | | Lucide | ISC | 0.303.0 | 1368 | | Game Icons | CC BY 3.0 | 12920d6565588f0512542a3cb0cdfd36a497f910 | 4040 | | Weather Icons | SIL OFL 1.1 | 2.0.12-7-gbb80982 | 219 | | Devicons | MIT | 1.8.0 | 192 | | Ant Design Icons | MIT | @ant-design/[email protected] | 831 | | Bootstrap Icons | MIT | v1.11.3-29-g92b6aee | 2716 | | Remix Icon | Apache License Version 2.0 | v4.2.0-4-ge252d6e | 2860 | | Flat Color Icons | MIT | v1.0.2-27-g8eccbbb | 329 | | Grommet-Icons | Apache License Version 2.0 | v4.12.1-3-gbfb6355 | 635 | | Heroicons | MIT | v1.0.6-3-gb6de579 | 460 | | Heroicons 2 | MIT | v2.1.3-1-g9a17872 | 888 | | Simple Icons | CC0 1.0 Universal | 4.14.0-2428-ga1df74e | 3124 | | Simple Line Icons | MIT | v2.5.5 | 189 | | IcoMoon Free | CC BY 4.0 License | d006795ede82361e1bac1ee76f215cf1dc51e4ca | 491 | | BoxIcons | MIT | 9ffa9136e8681886bb7bd2145cd4098717ce1c11 | 1634 | | css.gg | MIT | 2.1.1-1-gdeea4fa | 704 | | VS Code Icons | CC BY 4.0 | 0.0.35-41-g05f8886 | 461 | | Tabler Icons | MIT | v3.2.0-1-g4ec2a71 | 5237 | | Themify Icons | MIT | v0.1.2-2-g9600186 | 352 | | Radix Icons | MIT | @radix-ui/[email protected] | 318 | | Phosphor Icons | MIT | v2.0.8-9-gfe23e25 | 9072 | | Icons8 Line Awesome | MIT | v1.2.1-10-g78a1012 | 1544 | | IconPark | Apache License Version 2.0 | 1.0.0 | 2658 |

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

Configuration

You can change the size, color, and so on of icons through props.

<script>
  import { FaBeer } from "vue-icons-plus/fa";
</script>

<template>
  <div>
    <FaBeer size="48" color="#333" />
  </div>
</template>

Props

| Key | Default | Notes | | ----------- | --------------------- | ---------------------------- | | color | undefined (inherit) | | | size | 24 | | | className | undefined | | | style | undefined | Can overwrite size and color |

Contributing

Development

yarn
cd packages/core
yarn fetch  # fetch icon sources
yarn build

Licence

MIT

• Icons are taken from the other projects so please check each project licences accordingly.