Use Bootstrap Icons As Components In Vue


An icon library for Vue 3 that allows you to use Bootstrap icons as components in the app.

Basic Usage:

1. Import icons from the bootstrap-icons-vue.

import { BIconBatteryFull, ... } from 'bootstrap-icons-vue';
// or all icons
import { BootstrapIconsPlugin } from 'bootstrap-icons-vue';

2. Insert icons into the app.

  <BIconBatteryFull />
export default {
  components: {
  // ...


Use Bootstrap Icons As Components In Vue


v0.6.0 (02/25/2021)

  • Upgrade bootstrap-icons to v1.4.0

v0.5.0 (01/10/2021)

  • Upgrade bootstrap-icons to v1.3.0

v0.4.1 (01/01/2021)

  • Add hints for Terser to recognize the fact that the library is side-effect free so tree-shaking unused exports is fine.

Download Details:

Author: tommyip

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add bootstrap-icons-vue

$ npm i bootstrap-icons-vue --save

You Might Be Interested In:

Add Comment