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.5.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/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@latest/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/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@latest/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>

<!-- icons-individual-usage.vue -->

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>

<!-- icons-helper-usage.vue -->

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>

<!-- icons-color-variants.vue -->

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>

<!-- icons-color-css.vue -->

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:

<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>

<!-- icons-size-inherit.vue -->

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>

<!-- icons-size-css.vue -->

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>

<!-- icons-size-font-size-prop.vue -->

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>

<!-- icons-styling.vue -->

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>

<!-- icons-transform-flip.vue -->

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>

<!-- icons-transform-rotate.vue -->

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>

<!-- icons-transform-scale.vue -->

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>

<!-- icons-transform-shift.vue -->

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.

<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>

<!-- b-icon-aminations.vue -->

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>

<!-- b-icon-aminations-transforms.vue -->

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-iconsstack.vue -->

<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>

<!-- b-iconstack-animation.vue -->

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>

<!-- b-iconstack-animation-child-icons.vue -->

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>

<!-- icons-buttons.vue -->

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>

<!-- icons-button-group.vue -->

<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>

<!-- icons-button-toolbar.vue -->

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>

<!-- icons-input-groups.vue -->

List Groups

<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>

<!-- icons-list-groups.vue -->

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>

<!-- icons-dropdowns.vue -->

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

alarm
alarm-fill
align-bottom
align-center
align-end
align-middle
align-start
align-top
alt
app
app-indicator
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-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-angle-contract
arrows-angle-expand
arrows-collapse
arrows-expand
arrows-fullscreen
arrows-move
aspect-ratio
aspect-ratio-fill
asterisk
at
award
award-fill
back
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-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-plus
bag-plus-fill
bag-x
bag-x-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
bell
bell-fill
bell-slash
bell-slash-fill
bezier
bezier2
bicycle
binoculars
binoculars-fill
blank
blockquote-left
blockquote-right
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
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
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-seam
braces
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
broadcast
broadcast-pin
brush
brush-fill
bucket
bucket-fill
bug
bug-fill
building
bullseye
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-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-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
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
cast
chat
chat-dots
chat-dots-fill
chat-fill
chat-left
chat-left-dots
chat-left-dots-fill
chat-left-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-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-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
clipboard-check
clipboard-data
clipboard-minus
clipboard-plus
clipboard-x
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-haze1
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
cpu
cpu-fill
credit-card
credit-card2-back
credit-card2-back-fill
credit-card2-front
credit-card2-front-fill
credit-card-fill
crop
cup
cup-fill
cup-straw
currency-bitcoin
currency-dollar
currency-euro
currency-exchange
currency-pound
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
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
distribute-horizontal
distribute-vertical
door-closed
door-closed-fill
door-open
door-open-fill
dot
download
droplet
droplet-fill
droplet-half
earbuds
easel
easel-fill
egg
egg-fill
egg-fried
eject
eject-fill
emoji-angry
emoji-angry-fill
emoji-dizzy
emoji-dizzy-fill
emoji-expressionless
emoji-expressionless-fill
emoji-frown
emoji-frown-fill
emoji-heart-eyes
emoji-heart-eyes-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-wink
emoji-wink-fill
envelope
envelope-fill
envelope-open
envelope-open-fill
eraser
eraser-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
eye
eye-fill
eye-slash
eye-slash-fill
eyedropper
eyeglasses
facebook
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
film
filter
filter-circle
filter-circle-fill
filter-left
filter-right
filter-square
filter-square-fill
flag
flag-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
fullscreen
fullscreen-exit
funnel
funnel-fill
gear
gear-fill
gear-wide
gear-wide-connected
gem
gender-ambiguous
gender-female
gender-male
gender-trans
geo
geo-alt
geo-alt-fill
geo-fill
gift
gift-fill
github
globe
globe2
google
graph-down
graph-up
grid
grid1x2
grid1x2-fill
grid3x2
grid3x2-gap
grid3x2-gap-fill
grid3x3
grid3x3-gap
grid3x3-gap-fill
grid-fill
grip-horizontal
grip-vertical
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
headphones
headset
headset-vr
heart
heart-fill
heart-half
heptagon
heptagon-fill
heptagon-half
hexagon
hexagon-fill
hexagon-half
hourglass
hourglass-bottom
hourglass-split
hourglass-top
house
house-door
house-door-fill
house-fill
hr
hurricane
image
image-alt
image-fill
images
inbox
inbox-fill
inboxes
inboxes-fill
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
link
link45deg
linkedin
list
list-check
list-nested
list-ol
list-stars
list-task
list-ul
lock
lock-fill
mailbox
mailbox2
map
map-fill
markdown
markdown-fill
mask
mastodon
megaphone
megaphone-fill
menu-app
menu-app-fill
menu-button
menu-button-fill
menu-button-wide
menu-button-wide-fill
menu-down
menu-up
messenger
mic
mic-fill
mic-mute
mic-mute-fill
minecart
minecart-loaded
moisture
moon
moon-fill
moon-stars
moon-stars-fill
mouse
mouse2
mouse2-fill
mouse3
mouse3-fill
mouse-fill
music-note
music-note-beamed
music-note-list
music-player
music-player-fill
newspaper
node-minus
node-minus-fill
node-plus
node-plus-fill
nut
nut-fill
octagon
octagon-fill
octagon-half
option
outlet
paint-bucket
palette
palette2
palette-fill
paperclip
paragraph
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
peace
peace-fill
pen
pen-fill
pencil
pencil-fill
pencil-square
pentagon
pentagon-fill
pentagon-half
people
people-fill
percent
person
person-badge
person-badge-fill
person-bounding-box
person-check
person-check-fill
person-circle
person-dash
person-dash-fill
person-fill
person-lines-fill
person-plus
person-plus-fill
person-square
person-x
person-x-fill
phone
phone-fill
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
pip
pip-fill
play
play-btn
play-btn-fill
play-circle
play-circle-fill
play-fill
plug
plug-fill
plus
plus-circle
plus-circle-dotted
plus-circle-fill
plus-lg
plus-square
plus-square-dotted
plus-square-fill
power
printer
printer-fill
puzzle
puzzle-fill
question
question-circle
question-circle-fill
question-diamond
question-diamond-fill
question-lg
question-octagon
question-octagon-fill
question-square
question-square-fill
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
reply
reply-all
reply-all-fill
reply-fill
rss
rss-fill
rulers
safe
safe2
safe2-fill
safe-fill
save
save2
save2-fill
save-fill
scissors
screwdriver
sd-card
sd-card-fill
search
segmented-nav
server
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
signpost
signpost2
signpost2-fill
signpost-fill
signpost-split
signpost-split-fill
sim
sim-fill
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
smartwatch
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
speaker
speaker-fill
speedometer
speedometer2
spellcheck
square
square-fill
square-half
stack
star
star-fill
star-half
stars
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
subtract
suit-club
suit-club-fill
suit-diamond
suit-diamond-fill
suit-heart
suit-heart-fill
suit-spade
suit-spade-fill
sun
sun-fill
sunglasses
sunrise
sunrise-fill
sunset
sunset-fill
symmetry-horizontal
symmetry-vertical
table
tablet
tablet-fill
tablet-landscape
tablet-landscape-fill
tag
tag-fill
tags
tags-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
terminal
terminal-fill
text-center
text-indent-left
text-indent-right
text-left
text-paragraph
text-right
textarea
textarea-resize
textarea-t
thermometer
thermometer-half
thermometer-high
thermometer-low
thermometer-snow
thermometer-sun
three-dots
three-dots-vertical
toggle2-off
toggle2-on
toggle-off
toggle-on
toggles
toggles2
tools
tornado
translate
trash
trash2
trash2-fill
trash-fill
tree
tree-fill
triangle
triangle-fill
triangle-half
trophy
trophy-fill
tropical-storm
truck
truck-flatbed
tsunami
tv
tv-fill
twitch
twitter
type
type-bold
type-h1
type-h2
type-h3
type-italic
type-strikethrough
type-underline
ui-checks
ui-checks-grid
ui-radios
ui-radios-grid
umbrella
umbrella-fill
union
unlock
unlock-fill
upc
upc-scan
upload
vector-pen
view-list
view-stacked
vinyl
vinyl-fill
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
whatsapp
wifi
wifi1
wifi2
wifi-off
wind
window
window-dock
window-sidebar
wrench
x
x-circle
x-circle-fill
x-diamond
x-diamond-fill
x-lg
x-octagon
x-octagon-fill
x-square
x-square-fill
youtube
zoom-in
zoom-out

