Bootstrap

The Bootstrap Blog

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

Bootstrap Icons v1.2.2

@mdo December 23, 2020

We’re ironing out the kinks in our new font files with Bootstrap Icons v1.2.2! We went back to the Figma file and ironed out all the fill-rule details to ensure our SVGs translated into font files properly.

We also snuck in a few bug fixes to existing icons, docs, and some slight visual improvements to some existing icons. Get the details below!

Font files

Our icons fonts are (fingers crossed!) free of visual glitches that made so many unusable across Windows devices. For some reason macOS and iOS had no problems, but Windows butchered the font files. Turns out this was a result of inconsistent fill-rule values in our icons, and some font formats and renderers only support a non-zero fill rule. We revisited nearly every icon and got it all sorted out.

Icon fonts

Massive shoutout to the Figma Fill Rule Editor plugin that made this relatively quick and painless to update. You can even see in the plugin’s image below how this rule affects rendering of SVGs.

Figma Fill Rule Editor plugin

Check out the PR for what’s changed under the hood.

Updated icons

Revised icons

A few icons got touched up with the work for our font files to clean up paths and make them more visually pleasing.

  • Locks are a little more legible—they’re taller and narrower.
  • Laptops now have a half pixel gap between their base and screen, making them look a little sleeker.
  • Shields are 1px taller now, with their inner icons now raised 1px as well. No reason to make them not take up the full viewBox.
  • Stopwatch icons look more like actual stopwatches with separate start/stop and lap buttons.
  • The bricks icon has its missing grout line restored.
  • Renamed patch fill icons to fix typos in their file names (fll to fill).

Have some other refinements we should consider? Open an issue to tell us about it.

Last but not least, we ironed out some docs issues. Our navbar is fully functional and inline with the v5 beta site. We also added new aliases for icon filtering on homepage.

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