Bootstrap

The Bootstrap Blog

News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons.

Bootstrap Icons v1.3.0

@mdo January 07, 2021

Say hello to over 60 new icons with Bootstrap Icons v1.3.0! We focused our efforts on filling in some holes and expanding some coverage of a few categories. We’re super happy with how the new additions came out and hope y’all love them, too!

As usual, we also snuck in some bug fixes to existing icons and ours docs. After this release, we’re back to focusing on shipping updates to Bootstrap v5 and v4. More on that soon, and in the mean time, enjoy the new icons!

60+ new icons

New icons in v1.3.0

Here’s a look at the new icons in v1.3.0:

  • Added window-dock and window-sidebar
  • Added two symmetry icons
  • Added new stack icon
  • Added two speedometer icons
  • Added four save icons
  • Added rulers icon
  • Added filled variations for phone-vibrate, mouse, mouse2, mouse3, and four hand icons
  • Added several border icons
  • Added paint bucket
  • Added four new badges (3D, AR, VR, WC)
  • Added four lightbulb icons
  • Added eyedropper
  • Added mask icon
  • Added three color palette icons
  • Added layer-forward and layer-backward
  • Added two eraser icons
  • Added two megaphone icons
  • Added four push pin icons
  • Added Whatsapp and Telegram social icons
  • Added dotted circle dash, circle plus, square dash, and square plus

Have some ideas for new icons we should consider? Open an issue to tell us about it!

CDN quickstart with icon fonts

Since we added icon fonts in v1.2.0, it’s been possible to use a CDN to deliver and use Bootstrap Icons in seconds. Include the stylesheet, place short HTML snippets where you want icons, and you’re done! If you want to include it yourself, here’s how.

  1. Include the Bootstrap Icons font stylesheet in the <head> of your website. Or, use @import to include the stylesheet that way.

    <!-- Option 1: Include in HTML -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

    /* Option 2: Import via CSS */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");

  2. Add HTML snippets to include Bootstrap Icons where desired.

    <i class="bi-alarm"></i>

Want to see it in action? We’ve put together a helpful CodePen demo for using Bootstrap Icons fonts via CDN.

ProTip: Most browsers do not allow SVG sprites to be used across domains, which is why having icon fonts (when SVGs are the preferable and more accessible method of delivering icons) are so useful. Whenever possible, please use SVGs over icon fonts.

Install

To get started, install via npm:

npm i bootstrap-icons

You can also download the release from GitHub, or download just the SVGs and fonts (without the rest of the repository files).

Figma

For the Figma users out there, you can also snag the icons from Figma.

Related posts