Icons

Bootstrap Icons are designed to work with Bootstrap components, from form controls to navigation. Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS. While they are built for Bootstrap, they will work in any project.

BootstrapVue icon components are built from bootstrap-icons v1.11.0 source SVGs. Icons are opt-in, meaning that they explicitly need to be imported in order to be used. They are not installed by default. You do not need bootstrap-icons as a dependency.

Bootstrap Icons were introduced to BootstrapVue in release v2.2.0.
Bootstrap Icons v1.0.0-alpha3 were added in BootstrapVue v2.8.0.
Bootstrap Icons v1.0.0-alpha4 were added in BootstrapVue v2.15.0.
Bootstrap Icons v1.0.0-alpha5 were added in BootstrapVue v2.16.0.
Bootstrap Icons v1.0.0 were added in BootstrapVue v2.17.0.
Bootstrap Icons v1.1.0 were added in BootstrapVue v2.19.0.
Bootstrap Icons v1.2.0 were added in BootstrapVue v2.21.0.
Bootstrap Icons v1.3.0 were added in BootstrapVue v2.22.0.
Bootstrap Icons v1.4.0 were added in BootstrapVue v2.22.0.
Bootstrap Icons v1.4.1 were added in BootstrapVue v2.22.0.
Bootstrap Icons v1.5.0 were added in BootstrapVue v2.22.0.

Usage

BootstrapVue icons are not automatically installed when using BootstrapVue in your project, you must explicitly include them.

Icons inherit the current font color and font size from their parent container element. To change the color of the icon, refer to the Variants section, and to change the size of the icon refer to the Sizing section.

All icons are exported with the name in PascalCase, prefixed with BIcon. i.e icon 'alert-circle-fill' is exported as BIconAlertCircleFill, icon 'x' is exported as BIconX, and icon 'x-square-fill' is exported as BIconXSquareFill.

Module bundlers

Importing all icons:

import { Vue } from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

import { Vue } from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

Importing specific icons:

Making them globally available:

import { Vue } from 'vue'
import { BootstrapVue, BIcon, BIconArrowUp, BIconArrowDown } from 'bootstrap-vue'

Vue.use(BootstrapVue)
Vue.component('BIcon', BIcon)
Vue.component('BIconArrowUp', BIconArrowUp)
Vue.component('BIconArrowDown', BIconArrowDown)

Or if using in specific pages or components:

import { BIcon, BIconArrowUp, BIconArrowDown } from 'bootstrap-vue'

export default {
  components: {
    BIcon,
    BIconArrowUp,
    BIconArrowDown
  },
  props: {
    // ...
  }
  // ...
}

If you are using only BootstrapVueIcons or IconsPlugin in your project, you can also just import the required icons CSS, rather than the full Bootstrap and BootstrapVue SCSS/CSS.

import { BootstrapVueIcons } from 'bootstrap-vue'
import 'bootstrap-vue/dist/bootstrap-vue-icons.min.css'

Vue.use(BootstrapVueIcons)

Or if using the icons SCSS source:

import { BootstrapVueIcons } from 'bootstrap-vue'
import 'bootstrap-vue/src/icons.scss'

Vue.use(BootstrapVueIcons)

BootstrapVue icons SCSS/CSS does not depend on any Bootstrap SASS variables, mixins, functions or CSS classes (other than the Bootstrap text-{variant} text color utility classes, if using the variant prop). Please note that the icons CSS is also included in the main BootstrapVue SCSS/CSS files. Animations effects require BootstrapVue custom SCSS/CSS.

Browser

Icons are not installed by default in the UMD browser build, so you must explicitly include the icons library:

<head>
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.6.1/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
  <!-- Load Vue followed by BootstrapVue, and BootstrapVueIcons -->
  <script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>

If using just the icons:

<head>
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.6.1/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.css" />
  <!-- Load Vue followed by BootstrapVueIcons -->
  <script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
</head>

Icon components

You can either uses individual icon components, or use the icon helper component <b-icon>, to place icons in your project templates.

All individual icon components are prefixed with the name <b-icon-{name}>, where {name} is one of the icon names listed in the Icons section above.

Using individual icon components:

<template>
  <div class="h2 mb-0">
    <b-icon-arrow-up></b-icon-arrow-up>
    <b-icon-exclamation-triangle-fill></b-icon-exclamation-triangle-fill>
  </div>
</template>

Using the <b-icon> helper component:

<template>
  <div class="h2 mb-0">
    <b-icon icon="arrow-up"></b-icon>
    <b-icon icon="exclamation-triangle"></b-icon>
  </div>
</template>

Note: when using <b-icon>, you must also import the required individual icon components, unless you are using the IconsPlugin or BootstrapVueIcons plugin.

Variants

By default, icons inherit the current text color of their parent element. All icon components provide a variant prop to apply one of the Bootstrap contextual text variant colors:

<template>
  <div class="h2 mb-0">
    <b-icon icon="exclamation-circle-fill" variant="success"></b-icon>
    <b-icon icon="exclamation-circle-fill" variant="warning"></b-icon>
    <b-icon icon="exclamation-circle-fill" variant="danger"></b-icon>
    <b-icon icon="exclamation-circle-fill" variant="info"></b-icon>
    <b-icon icon="exclamation-circle-fill" variant="primary"></b-icon>
    <b-icon icon="exclamation-circle-fill" variant="secondary"></b-icon>
    <b-icon icon="exclamation-circle-fill" variant="dark"></b-icon>
  </div>
</template>

You can also use custom CSS to set the icon color, either via direct style attribute, or via custom classes:

<template>
  <div class="h2 mb-0">
    <b-icon icon="battery-full" style="color: #7952b3;"></b-icon>
  </div>
</template>

The variant prop places the color utility class text-{variant} on the icon's root element.

Sizing

Icons have a default width and height of 1em, which means they will scale with the size of the current font size:

Icon

<template>
  <div>
    <p class="h1 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
    <p class="h2 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
    <p class="h3 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
    <p class="h4 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
    <p class="h5 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
  </div>
</template>

You can also use custom CSS to set the icon size, either via direct style attribute, or via custom classes:

<template>
  <div>
    <b-icon icon="exclamation-circle" style="width: 120px; height: 120px;"></b-icon>
  </div>
</template>

You can also use the prop font-scale to scale the icon's current font size by the specified factor:

<template>
  <div>
    <b-icon icon="camera" font-scale="0.5"></b-icon>
    <b-icon icon="camera" font-scale="1"></b-icon>
    <b-icon icon="camera" font-scale="2"></b-icon>
    <b-icon icon="camera" font-scale="3"></b-icon>
    <b-icon icon="camera" font-scale="4"></b-icon>
    <b-icon icon="camera" font-scale="5"></b-icon>
    <b-icon icon="camera" font-scale="7.5"></b-icon>
  </div>
</template>

Also see the scaling transforms section below for additional sizing options.

Styling

With the use of Bootstrap's border, background and padding utility classes, you can create various styling effects:

<template>
  <div style="font-size: 4rem;">
    <b-icon icon="bell-fill" class="border rounded p-2"></b-icon>
    <b-icon icon="bell-fill" class="border border-info rounded p-2" variant="info"></b-icon>
    <b-icon icon="bell-fill" class="rounded-circle bg-danger p-2" variant="light"></b-icon>
    <b-icon icon="unlock-fill" class="rounded bg-primary p-1" variant="light"></b-icon>
  </div>
</template>

SVG transforms

BootstrapVue icons provide several props for applying basic SVG transforms to the <svg>. All transforms can be combined for added effect. Note that the transforms are applied to the <svg> content and not the <svg> bounding box.

Flipping

Flip the icon horizontally and/or vertically via the flip-h and flip-v props.

<template>
  <div style="font-size: 4rem;">
    <b-icon icon="bar-chart-fill"></b-icon>
    <b-icon icon="bar-chart-fill" flip-h></b-icon>
    <b-icon icon="bar-chart-fill" flip-v></b-icon>
    <b-icon icon="bar-chart-fill" flip-h flip-v></b-icon>
  </div>
</template>

Rotate

Rotate the icon by a specified number of degrees via the rotate prop. Positive values will rotate the icon clockwise, while negative values will rotate the icon counterclockwise.