Component reference

`<b-icon>`

v2.2.0+ Functional component

View source

<b-icon> Properties

Properties

All property default values are globally configurable.

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

`<b-icon-{icon-name}>`

v2.2.0+ Functional component

<b-icon-{icon-name}> Properties

Properties

All property default values are globally configurable.

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 'spin', 'pulse' and 'cylon'
`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
`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

`<b-iconstack>`

v2.3.0+ Functional component

View source

<b-iconstack> Properties

Properties

All property default values are globally configurable.

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
`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
`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

Individual icon components are not listed here due to the large number of components.

Importing individual components

You can import individual components into your project via the following named exports:

Component	Named Export	Import Path
`<b-icon>`	`BIcon`	`bootstrap-vue`
`<b-icon-{icon-name}>`	`BIcon{IconName}`	`bootstrap-vue`
`<b-iconstack>`	`BIconstack`	`bootstrap-vue`

Example:

import { BIcon } from 'bootstrap-vue'
Vue.component('b-icon', BIcon)

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export	Import Path
`IconsPlugin`	`bootstrap-vue`

Example:

import { IconsPlugin } from 'bootstrap-vue'
Vue.use(IconsPlugin)

IconsPlugin is also exported as BootstrapVueIcons.

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

Importing individual components

Importing as a Vue.js plugin