# Bootstrap 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` v{{ bootstrapIconsVersion }}](https://icons.getbootstrap.com/) 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. Icon components were added in BootstrapVue release `v2.2.0`.

Note: Bootstrap's Icon SVGs are currently in the alpha release stage, and may be subject to sweeping changes. Icons use BootstrapVue's custom CSS for additional styling compensation due to Bootstrap Icons' <svg> current vertical alignment issues. This may change in future releases of BootstrapVue.

## Icons The library includes over 300 icons. Use the explorer below to search and browse the available icons.

## 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](#variants) section, and to change the size of the icon refer to the [Sizing](#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:** ```js import Vue from 'vue' import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue' Vue.use(BootstrapVue) Vue.use(BootstrapVueIcons) ``` Or ```js import Vue from 'vue' import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' Vue.use(BootstrapVue) Vue.use(IconsPlugin) ``` **Importing specific icons:** Making them globally available: ```js 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: ```js 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. ```js import { BootstrapVueIcons } from 'bootstrap-vue' import 'bootstrap-vue/dist/bootstrap-vue-icons.min.css' Vue.use(BootstrapVueIcons) ``` Or if using the icons SCSS source: ```js 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. ### Browser Icons are **not** installed by default in the UMD browser build, so you must explicitly include the icons library: ```html ``` If using just the icons: ```html ``` ### Icon components You can either uses individual icon components, or use the icon helper component ``, to place icons in your project templates. All individual icon components are prefixed with the name ``, where `{name}` is one of the icon names listed in the [Icons](#icons) section above. **Using individual icon components:** ```html ``` **Using the `` helper component:** ```html ``` **Note:** when using ``, 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: ```html ``` You can also use custom CSS to set the icon color, either via direct `style` attribute, or via custom classes: ```html ``` The `variant` prop places the [color utility class](/docs/reference/color-variants) `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: ```html ``` You can also use custom CSS to set the icon size, either via direct `style` attribute, or via custom classes: ```html ``` You can also use the prop `font-scale` to scale the icon's current font size by the specified factor: ```html ``` Also see the [scaling transforms](#scale) section below for additional sizing options. ## Styling With the use of Bootstrap's border and background [utility classes](/docs/reference/utility-classes), you can create various styling effects: ```html ``` ## Transforms BootstrapVue icons provide several props for applying basic SVG transforms to the `

``` ### 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. ```html ``` Note that any [flipping](#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. ```html ``` 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. ```html ``` 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](/docs/reference/utility-classes). ## Stacking icons v2.3.0+ Combine icons together via the use of the component `` and the `stacked` prop on individual icons (`` or ``) to create complex icons: ```html ``` `` supports the same `variant`, `font-size`, 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 `` ## 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 `

Settings

Pay now

Logout

``` ### Button groups and toolbars #### Button Group ```html ``` #### Button Toolbar ```html ``` ### Input groups ```html ``` ### List groups ```html ``` ### Dropdowns ```html ``` ## 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 `` 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.