<template>
  <div style="font-size: 4rem;">
    <b-icon icon="camera"></b-icon>
    <b-icon icon="camera" rotate="45"></b-icon>
    <b-icon icon="camera" rotate="90"></b-icon>
    <b-icon icon="camera" rotate="180"></b-icon>
    <b-icon icon="camera" rotate="270"></b-icon>
    <b-icon icon="camera" rotate="-45"></b-icon>
  </div>
</template>

Note that any flipping is performed before the rotation is applied.

Scale

Scale the icon by any positive factor via the scale prop. Note this changes the icon's visual size but not its physical font size. To illustrate this we have added a background color to the icons.

<template>
  <b-row cols="2" cols-sm="4" class="text-center" style="font-size: 4rem;">
    <b-col class="mb-2">
      <b-icon icon="exclamation-circle" scale="0.5" class="bg-info"></b-icon>
    </b-col>
    <b-col class="mb-2">
      <b-icon icon="exclamation-circle" class="bg-info"></b-icon>
    </b-col>
    <b-col class="mb-2">
      <b-icon icon="exclamation-circle" scale="1.5" class="bg-info"></b-icon>
    </b-col>
    <b-col class="mb-2">
      <b-icon icon="exclamation-circle" scale="2" class="bg-info"></b-icon>
    </b-col>
  </b-row>
</template>

If you need to have the background and/or border scale with the icon, use the font-scale prop instead.

Shifting

Shifting affects icon location without changing or moving the svg container. To move icons on the horizontal and/or vertical axis, use the shift-h and shift-v props with any arbitrary numeric value, including decimals.

