@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
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.
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/[email protected]/font/bootstrap-icons.css">
/* Option 2: Import via CSS */@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");
Add HTML snippets to include Bootstrap Icons where desired.
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:
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.
FAQs
While Bootstrap doesn't include an icon set by default, we do have our own comprehensive icon library called Bootstrap Icons. Feel free to use them or any other icon set in your project. We've included details for Bootstrap Icons and other preferred icon sets below.
What format are Bootstrap Icons? ›
Bootstrap doesn't include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.
How to use Bootstrap Icons in npm? ›
Depending on your setup, you can include Bootstrap Icons in a handful of ways.
- Copy-paste SVGs as embedded HTML.
- Reference via <img> element.
- Use the SVG sprite.
- Include via CSS.
Basics. Drag and drop an Icon component from the Component panel to the stage. Double click it to open the Icon browser. In this dialog, you can browse all available icon sets from the dropdown on the top left and search for icons by name.
Is Bootstrap icons free? ›
Free, high quality, open source icon library with over 2,000 icons. Include them anyway you like—SVGs, SVG sprite, or web fonts. Use them with or without Bootstrap in any project.
Why use Bootstrap icons? ›
Benefits of Using Bootstrap Icons
Plus, because they're vector-based images, they scale perfectly no matter what size you make them without any loss in quality. So, no matter how much zooming or resizing needs to be done for your project, these icons will look perfect every time!
How to make icons responsive in Bootstrap? ›
Images in Bootstrap are made responsive with .img-fluid . This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.
Can I change the color of Bootstrap Icons? ›
For instance, changing the color by simply applying the color property in CSS is easy. You can also alter the size of the Bootstrap icons you use in your project. This is possible thanks to the font-size property CSS offers.
How do I insert an icon in HTML? ›
To insert an icon, add the name of the icon class to any inline HTML element. The <i> and <span> elements are widely used to add icons. All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)
Where do I put Bootstrap Icons? ›
Include the Bootstrap Icons font stylesheet in the <head> of your website. Or, use @import to include the stylesheet that way. /* Option 2: Import via CSS */ @import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"); Add HTML snippets to include Bootstrap Icons where desired.
Bootstrap at its core
Built with compatibility in mind, we embrace our bootstrap core and strive to be compatible with the world's largest UI ecosystem. By relying entirely on the Bootstrap stylesheet, React-Bootstrap just works with the thousands of Bootstrap themes you already love.
How to increase the size of Bootstrap Icons? ›
To increase icon sizes relative to their container, use fa-xs , fa-sm , fa-lg (33% increase), or use literal sizes (to scale it from 1x to 10x) fa-2x , fa-3x , fa-4x , fa-5x , fa-6x , fa-7x , fa-8x , fa-9x , fa-10x .
How to add icon in select Bootstrap? ›
To make an icon(image) appear in the selection field, add the attribute data-mdb-icon="*" in <option> , and in place of * provide a link to the image.
How to add an icon inside an input Bootstrap? ›
Bootstrap 5 Icon inside input component
- Use an input field and remove the <label> element.
- If you want to keep the placeholder, add placeholder=" " to the <input> element.
- Then, add an icon along with custom CSS that will correctly position the icon inside the input field.
For those using bootstrap 4 beta you can add max-width on your navbar link to have control on the size of your logo with img-fluid class on the image element. I would suggest you to use either an image or text. So, Remove the text and add it in your image(using Photoshop, maybe).
@mdo January 07, 2021