For shift-v, positive values will move the icon upwards, while negative values will move the icon downwards. For shift-h, positive values will move the icon to the right, while negative values will move it left. Both props accept values that are in units of 1/16em (relative to the icon's current font size).

For clarity in the example, we’ve added a background color on the icon so you can see the effect.

<template>
  <b-row cols="2" cols-sm="4" class="text-center" style="font-size: 4rem;">
    <b-col class="py-4 mb-2">
      <b-icon icon="exclamation-circle" class="bg-info"></b-icon>
    </b-col>
    <b-col class="py-4 mb-2">
      <b-icon icon="exclamation-circle" shift-v="8" class="bg-info"></b-icon>
    </b-col>
    <b-col class="py-4 mb-2">
      <b-icon icon="exclamation-circle" shift-v="-8" class="bg-info"></b-icon>
    </b-col>
    <b-col class="py-4 mb-2">
      <b-icon icon="exclamation-circle" shift-h="8" class="bg-info"></b-icon>
    </b-col>
    <b-col class="py-4 mb-2">
      <b-icon icon="exclamation-circle" shift-h="-8" class="bg-info"></b-icon>
    </b-col>
    <b-col class="py-4 mb-2">
      <b-icon icon="exclamation-circle" shift-v="16" class="bg-info"></b-icon>
    </b-col>
    <b-col class="py-4 mb-2">
      <b-icon icon="exclamation-circle" shift-h="-8" shift-v="-8" class="bg-info"></b-icon>
    </b-col>
    <b-col class="py-4 mb-2">
      <b-icon
        icon="exclamation-circle"
        scale="0.5"
        rotate="45"
        shift-h="-4"
        shift-v="4"
        class="bg-info"
      ></b-icon>
    </b-col>
  </b-row>
</template>

Shifting is applied after any rotation transforms. As with scaling, backgrounds and borders are not affected. If you need to shift the border/background with the icon, use Bootstrap's margin spacing utility classes.

Animated icons

v2.7.0+

BootstrapVue includes the following built-in animations for icons:

'cylon' slides the icon left-right
'cylon-vertical' slides the icon up-down
'fade' fades the icon in and out 2.12.0+
'spin' smoothly spins the icon clockwise
'spin-reverse' smoothly spins the icon counter-clockwise
'spin-pulse' spins the icon clockwise, but in a pulsed step style
'spin-reverse-pulse' spins the icon counter-clockwise, but in a pulsed step style
'throb' scales the icon in and out 2.12.0+

To use the animation, set the animation prop to one of the animation names above.

Cylon animation:

Vertical cylon animation:

Fade animation:

Spinning animation:

Reverse spinning animation:

Pulsing spin animation:

Reversed pulsing spin animation:

Throb animation:

<template>
  <b-row class="text-md-center">
    <b-col md="6" class="mb-3">
      <p>Cylon animation:</p>
      <b-icon icon="three-dots" animation="cylon" font-scale="4"></b-icon>
    </b-col>
    <b-col md="6" class="mb-3">
      <p>Vertical cylon animation:</p>
      <b-icon icon="three-dots-vertical" animation="cylon-vertical" font-scale="4"></b-icon>
    </b-col>
    <b-col md="6" class="mb-3">
      <p>Fade animation:</p>
      <b-icon icon="star-fill" animation="fade" font-scale="4"></b-icon>
    </b-col>
    <b-col md="6" class="mb-3">
      <p>Spinning animation:</p>
      <b-icon icon="arrow-clockwise" animation="spin" font-scale="4"></b-icon>
    </b-col>
    <b-col md="6" class="mb-3">
      <p>Reverse spinning animation:</p>
      <b-icon icon="arrow-counterclockwise" animation="spin-reverse" font-scale="4"></b-icon>
    </b-col>
    <b-col md="6" class="mb-3">
      <p>Pulsing spin animation:</p>
      <b-icon icon="arrow-clockwise" animation="spin-pulse" font-scale="4"></b-icon>
    </b-col>
    <b-col md="6" class="mb-3">
      <p>Reversed pulsing spin animation:</p>
      <b-icon icon="arrow-counterclockwise" animation="spin-reverse-pulse" font-scale="4"></b-icon>
    </b-col>
    <b-col md="6" class="mb-3">
      <p>Throb animation:</p>
      <b-icon icon="circle-fill" animation="throb" font-scale="4"></b-icon>
    </b-col>
  </b-row>
</template>

As the animations are CSS based, they are applied after any SVG transforms have taken place:

<template>
  <div class="p-4">
    <b-icon icon="clock" animation="spin" font-scale="4" shift-v="8"></b-icon>
  </div>
</template>

The BootstrapVue defined icon animation effects require BootstrapVue's custom CSS. The animation prop translates to the class name b-icon-animation-{animationName}.

Need a different style animation? Just create a custom class defining the animation, and apply that class to the icon component, or create a new animation class in the form of b-icon-animation-{animationName} and pass the custom animation name to the animation prop.

Animation notes:

With the cylon animations, the left-right movement (or up-down movement) extends past the icon's bounding box by +/- 25%, so you may need to adjust padding or margins to compensate for your use case.
Animation durations can be configured via SASS SCSS variables
The BootstrapVue defined animation effects of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation for additional details.
The cylon animation gets its name from the "eye" of the Cylons from the original 1978 Battlestar Galactica TV series.

Stacking icons

v2.3.0+

Combine icons together via the use of the component <b-iconstack> and the stacked prop on individual icons (<b-icon> or <b-icon-{icon-name}>) to create complex icons:

<template>
  <div>
    <b-iconstack font-scale="5">
      <b-icon stacked icon="camera" variant="info" scale="0.75"></b-icon>
      <b-icon stacked icon="slash-circle" variant="danger"></b-icon>
    </b-iconstack>

    <b-iconstack font-scale="5" rotate="90">
      <b-icon stacked icon="chevron-right" shift-h="-4" variant="danger"></b-icon>
      <b-icon stacked icon="chevron-right" shift-h="0" variant="success"></b-icon>
      <b-icon stacked icon="chevron-right" shift-h="4" variant="primary"></b-icon>
    </b-iconstack>

    <b-iconstack font-scale="5">
      <b-icon stacked icon="circle-fill" variant="info"></b-icon>
      <b-icon stacked icon="bell-fill" scale="0.5" variant="white"></b-icon>
      <b-icon stacked icon="circle" variant="danger"></b-icon>
    </b-iconstack>

    <b-iconstack font-scale="5" variant="white">
      <b-icon stacked icon="square-fill" variant="dark"></b-icon>
      <b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="3" shift-h="-3"></b-icon>
      <b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="3" shift-h="3" rotate="90"></b-icon>
      <b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-3" shift-h="3" rotate="180"></b-icon>
      <b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-3" shift-h="-3" rotate="270"></b-icon>
    </b-iconstack>

    <b-iconstack font-scale="5">
      <b-icon stacked icon="square"></b-icon>
      <b-icon stacked icon="check"></b-icon>
    </b-iconstack>

    <b-iconstack font-scale="5">
      <b-icon stacked icon="square"></b-icon>
      <b-icon stacked icon="dot" shift-h="-3" shift-v="4"></b-icon>
      <b-icon stacked icon="dot" shift-h="-3"></b-icon>
      <b-icon stacked icon="dot" shift-h="-3" shift-v="-4"></b-icon>
      <b-icon stacked icon="dot" shift-h="3" shift-v="4"></b-icon>
      <b-icon stacked icon="dot" shift-h="3"></b-icon>
      <b-icon stacked icon="dot" shift-h="3" shift-v="-4"></b-icon>
    </b-iconstack>
  </div>
</template>

<b-iconstack> supports the same variant, font-size, animation and transformation props available on individual icons.

Stacked icon notes:

Remember to set the stacked prop on the inner icon components!
The font-scale prop cannot be used on the inner icon components
The width and height attributes cannot be applied to the inner icon components
Stacked icons cannot be stacked inside another <b-iconstack>

Stacked icon animation

The <b-iconstack> component supports the same animations as individual icons:

<template>
  <div>
    <b-iconstack font-scale="5" animation="spin">
      <b-icon stacked icon="camera" variant="info" scale="0.75" shift-v="-0.25"></b-icon>
      <b-icon stacked icon="slash-circle" variant="danger"></b-icon>
    </b-iconstack>
  </div>
</template>

Individual icons within the icon stack can also be animated (except on IE 11):

<template>
  <div>
    <b-iconstack font-scale="5" animation="cylon">
      <b-icon
        stacked
        icon="camera"
        animation="throb"
        variant="info"
        scale="0.75"
      ></b-icon>
      <b-icon
        stacked
        icon="slash-circle"
        animation="spin-reverse"
        variant="danger"
      ></b-icon>
    </b-iconstack>
  </div>
</template>

Notes:

IE 11 does not support animation of child elements within an SVG, hence only the <b-iconstack> component can be animated. The child icon(s) animation will not be visible to IE 11 users.
The BootstrapVue defined animation effects of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation for additional details.

Using in components

Easily place icons as content in other components.

Note that icons placed in BootstrapVue components use BootstrapVue's custom CSS for additional styling compensation due to current issues with Bootstrap Icons <svg> alignment implementation, and for additional aesthetic scaling (icons placed in the components listed below will have their font scaled by 125%).

Buttons

<template>
  <div>
    <b-button size="sm" class="mb-2">
      <b-icon icon="gear-fill" aria-hidden="true"></b-icon> Settings
    </b-button>
    <br>
    <b-button variant="primary" class="mb-2">
      Pay now <b-icon icon="credit-card" aria-hidden="true"></b-icon>
    </b-button>
    <br>
    <b-button variant="outline-info" class="mb-2">
      <b-icon icon="power" aria-hidden="true"></b-icon> Logout
    </b-button>
    <br>
    <b-button size="lg" variant="primary" class="mb-2">
      <b-icon icon="question-circle-fill" aria-label="Help"></b-icon>
    </b-button>
  </div>
</template>

Button Groups and toolbars

Button Group

<template>
  <div>
    <b-button-group>
      <b-button variant="outline-primary">
        <b-icon icon="tools"></b-icon> Settings
      </b-button>
      <b-button variant="outline-primary">
        <b-icon icon="person-fill"></b-icon> Account
      </b-button>
      <b-button variant="outline-primary">
        <b-icon icon="inbox-fill"></b-icon> Messages
      </b-button>
    </b-button-group>
  </div>
</template>

<template>
  <div>
    <b-button-toolbar>
      <b-button-group class="mr-1">
        <b-button title="Save file">
          <b-icon icon="cloud-upload" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Load file">
          <b-icon icon="cloud-download" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="New document">
          <b-icon icon="file-earmark" aria-hidden="true"></b-icon>
        </b-button>
      </b-button-group>
      <b-button-group class="mr-1">
        <b-button title="Align left">
          <b-icon icon="text-left" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Align center">
          <b-icon icon="text-center" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Align right">
          <b-icon icon="text-right" aria-hidden="true"></b-icon>
        </b-button>
      </b-button-group>
      <b-button-group>
        <b-button title="Bold">
          <b-icon icon="type-bold" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Italic">
          <b-icon icon="type-italic" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Underline">
          <b-icon icon="type-underline" aria-hidden="true"></b-icon>
        </b-button>
        <b-button title="Strikethrough">
          <b-icon icon="type-strikethrough" aria-hidden="true"></b-icon>
        </b-button>
      </b-button-group>
    </b-button-toolbar>
  </div>
</template>

Input Groups

<template>
  <div>
    <b-input-group size="sm" class="mb-2">
      <b-input-group-prepend is-text>
        <b-icon icon="search"></b-icon>
      </b-input-group-prepend>
      <b-form-input type="search" placeholder="Search terms"></b-form-input>
    </b-input-group>
    <b-input-group class="mb-2">
      <b-input-group-prepend is-text>
        <b-icon icon="tag-fill"></b-icon>
      </b-input-group-prepend>
      <b-form-tags
        separator=" ,;"
        tag-variant="primary"
        placeholder="Enter new tags separated by space, comma or semicolon"
        no-add-on-enter
      ></b-form-tags>
    </b-input-group>
    <b-input-group class="mb-2">
      <b-input-group-prepend is-text>
        <b-icon icon="person-fill"></b-icon>
      </b-input-group-prepend>
      <b-form-input type="text" placeholder="User ID"></b-form-input>
    </b-input-group>
    <b-input-group size="lg">
      <b-input-group-prepend is-text>
        <b-icon icon="envelope"></b-icon>
      </b-input-group-prepend>
      <b-form-input type="email" placeholder="me@example.com"></b-form-input>
    </b-input-group>
  </div>
</template>

List Groups

Cras justo odio

Dapibus ac facilisis in

Morbi leo risus

Incididunt veniam velit

<template>
  <b-list-group>
    <b-list-group-item class="d-flex justify-content-between align-items-center">
      <b-icon icon="x-circle" scale="2" variant="danger"></b-icon>
      Cras justo odio
    </b-list-group-item>
    <b-list-group-item class="d-flex justify-content-between align-items-center">
      <b-icon icon="exclamation-triangle-fill" scale="2" variant="warning"></b-icon>
      Dapibus ac facilisis in
    </b-list-group-item>
    <b-list-group-item class="d-flex justify-content-between align-items-center">
      <b-icon icon="info-circle-fill" scale="2" variant="info"></b-icon>
      Morbi leo risus
    </b-list-group-item>
    <b-list-group-item class="d-flex justify-content-between align-items-center">
      <b-icon icon="check-square" scale="2" variant="success"></b-icon>
      Incididunt veniam velit
    </b-list-group-item>
  </b-list-group>
</template>

Dropdowns

<template>
  <div>
    <b-dropdown variant="primary">
      <template #button-content>
        <b-icon icon="gear-fill" aria-hidden="true"></b-icon> Settings
      </template>
      <b-dropdown-item-button>
         <b-icon icon="lock-fill" aria-hidden="true"></b-icon>
         Locked <span class="sr-only">(Click to unlock)</span>
      </b-dropdown-item-button>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-group header="Choose options" class="small">
        <b-dropdown-item-button>
           <b-icon icon="blank" aria-hidden="true"></b-icon>
           Option A <span class="sr-only">(Not selected)</span>
        </b-dropdown-item-button>
        <b-dropdown-item-button>
           <b-icon icon="check" aria-hidden="true"></b-icon>
           Option B <span class="sr-only">(Selected)</span>
        </b-dropdown-item-button>
         <b-dropdown-item-button>
           <b-icon icon="blank" aria-hidden="true"></b-icon>
           Option C <span class="sr-only">(Not selected)</span>
        </b-dropdown-item-button>
      </b-dropdown-group>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item-button>Some action</b-dropdown-item-button>
      <b-dropdown-item-button>Some other action</b-dropdown-item-button>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item-button variant="danger">
        <b-icon icon="trash-fill" aria-hidden="true"></b-icon>
        Delete
      </b-dropdown-item-button>
    </b-dropdown>
  </div>
</template>

Working with SVGs

SVGs are awesome to work with, but they do have some known quirks to work around.

Focus handling is broken in Internet Explorer and Edge. We have added the attribute focusable="false" to the <svg> element. You can override this by setting the attribute focusable="false" on the icon component.
Browsers inconsistently announce SVGs as <img> tags with voice assistance. Hence, we have added added the attributes role="img" and alt="icon". You can override these attributes if needed.
Safari skips aria-label when used on non-focusable SVGs. As such, use the attribute aria-hidden="true" when using the icon and use CSS to visually hide the equivalent label.

Icons

Use the explorer below to search and browse the available icons.

Icon explorer

0-circle
0-circle-fill
0-square
0-square-fill
123
1-circle
1-circle-fill
1-square
1-square-fill
2-circle
2-circle-fill
2-square
2-square-fill
3-circle
3-circle-fill
3-square
3-square-fill
4-circle
4-circle-fill
4-square
4-square-fill
5-circle
5-circle-fill
5-square
5-square-fill
6-circle
6-circle-fill
6-square
6-square-fill
7-circle
7-circle-fill
7-square
7-square-fill
8-circle
8-circle-fill
8-square
8-square-fill
9-circle
9-circle-fill
9-square
9-square-fill
activity
airplane
airplane-engines
airplane-engines-fill
airplane-fill
alarm
alarm-fill
alexa
align-bottom
align-center
align-end
align-middle
align-start
align-top
alipay
alphabet
alphabet-uppercase
alt
amazon
amd
android
android2
app
app-indicator
apple
archive
archive-fill
arrow90deg-down
arrow90deg-left
arrow90deg-right
arrow90deg-up
arrow-bar-down
arrow-bar-left
arrow-bar-right
arrow-bar-up
arrow-clockwise
arrow-counterclockwise
arrow-down
arrow-down-circle
arrow-down-circle-fill
arrow-down-left
arrow-down-left-circle
arrow-down-left-circle-fill
arrow-down-left-square
arrow-down-left-square-fill
arrow-down-right
arrow-down-right-circle
arrow-down-right-circle-fill
arrow-down-right-square
arrow-down-right-square-fill
arrow-down-short
arrow-down-square
arrow-down-square-fill
arrow-down-up
arrow-left
arrow-left-circle
arrow-left-circle-fill
arrow-left-right
arrow-left-short
arrow-left-square
arrow-left-square-fill
arrow-repeat
arrow-return-left
arrow-return-right
arrow-right
arrow-right-circle
arrow-right-circle-fill
arrow-right-short
arrow-right-square
arrow-right-square-fill
arrow-through-heart
arrow-through-heart-fill
arrow-up
arrow-up-circle
arrow-up-circle-fill
arrow-up-left
arrow-up-left-circle
arrow-up-left-circle-fill
arrow-up-left-square
arrow-up-left-square-fill
arrow-up-right
arrow-up-right-circle
arrow-up-right-circle-fill
arrow-up-right-square
arrow-up-right-square-fill
arrow-up-short
arrow-up-square
arrow-up-square-fill
arrows
arrows-angle-contract
arrows-angle-expand
arrows-collapse
arrows-collapse-vertical
arrows-expand
arrows-expand-vertical
arrows-fullscreen
arrows-move
arrows-vertical
aspect-ratio
aspect-ratio-fill
asterisk
at
award
award-fill
back
backpack
backpack2
backpack2-fill
backpack3
backpack3-fill
backpack4
backpack4-fill
backpack-fill
backspace
backspace-fill
backspace-reverse
backspace-reverse-fill
badge3d
badge3d-fill
badge4k
badge4k-fill
badge8k
badge8k-fill
badge-ad
badge-ad-fill
badge-ar
badge-ar-fill
badge-cc
badge-cc-fill
badge-hd
badge-hd-fill
badge-sd
badge-sd-fill
badge-tm
badge-tm-fill
badge-vo
badge-vo-fill
badge-vr
badge-vr-fill
badge-wc
badge-wc-fill
bag
bag-check
bag-check-fill
bag-dash
bag-dash-fill
bag-fill
bag-heart
bag-heart-fill
bag-plus
bag-plus-fill
bag-x
bag-x-fill
balloon
balloon-fill
balloon-heart
balloon-heart-fill
ban
ban-fill
bandaid
bandaid-fill
bank
bank2
bar-chart
bar-chart-fill
bar-chart-line
bar-chart-line-fill
bar-chart-steps
basket
basket2
basket2-fill
basket3
basket3-fill
basket-fill
battery
battery-charging
battery-full
battery-half
behance
bell
bell-fill
bell-slash
bell-slash-fill
bezier
bezier2
bicycle
bing
binoculars
binoculars-fill
blank
blockquote-left
blockquote-right
bluetooth
body-text
book
book-fill
book-half
bookmark
bookmark-check
bookmark-check-fill
bookmark-dash
bookmark-dash-fill
bookmark-fill
bookmark-heart
bookmark-heart-fill
bookmark-plus
bookmark-plus-fill
bookmark-star
bookmark-star-fill
bookmark-x
bookmark-x-fill
bookmarks
bookmarks-fill
bookshelf
boombox
boombox-fill
bootstrap
bootstrap-fill
bootstrap-reboot
border
border-all
border-bottom
border-center
border-inner
border-left
border-middle
border-outer
border-right
border-style
border-top
border-width
bounding-box
bounding-box-circles
box
box2
box2-fill
box2-heart
box2-heart-fill
box-arrow-down
box-arrow-down-left
box-arrow-down-right
box-arrow-in-down
box-arrow-in-down-left
box-arrow-in-down-right
box-arrow-in-left
box-arrow-in-right
box-arrow-in-up
box-arrow-in-up-left
box-arrow-in-up-right
box-arrow-left
box-arrow-right
box-arrow-up
box-arrow-up-left
box-arrow-up-right
box-fill
box-seam
box-seam-fill
boxes
braces
braces-asterisk
bricks
briefcase
briefcase-fill
brightness-alt-high
brightness-alt-high-fill
brightness-alt-low
brightness-alt-low-fill
brightness-high
brightness-high-fill
brightness-low
brightness-low-fill
brilliance
broadcast
broadcast-pin
browser-chrome
browser-edge
browser-firefox
browser-safari
brush
brush-fill
bucket
bucket-fill
bug
bug-fill
building
building-add
building-check
building-dash
building-down
building-exclamation
building-fill
building-fill-add
building-fill-check
building-fill-dash
building-fill-down
building-fill-exclamation
building-fill-gear
building-fill-lock
building-fill-slash
building-fill-up
building-fill-x
building-gear
building-lock
building-slash
building-up
building-x
buildings
buildings-fill
bullseye
bus-front
bus-front-fill
c-circle
c-circle-fill
c-square
c-square-fill
cake
cake2
cake2-fill
cake-fill
calculator
calculator-fill
calendar
calendar2
calendar2-check
calendar2-check-fill
calendar2-date
calendar2-date-fill
calendar2-day
calendar2-day-fill
calendar2-event
calendar2-event-fill
calendar2-fill
calendar2-heart
calendar2-heart-fill
calendar2-minus
calendar2-minus-fill
calendar2-month
calendar2-month-fill
calendar2-plus
calendar2-plus-fill
calendar2-range
calendar2-range-fill
calendar2-week
calendar2-week-fill
calendar2-x
calendar2-x-fill
calendar3
calendar3-event
calendar3-event-fill
calendar3-fill
calendar3-range
calendar3-range-fill
calendar3-week
calendar3-week-fill
calendar4
calendar4-event
calendar4-range
calendar4-week
calendar-check
calendar-check-fill
calendar-date
calendar-date-fill
calendar-day
calendar-day-fill
calendar-event
calendar-event-fill
calendar-fill
calendar-heart
calendar-heart-fill
calendar-minus
calendar-minus-fill
calendar-month
calendar-month-fill
calendar-plus
calendar-plus-fill
calendar-range
calendar-range-fill
calendar-week
calendar-week-fill
calendar-x
calendar-x-fill
camera
camera2
camera-fill
camera-reels
camera-reels-fill
camera-video
camera-video-fill
camera-video-off
camera-video-off-fill
capslock
capslock-fill
capsule
capsule-pill
car-front
car-front-fill
card-checklist
card-heading
card-image
card-list
card-text
caret-down
caret-down-fill
caret-down-square
caret-down-square-fill
caret-left
caret-left-fill
caret-left-square
caret-left-square-fill
caret-right
caret-right-fill
caret-right-square
caret-right-square-fill
caret-up
caret-up-fill
caret-up-square
caret-up-square-fill
cart
cart2
cart3
cart4
cart-check
cart-check-fill
cart-dash
cart-dash-fill
cart-fill
cart-plus
cart-plus-fill
cart-x
cart-x-fill
cash
cash-coin
cash-stack
cassette
cassette-fill
cast
cc-circle
cc-circle-fill
cc-square
cc-square-fill
chat
chat-dots
chat-dots-fill
chat-fill
chat-heart
chat-heart-fill
chat-left
chat-left-dots
chat-left-dots-fill
chat-left-fill
chat-left-heart
chat-left-heart-fill
chat-left-quote
chat-left-quote-fill
chat-left-text
chat-left-text-fill
chat-quote
chat-quote-fill
chat-right
chat-right-dots
chat-right-dots-fill
chat-right-fill
chat-right-heart
chat-right-heart-fill
chat-right-quote
chat-right-quote-fill
chat-right-text
chat-right-text-fill
chat-square
chat-square-dots
chat-square-dots-fill
chat-square-fill
chat-square-heart
chat-square-heart-fill
chat-square-quote
chat-square-quote-fill
chat-square-text
chat-square-text-fill
chat-text
chat-text-fill
check
check2
check2-all
check2-circle
check2-square
check-all
check-circle
check-circle-fill
check-lg
check-square
check-square-fill
chevron-bar-contract
chevron-bar-down
chevron-bar-expand
chevron-bar-left
chevron-bar-right
chevron-bar-up
chevron-compact-down
chevron-compact-left
chevron-compact-right
chevron-compact-up
chevron-contract
chevron-double-down
chevron-double-left
chevron-double-right
chevron-double-up
chevron-down
chevron-expand
chevron-left
chevron-right
chevron-up
circle
circle-fill
circle-half
circle-square
clipboard
clipboard2
clipboard2-check
clipboard2-check-fill
clipboard2-data
clipboard2-data-fill
clipboard2-fill
clipboard2-heart
clipboard2-heart-fill
clipboard2-minus
clipboard2-minus-fill
clipboard2-plus
clipboard2-plus-fill
clipboard2-pulse
clipboard2-pulse-fill
clipboard2-x
clipboard2-x-fill
clipboard-check
clipboard-check-fill
clipboard-data
clipboard-data-fill
clipboard-fill
clipboard-heart
clipboard-heart-fill
clipboard-minus
clipboard-minus-fill
clipboard-plus
clipboard-plus-fill
clipboard-pulse
clipboard-x
clipboard-x-fill
clock
clock-fill
clock-history
cloud
cloud-arrow-down
cloud-arrow-down-fill
cloud-arrow-up
cloud-arrow-up-fill
cloud-check
cloud-check-fill
cloud-download
cloud-download-fill
cloud-drizzle
cloud-drizzle-fill
cloud-fill
cloud-fog
cloud-fog2
cloud-fog2-fill
cloud-fog-fill
cloud-hail
cloud-hail-fill
cloud-haze
cloud-haze2
cloud-haze2-fill
cloud-haze-fill
cloud-lightning
cloud-lightning-fill
cloud-lightning-rain
cloud-lightning-rain-fill
cloud-minus
cloud-minus-fill
cloud-moon
cloud-moon-fill
cloud-plus
cloud-plus-fill
cloud-rain
cloud-rain-fill
cloud-rain-heavy
cloud-rain-heavy-fill
cloud-slash
cloud-slash-fill
cloud-sleet
cloud-sleet-fill
cloud-snow
cloud-snow-fill
cloud-sun
cloud-sun-fill
cloud-upload
cloud-upload-fill
clouds
clouds-fill
cloudy
cloudy-fill
code
code-slash
code-square
coin
collection
collection-fill
collection-play
collection-play-fill
columns
columns-gap
command
compass
compass-fill
cone
cone-striped
controller
cookie
copy
cpu
cpu-fill
credit-card
credit-card2-back
credit-card2-back-fill
credit-card2-front
credit-card2-front-fill
credit-card-fill
crop
crosshair
crosshair2
cup
cup-fill
cup-hot
cup-hot-fill
cup-straw
currency-bitcoin
currency-dollar
currency-euro
currency-exchange
currency-pound
currency-rupee
currency-yen
cursor
cursor-fill
cursor-text
dash
dash-circle
dash-circle-dotted
dash-circle-fill
dash-lg
dash-square
dash-square-dotted
dash-square-fill
database
database-add
database-check
database-dash
database-down
database-exclamation
database-fill
database-fill-add
database-fill-check
database-fill-dash
database-fill-down
database-fill-exclamation
database-fill-gear
database-fill-lock
database-fill-slash
database-fill-up
database-fill-x
database-gear
database-lock
database-slash
database-up
database-x
device-hdd
device-hdd-fill
device-ssd
device-ssd-fill
diagram2
diagram2-fill
diagram3
diagram3-fill
diamond
diamond-fill
diamond-half
dice1
dice1-fill
dice2
dice2-fill
dice3
dice3-fill
dice4
dice4-fill
dice5
dice5-fill
dice6
dice6-fill
disc
disc-fill
discord
display
display-fill
displayport
displayport-fill
distribute-horizontal
distribute-vertical
door-closed
door-closed-fill
door-open
door-open-fill
dot
download
dpad
dpad-fill
dribbble
dropbox
droplet
droplet-fill
droplet-half
duffle
duffle-fill
ear
ear-fill
earbuds
easel
easel2
easel2-fill
easel3
easel3-fill
easel-fill
egg
egg-fill
egg-fried
eject
eject-fill
emoji-angry
emoji-angry-fill
emoji-astonished
emoji-astonished-fill
emoji-dizzy
emoji-dizzy-fill
emoji-expressionless
emoji-expressionless-fill
emoji-frown
emoji-frown-fill
emoji-grimace
emoji-grimace-fill
emoji-grin
emoji-grin-fill
emoji-heart-eyes
emoji-heart-eyes-fill
emoji-kiss
emoji-kiss-fill
emoji-laughing
emoji-laughing-fill
emoji-neutral
emoji-neutral-fill
emoji-smile
emoji-smile-fill
emoji-smile-upside-down
emoji-smile-upside-down-fill
emoji-sunglasses
emoji-sunglasses-fill
emoji-surprise
emoji-surprise-fill
emoji-tear
emoji-tear-fill
emoji-wink
emoji-wink-fill
envelope
envelope-arrow-down
envelope-arrow-down-fill
envelope-arrow-up
envelope-arrow-up-fill
envelope-at
envelope-at-fill
envelope-check
envelope-check-fill
envelope-dash
envelope-dash-fill
envelope-exclamation
envelope-exclamation-fill
envelope-fill
envelope-heart
envelope-heart-fill
envelope-open
envelope-open-fill
envelope-open-heart
envelope-open-heart-fill
envelope-paper
envelope-paper-fill
envelope-paper-heart
envelope-paper-heart-fill
envelope-plus
envelope-plus-fill
envelope-slash
envelope-slash-fill
envelope-x
envelope-x-fill
eraser
eraser-fill
escape
ethernet
ev-front
ev-front-fill
ev-station
ev-station-fill
exclamation
exclamation-circle
exclamation-circle-fill
exclamation-diamond
exclamation-diamond-fill
exclamation-lg
exclamation-octagon
exclamation-octagon-fill
exclamation-square
exclamation-square-fill
exclamation-triangle
exclamation-triangle-fill
exclude
explicit
explicit-fill
exposure
eye
eye-fill
eye-slash
eye-slash-fill
eyedropper
eyeglasses
facebook
fan
fast-forward
fast-forward-btn
fast-forward-btn-fill
fast-forward-circle
fast-forward-circle-fill
fast-forward-fill
feather
feather2
file
file-arrow-down
file-arrow-down-fill
file-arrow-up
file-arrow-up-fill
file-bar-graph
file-bar-graph-fill
file-binary
file-binary-fill
file-break
file-break-fill
file-check
file-check-fill
file-code
file-code-fill
file-diff
file-diff-fill
file-earmark
file-earmark-arrow-down
file-earmark-arrow-down-fill
file-earmark-arrow-up
file-earmark-arrow-up-fill
file-earmark-bar-graph
file-earmark-bar-graph-fill
file-earmark-binary
file-earmark-binary-fill
file-earmark-break
file-earmark-break-fill
file-earmark-check
file-earmark-check-fill
file-earmark-code
file-earmark-code-fill
file-earmark-diff
file-earmark-diff-fill
file-earmark-easel
file-earmark-easel-fill
file-earmark-excel
file-earmark-excel-fill
file-earmark-fill
file-earmark-font
file-earmark-font-fill
file-earmark-image
file-earmark-image-fill
file-earmark-lock
file-earmark-lock2
file-earmark-lock2-fill
file-earmark-lock-fill
file-earmark-medical
file-earmark-medical-fill
file-earmark-minus
file-earmark-minus-fill
file-earmark-music
file-earmark-music-fill
file-earmark-pdf
file-earmark-pdf-fill
file-earmark-person
file-earmark-person-fill
file-earmark-play
file-earmark-play-fill
file-earmark-plus
file-earmark-plus-fill
file-earmark-post
file-earmark-post-fill
file-earmark-ppt
file-earmark-ppt-fill
file-earmark-richtext
file-earmark-richtext-fill
file-earmark-ruled
file-earmark-ruled-fill
file-earmark-slides
file-earmark-slides-fill
file-earmark-spreadsheet
file-earmark-spreadsheet-fill
file-earmark-text
file-earmark-text-fill
file-earmark-word
file-earmark-word-fill
file-earmark-x
file-earmark-x-fill
file-earmark-zip
file-earmark-zip-fill
file-easel
file-easel-fill
file-excel
file-excel-fill
file-fill
file-font
file-font-fill
file-image
file-image-fill
file-lock
file-lock2
file-lock2-fill
file-lock-fill
file-medical
file-medical-fill
file-minus
file-minus-fill
file-music
file-music-fill
file-pdf
file-pdf-fill
file-person
file-person-fill
file-play
file-play-fill
file-plus
file-plus-fill
file-post
file-post-fill
file-ppt
file-ppt-fill
file-richtext
file-richtext-fill
file-ruled
file-ruled-fill
file-slides
file-slides-fill
file-spreadsheet
file-spreadsheet-fill
file-text
file-text-fill
file-word
file-word-fill
file-x
file-x-fill
file-zip
file-zip-fill
files
files-alt
filetype-aac
filetype-ai
filetype-bmp
filetype-cs
filetype-css
filetype-csv
filetype-doc
filetype-docx
filetype-exe
filetype-gif
filetype-heic
filetype-html
filetype-java
filetype-jpg
filetype-js
filetype-json
filetype-jsx
filetype-key
filetype-m4p
filetype-md
filetype-mdx
filetype-mov
filetype-mp3
filetype-mp4
filetype-otf
filetype-pdf
filetype-php
filetype-png
filetype-ppt
filetype-pptx
filetype-psd
filetype-py
filetype-raw
filetype-rb
filetype-sass
filetype-scss
filetype-sh
filetype-sql
filetype-svg
filetype-tiff
filetype-tsx
filetype-ttf
filetype-txt
filetype-wav
filetype-woff
filetype-xls
filetype-xlsx
filetype-xml
filetype-yml
film
filter
filter-circle
filter-circle-fill
filter-left
filter-right
filter-square
filter-square-fill
fingerprint
fire
flag
flag-fill
floppy
floppy2
floppy2-fill
floppy-fill
flower1
flower2
flower3
folder
folder2
folder2-open
folder-check
folder-fill
folder-minus
folder-plus
folder-symlink
folder-symlink-fill
folder-x
fonts
forward
forward-fill
front
fuel-pump
fuel-pump-diesel
fuel-pump-diesel-fill
fuel-pump-fill
fullscreen
fullscreen-exit
funnel
funnel-fill
gear
gear-fill
gear-wide
gear-wide-connected
gem
gender-ambiguous
gender-female
gender-male
gender-neuter
gender-trans
geo
geo-alt
geo-alt-fill
geo-fill
gift
gift-fill
git
github
gitlab
globe
globe2
globe-americas
globe-asia-australia
globe-central-south-asia
globe-europe-africa
google
google-play
gpu-card
graph-down
graph-down-arrow
graph-up
graph-up-arrow
grid
grid1x2
grid1x2-fill
grid3x2
grid3x2-gap
grid3x2-gap-fill
grid3x3
grid3x3-gap
grid3x3-gap-fill
grid-fill
grip-horizontal
grip-vertical
h-circle
h-circle-fill
h-square
h-square-fill
hammer
hand-index
hand-index-fill
hand-index-thumb
hand-index-thumb-fill
hand-thumbs-down
hand-thumbs-down-fill
hand-thumbs-up
hand-thumbs-up-fill
handbag
handbag-fill
hash
hdd
hdd-fill
hdd-network
hdd-network-fill
hdd-rack
hdd-rack-fill
hdd-stack
hdd-stack-fill
hdmi
hdmi-fill
headphones
headset
headset-vr
heart
heart-arrow
heart-fill
heart-half
heart-pulse
heart-pulse-fill
heartbreak
heartbreak-fill
hearts
heptagon
heptagon-fill
heptagon-half
hexagon
hexagon-fill
hexagon-half
highlighter
highlights
hospital
hospital-fill
hourglass
hourglass-bottom
hourglass-split
hourglass-top
house
house-add
house-add-fill
house-check
house-check-fill
house-dash
house-dash-fill
house-door
house-door-fill
house-down
house-down-fill
house-exclamation
house-exclamation-fill
house-fill
house-gear
house-gear-fill
house-heart
house-heart-fill
house-lock
house-lock-fill
house-slash
house-slash-fill
house-up
house-up-fill
house-x
house-x-fill
houses
houses-fill
hr
hurricane
hypnotize
image
image-alt
image-fill
images
inbox
inbox-fill
inboxes
inboxes-fill
incognito
indent
infinity
info
info-circle
info-circle-fill
info-lg
info-square
info-square-fill
input-cursor
input-cursor-text
instagram
intersect
journal
journal-album
journal-arrow-down
journal-arrow-up
journal-bookmark
journal-bookmark-fill
journal-check
journal-code
journal-medical
journal-minus
journal-plus
journal-richtext
journal-text
journal-x
journals
joystick
justify
justify-left
justify-right
kanban
kanban-fill
key
key-fill
keyboard
keyboard-fill
ladder
lamp
lamp-fill
laptop
laptop-fill
layer-backward
layer-forward
layers
layers-fill
layers-half
layout-sidebar
layout-sidebar-inset
layout-sidebar-inset-reverse
layout-sidebar-reverse
layout-split
layout-text-sidebar
layout-text-sidebar-reverse
layout-text-window
layout-text-window-reverse
layout-three-columns
layout-wtf
life-preserver
lightbulb
lightbulb-fill
lightbulb-off
lightbulb-off-fill
lightning
lightning-charge
lightning-charge-fill
lightning-fill
line
link
link45deg
linkedin
list
list-check
list-columns
list-columns-reverse
list-nested
list-ol
list-stars
list-task
list-ul
lock
lock-fill
luggage
luggage-fill
lungs
lungs-fill
magic
magnet
magnet-fill
mailbox
mailbox2
mailbox2-flag
mailbox-flag
map
map-fill
markdown
markdown-fill
marker-tip
mask
mastodon
medium
megaphone
megaphone-fill
memory
menu-app
menu-app-fill
menu-button
menu-button-fill
menu-button-wide
menu-button-wide-fill
menu-down
menu-up
messenger
meta
mic
mic-fill
mic-mute
mic-mute-fill
microsoft
microsoft-teams
minecart
minecart-loaded
modem
modem-fill
moisture
moon
moon-fill
moon-stars
moon-stars-fill
mortarboard
mortarboard-fill
motherboard
motherboard-fill
mouse
mouse2
mouse2-fill
mouse3
mouse3-fill
mouse-fill
music-note
music-note-beamed
music-note-list
music-player
music-player-fill
newspaper
nintendo-switch
node-minus
node-minus-fill
node-plus
node-plus-fill
noise-reduction
nut
nut-fill
nvidia
nvme
nvme-fill
octagon
octagon-fill
octagon-half
opencollective
optical-audio
optical-audio-fill
option
outlet
p-circle
p-circle-fill
p-square
p-square-fill
paint-bucket
palette
palette2
palette-fill
paperclip
paragraph
pass
pass-fill
passport
passport-fill
patch-check
patch-check-fill
patch-exclamation
patch-exclamation-fill
patch-minus
patch-minus-fill
patch-plus
patch-plus-fill
patch-question
patch-question-fill
pause
pause-btn
pause-btn-fill
pause-circle
pause-circle-fill
pause-fill
paypal
pc
pc-display
pc-display-horizontal
pc-horizontal
pci-card
pci-card-network
pci-card-sound
peace
peace-fill
pen
pen-fill
pencil
pencil-fill
pencil-square
pentagon
pentagon-fill
pentagon-half
people
people-fill
percent
person
person-add
person-arms-up
person-badge
person-badge-fill
person-bounding-box
person-check
person-check-fill
person-circle
person-dash
person-dash-fill
person-down
person-exclamation
person-fill
person-fill-add
person-fill-check
person-fill-dash
person-fill-down
person-fill-exclamation
person-fill-gear
person-fill-lock
person-fill-slash
person-fill-up
person-fill-x
person-gear
person-heart
person-hearts
person-lines-fill
person-lock
person-plus
person-plus-fill
person-raised-hand
person-rolodex
person-slash
person-square
person-standing
person-standing-dress
person-up
person-vcard
person-vcard-fill
person-video
person-video2
person-video3
person-walking
person-wheelchair
person-workspace
person-x
person-x-fill
phone
phone-fill
phone-flip
phone-landscape
phone-landscape-fill
phone-vibrate
phone-vibrate-fill
pie-chart
pie-chart-fill
piggy-bank
piggy-bank-fill
pin
pin-angle
pin-angle-fill
pin-fill
pin-map
pin-map-fill
pinterest
pip
pip-fill
play
play-btn
play-btn-fill
play-circle
play-circle-fill
play-fill
playstation
plug
plug-fill
plugin
plus
plus-circle
plus-circle-dotted
plus-circle-fill
plus-lg
plus-slash-minus
plus-square
plus-square-dotted
plus-square-fill
postage
postage-fill
postage-heart
postage-heart-fill
postcard
postcard-fill
postcard-heart
postcard-heart-fill
power
prescription
prescription2
printer
printer-fill
projector
projector-fill
puzzle
puzzle-fill
qr-code
qr-code-scan
question
question-circle
question-circle-fill
question-diamond
question-diamond-fill
question-lg
question-octagon
question-octagon-fill
question-square
question-square-fill
quora
quote
r-circle
r-circle-fill
r-square
r-square-fill
radar
radioactive
rainbow
receipt
receipt-cutoff
reception0
reception1
reception2
reception3
reception4
record
record2
record2-fill
record-btn
record-btn-fill
record-circle
record-circle-fill
record-fill
recycle
reddit
regex
repeat
repeat1
reply
reply-all
reply-all-fill
reply-fill
rewind
rewind-btn
rewind-btn-fill
rewind-circle
rewind-circle-fill
rewind-fill
robot
rocket
rocket-fill
rocket-takeoff
rocket-takeoff-fill
router
router-fill
rss
rss-fill
rulers
safe
safe2
safe2-fill
safe-fill
save
save2
save2-fill
save-fill
scissors
scooter
screwdriver
sd-card
sd-card-fill
search
search-heart
search-heart-fill
segmented-nav
send
send-arrow-down
send-arrow-down-fill
send-arrow-up
send-arrow-up-fill
send-check
send-check-fill
send-dash
send-dash-fill
send-exclamation
send-exclamation-fill
send-fill
send-plus
send-plus-fill
send-slash
send-slash-fill
send-x
send-x-fill
server
shadows
share
share-fill
shield
shield-check
shield-exclamation
shield-fill
shield-fill-check
shield-fill-exclamation
shield-fill-minus
shield-fill-plus
shield-fill-x
shield-lock
shield-lock-fill
shield-minus
shield-plus
shield-shaded
shield-slash
shield-slash-fill
shield-x
shift
shift-fill
shop
shop-window
shuffle
sign-dead-end
sign-dead-end-fill
sign-do-not-enter
sign-do-not-enter-fill
sign-intersection
sign-intersection-fill
sign-intersection-side
sign-intersection-side-fill
sign-intersection-t
sign-intersection-t-fill
sign-intersection-y
sign-intersection-y-fill
sign-merge-left
sign-merge-left-fill
sign-merge-right
sign-merge-right-fill
sign-no-left-turn
sign-no-left-turn-fill
sign-no-parking
sign-no-parking-fill
sign-no-right-turn
sign-no-right-turn-fill
sign-railroad
sign-railroad-fill
sign-stop
sign-stop-fill
sign-stop-lights
sign-stop-lights-fill
sign-turn-left
sign-turn-left-fill
sign-turn-right
sign-turn-right-fill
sign-turn-slight-left
sign-turn-slight-left-fill
sign-turn-slight-right
sign-turn-slight-right-fill
sign-yield
sign-yield-fill
signal
signpost
signpost2
signpost2-fill
signpost-fill
signpost-split
signpost-split-fill
sim
sim-fill
sim-slash
sim-slash-fill
sina-weibo
skip-backward
skip-backward-btn
skip-backward-btn-fill
skip-backward-circle
skip-backward-circle-fill
skip-backward-fill
skip-end
skip-end-btn
skip-end-btn-fill
skip-end-circle
skip-end-circle-fill
skip-end-fill
skip-forward
skip-forward-btn
skip-forward-btn-fill
skip-forward-circle
skip-forward-circle-fill
skip-forward-fill
skip-start
skip-start-btn
skip-start-btn-fill
skip-start-circle
skip-start-circle-fill
skip-start-fill
skype
slack
slash
slash-circle
slash-circle-fill
slash-lg
slash-square
slash-square-fill
sliders
sliders2
sliders2-vertical
smartwatch
snapchat
snow
snow2
snow3
sort-alpha-down
sort-alpha-down-alt
sort-alpha-up
sort-alpha-up-alt
sort-down
sort-down-alt
sort-numeric-down
sort-numeric-down-alt
sort-numeric-up
sort-numeric-up-alt
sort-up
sort-up-alt
soundwave
sourceforge
speaker
speaker-fill
speedometer
speedometer2
spellcheck
spotify
square
square-fill
square-half
stack
stack-overflow
star
star-fill
star-half
stars
steam
stickies
stickies-fill
sticky
sticky-fill
stop
stop-btn
stop-btn-fill
stop-circle
stop-circle-fill
stop-fill
stoplights
stoplights-fill
stopwatch
stopwatch-fill
strava
stripe
subscript
substack
subtract
suit-club
suit-club-fill
suit-diamond
suit-diamond-fill
suit-heart
suit-heart-fill
suit-spade
suit-spade-fill
suitcase
suitcase2
suitcase2-fill
suitcase-fill
suitcase-lg
suitcase-lg-fill
sun
sun-fill
sunglasses
sunrise
sunrise-fill
sunset
sunset-fill
superscript
symmetry-horizontal
symmetry-vertical
table
tablet
tablet-fill
tablet-landscape
tablet-landscape-fill
tag
tag-fill
tags
tags-fill
taxi-front
taxi-front-fill
telegram
telephone
telephone-fill
telephone-forward
telephone-forward-fill
telephone-inbound
telephone-inbound-fill
telephone-minus
telephone-minus-fill
telephone-outbound
telephone-outbound-fill
telephone-plus
telephone-plus-fill
telephone-x
telephone-x-fill
tencent-qq
terminal
terminal-dash
terminal-fill
terminal-plus
terminal-split
terminal-x
text-center
text-indent-left
text-indent-right
text-left
text-paragraph
text-right
text-wrap
textarea
textarea-resize
textarea-t
thermometer
thermometer-half
thermometer-high
thermometer-low
thermometer-snow
thermometer-sun
threads
threads-fill
three-dots
three-dots-vertical
thunderbolt
thunderbolt-fill
ticket
ticket-detailed
ticket-detailed-fill
ticket-fill
ticket-perforated
ticket-perforated-fill
tiktok
toggle2-off
toggle2-on
toggle-off
toggle-on
toggles
toggles2
tools
tornado
train-freight-front
train-freight-front-fill
train-front
train-front-fill
train-lightrail-front
train-lightrail-front-fill
translate
transparency
trash
trash2
trash2-fill
trash3
trash3-fill
trash-fill
tree
tree-fill
trello
triangle
triangle-fill
triangle-half
trophy
trophy-fill
tropical-storm
truck
truck-flatbed
truck-front
truck-front-fill
tsunami
tv
tv-fill
twitch
twitter
twitter-x
type
type-bold
type-h1
type-h2
type-h3
type-h4
type-h5
type-h6
type-italic
type-strikethrough
type-underline
ubuntu
ui-checks
ui-checks-grid
ui-radios
ui-radios-grid
umbrella
umbrella-fill
unindent
union
unity
universal-access
universal-access-circle
unlock
unlock-fill
upc
upc-scan
upload
usb
usb-c
usb-c-fill
usb-drive
usb-drive-fill
usb-fill
usb-micro
usb-micro-fill
usb-mini
usb-mini-fill
usb-plug
usb-plug-fill
usb-symbol
valentine
valentine2
vector-pen
view-list
view-stacked
vignette
vimeo
vinyl
vinyl-fill
virus
virus2
voicemail
volume-down
volume-down-fill
volume-mute
volume-mute-fill
volume-off
volume-off-fill
volume-up
volume-up-fill
vr
wallet
wallet2
wallet-fill
watch
water
webcam
webcam-fill
wechat
whatsapp
wifi
wifi1
wifi2
wifi-off
wikipedia
wind
window
window-dash
window-desktop
window-dock
window-fullscreen
window-plus
window-sidebar
window-split
window-stack
window-x
windows
wordpress
wrench
wrench-adjustable
wrench-adjustable-circle
wrench-adjustable-circle-fill
x
x-circle
x-circle-fill
x-diamond
x-diamond-fill
x-lg
x-octagon
x-octagon-fill
x-square
x-square-fill
xbox
yelp
yin-yang
youtube
zoom-in
zoom-out

Property (Click to sort ascending)	Type (Click to sort ascending)	Default	Description
`animation` v2.7.0+	`String`		Animate the icon. Supported built-in animations are 'cylon', 'fade', 'pulse', 'spin' and 'throb'
`flip-h`	`Boolean`	`false`	Flips the icon horizontally
`flip-v`	`Boolean`	`false`	Flips the icon vertically
`font-scale`	`Number` or `String`	`1`	Scale the icons current font size
`icon`	`String`		Name of icon to render. The corresponding icon component must be installed
`rotate`	`Number` or `String`	`0`	Rotates the icon by the specified number of degrees. Positive values rotate clockwise, while negative values rotate counterclockwise
`scale`	`Number` or `String`	`1`	Scales the icon's SVG, without increasing the font size
`shift-h`	`Number` or `String`	`0`	Moves the icon horizontally. Positive numbers will shift the icon right, negative left. Value is in 1/16em units
`shift-v`	`Number` or `String`	`0`	Moves the icon vertically. Positive numbers will shift the icon up, negative down. Value is in 1/16em units
`stacked` v2.3.0+	`Boolean`	`false`	Set this prop to true when placing inside a BIconstack component
`title` v2.17.0+	`String`		Text content to place in the title
`variant`	`String`		Contextual color variant. By default the icon inherits the current text color

Component	Named Export	Import Path
`<b-icon>`	`BIcon`	`bootstrap-vue`
`<b-icon0-circle>`	`BIcon0Circle`	`bootstrap-vue`
`<b-icon0-circle-fill>`	`BIcon0CircleFill`	`bootstrap-vue`
`<b-icon0-square>`	`BIcon0Square`	`bootstrap-vue`
`<b-icon0-square-fill>`	`BIcon0SquareFill`	`bootstrap-vue`
`<b-icon123>`	`BIcon123`	`bootstrap-vue`
`<b-icon1-circle>`	`BIcon1Circle`	`bootstrap-vue`
`<b-icon1-circle-fill>`	`BIcon1CircleFill`	`bootstrap-vue`
`<b-icon1-square>`	`BIcon1Square`	`bootstrap-vue`
`<b-icon1-square-fill>`	`BIcon1SquareFill`	`bootstrap-vue`
`<b-icon2-circle>`	`BIcon2Circle`	`bootstrap-vue`
`<b-icon2-circle-fill>`	`BIcon2CircleFill`	`bootstrap-vue`
`<b-icon2-square>`	`BIcon2Square`	`bootstrap-vue`
`<b-icon2-square-fill>`	`BIcon2SquareFill`	`bootstrap-vue`
`<b-icon3-circle>`	`BIcon3Circle`	`bootstrap-vue`
`<b-icon3-circle-fill>`	`BIcon3CircleFill`	`bootstrap-vue`
`<b-icon3-square>`	`BIcon3Square`	`bootstrap-vue`
`<b-icon3-square-fill>`	`BIcon3SquareFill`	`bootstrap-vue`
`<b-icon4-circle>`	`BIcon4Circle`	`bootstrap-vue`
`<b-icon4-circle-fill>`	`BIcon4CircleFill`	`bootstrap-vue`
`<b-icon4-square>`	`BIcon4Square`	`bootstrap-vue`
`<b-icon4-square-fill>`	`BIcon4SquareFill`	`bootstrap-vue`
`<b-icon5-circle>`	`BIcon5Circle`	`bootstrap-vue`
`<b-icon5-circle-fill>`	`BIcon5CircleFill`	`bootstrap-vue`
`<b-icon5-square>`	`BIcon5Square`	`bootstrap-vue`
`<b-icon5-square-fill>`	`BIcon5SquareFill`	`bootstrap-vue`
`<b-icon6-circle>`	`BIcon6Circle`	`bootstrap-vue`
`<b-icon6-circle-fill>`	`BIcon6CircleFill`	`bootstrap-vue`
`<b-icon6-square>`	`BIcon6Square`	`bootstrap-vue`
`<b-icon6-square-fill>`	`BIcon6SquareFill`	`bootstrap-vue`
`<b-icon7-circle>`	`BIcon7Circle`	`bootstrap-vue`
`<b-icon7-circle-fill>`	`BIcon7CircleFill`	`bootstrap-vue`
`<b-icon7-square>`	`BIcon7Square`	`bootstrap-vue`
`<b-icon7-square-fill>`	`BIcon7SquareFill`	`bootstrap-vue`
`<b-icon8-circle>`	`BIcon8Circle`	`bootstrap-vue`
`<b-icon8-circle-fill>`	`BIcon8CircleFill`	`bootstrap-vue`
`<b-icon8-square>`	`BIcon8Square`	`bootstrap-vue`
`<b-icon8-square-fill>`	`BIcon8SquareFill`	`bootstrap-vue`
`<b-icon9-circle>`	`BIcon9Circle`	`bootstrap-vue`
`<b-icon9-circle-fill>`	`BIcon9CircleFill`	`bootstrap-vue`
`<b-icon9-square>`	`BIcon9Square`	`bootstrap-vue`
`<b-icon9-square-fill>`	`BIcon9SquareFill`	`bootstrap-vue`
`<b-icon-{icon-name}>`	`BIcon{IconName}`	`bootstrap-vue`
`<b-iconstack>`	`BIconstack`	`bootstrap-vue`

Usage

Module bundlers

Browser

Icon components

Variants

Sizing

Styling

SVG transforms

Flipping

Rotate

Scale

Shifting

Animated icons

Stacking icons

Stacked icon animation

Using in components

Buttons

Button Groups and toolbars

Button Group

Button Toolbar

Input Groups

List Groups

Dropdowns

Working with SVGs

Icons

Component reference

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Properties

Importing individual components

Importing as a Vue.js plugin