Top Related Projects
The iconic SVG, font, and CSS toolkit
Simply beautiful open-source icons
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
A scalable set of icons handcrafted with <3 by GitHub
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Material Design icons by Google (Material Symbols)
Quick Overview
Bootstrap Icons is an open-source SVG icon library featuring over 1,800 glyphs, designed to work seamlessly with Bootstrap but also usable with any project. It provides a comprehensive set of icons for web developers and designers, offering flexibility in implementation and customization.
Pros
- Large collection of high-quality, scalable SVG icons
- Easy integration with Bootstrap and other frameworks
- Regular updates and additions to the icon set
- Multiple ways to include and use icons (SVG, icon font, or embedded)
Cons
- May require additional setup for non-Bootstrap projects
- Large library size if all icons are included, potentially impacting load times
- Limited advanced icon features compared to some paid icon libraries
- Potential for design inconsistency if mixed with other icon sets
Code Examples
- Using Bootstrap Icons as an SVG:
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
- Using Bootstrap Icons as a font:
<i class="bi-alarm"></i>
- Using Bootstrap Icons with custom styling:
<svg class="bi text-danger" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#exclamation-triangle-fill"/>
</svg>
Getting Started
To use Bootstrap Icons in your project:
-
Install via npm:
npm i bootstrap-icons -
Include the CSS in your HTML:
<link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css"> -
Use icons in your HTML:
<i class="bi-heart"></i> <i class="bi-heart-fill"></i> <i class="bi-toggle-on"></i>
Alternatively, you can use the SVG files directly or include them via CDN. Refer to the official documentation for more detailed instructions and options.
Competitor Comparisons
The iconic SVG, font, and CSS toolkit
Pros of Font-Awesome
- Larger icon set with over 7,000 icons, including both free and paid options
- Offers additional features like icon stacking and power transforms
- Well-established with a large community and extensive documentation
Cons of Font-Awesome
- Larger file size, which may impact page load times
- Some advanced features and icons require a paid subscription
- More complex implementation compared to simpler icon libraries
Code Comparison
Font-Awesome (using SVG with JavaScript):
<script src="https://kit.fontawesome.com/your-kit-code.js" crossorigin="anonymous"></script>
<i class="fas fa-user"></i>
Bootstrap Icons:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<i class="bi bi-person"></i>
Both libraries offer easy-to-use implementations, but Font-Awesome requires a kit code or more complex setup for self-hosting. Bootstrap Icons provides a simpler approach with a straightforward CSS import.
Font-Awesome offers more customization options and a larger variety of icons, while Bootstrap Icons focuses on simplicity and integration with the Bootstrap framework. The choice between the two depends on project requirements, desired features, and performance considerations.
Simply beautiful open-source icons
Pros of Feather
- Minimalist and clean design aesthetic
- Smaller icon set, potentially easier to navigate
- SVG-based, allowing for easy customization and scaling
Cons of Feather
- Limited icon selection compared to Bootstrap Icons
- Less frequent updates and additions to the icon library
- May not cover all use cases for larger, more complex projects
Code Comparison
Feather:
<i data-feather="circle"></i>
<script>
feather.replace()
</script>
Bootstrap Icons:
<i class="bi bi-circle"></i>
<!-- No additional JavaScript required -->
Summary
Feather offers a sleek, minimalist icon set that's ideal for projects prioritizing a clean aesthetic. It's SVG-based, allowing for easy customization but has a more limited selection. Bootstrap Icons provides a larger, more comprehensive library with frequent updates, making it suitable for diverse project needs. While Feather requires a JavaScript call to render icons, Bootstrap Icons can be used with simple CSS classes, potentially simplifying implementation for some developers.
Both libraries have their strengths, and the choice between them often depends on the specific project requirements, design preferences, and the need for a wider variety of icons versus a more curated, minimalist set.
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
Pros of Ionicons
- Offers a wider variety of icon styles (outline, filled, sharp)
- Includes animations for some icons
- Better integration with Ionic Framework
Cons of Ionicons
- Smaller icon set compared to Bootstrap Icons
- Less frequent updates and releases
- More complex implementation for non-Ionic projects
Code Comparison
Ionicons usage:
<ion-icon name="heart"></ion-icon>
Bootstrap Icons usage:
<i class="bi bi-heart"></i>
Additional Notes
Both Ionicons and Bootstrap Icons are popular open-source icon libraries, but they cater to different needs. Ionicons is closely tied to the Ionic Framework ecosystem, making it an excellent choice for Ionic-based projects. It offers more flexibility in icon styles and some unique features like animations.
Bootstrap Icons, on the other hand, provides a larger collection of icons and is designed to work seamlessly with Bootstrap. It has a simpler implementation process and more frequent updates, making it a solid choice for general web development projects.
The choice between the two largely depends on the specific project requirements, framework preferences, and desired icon styles. Both libraries offer high-quality, scalable SVG icons that can enhance the visual appeal of web applications.
A scalable set of icons handcrafted with <3 by GitHub
Pros of Octicons
- Specifically designed for GitHub's UI, providing a cohesive look for GitHub-related projects
- Includes unique icons tailored for developer workflows and version control concepts
- Offers both SVG and PNG formats for flexibility in implementation
Cons of Octicons
- Smaller icon set compared to Icons, limiting options for general-purpose use
- Less frequent updates and additions to the icon library
- More focused on development-related icons, which may not suit all project types
Code Comparison
Octicons usage:
<svg class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>
Icons usage:
<svg class="bi bi-github" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Pros of Tabler Icons
- Larger icon set with over 4,200 icons compared to Bootstrap Icons' 1,800+
- Includes both SVG and web font versions for flexible implementation
- Offers a wider variety of icon styles and categories
Cons of Tabler Icons
- Less established and potentially less widely recognized than Bootstrap Icons
- May have a steeper learning curve due to the larger number of icons
- Could be overkill for projects that only need basic iconography
Code Comparison
Bootstrap Icons usage:
<i class="bi bi-heart-fill"></i>
Tabler Icons usage:
<svg class="icon icon-tabler icon-tabler-heart">
<use xlink:href="path/to/tabler-sprite.svg#tabler-heart"></use>
</svg>
Both libraries offer simple implementation, but Tabler Icons provides more flexibility with its SVG sprite approach. Bootstrap Icons focuses on simplicity and ease of use, while Tabler Icons offers more customization options at the cost of slightly more complex markup.
Overall, the choice between these icon libraries depends on project requirements, desired icon variety, and implementation preferences. Bootstrap Icons may be better for quick, straightforward projects, while Tabler Icons could be ideal for more comprehensive design systems or applications requiring a diverse icon set.
Material Design icons by Google (Material Symbols)
Pros of Material Design Icons
- Extensive collection with over 2,000 icons in various styles and themes
- Comprehensive design system integration with Google's Material Design
- Available in multiple formats (SVG, PNG, font) for versatile usage
Cons of Material Design Icons
- Larger file size due to the extensive collection
- May require more effort to customize or modify icons
- Less frequent updates compared to Icons
Code Comparison
Material Design Icons:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">favorite</i>
Icons:
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
Key Differences
- Material Design Icons offers a more extensive collection, while Icons focuses on a curated set of essential icons
- Icons provides a more lightweight solution with easier customization options
- Material Design Icons integrates seamlessly with Google's design system, whereas Icons aligns with Bootstrap's design principles
Use Cases
- Choose Material Design Icons for projects following Google's Material Design guidelines or requiring a vast icon library
- Opt for Icons when working with Bootstrap or needing a smaller, more manageable icon set with easy customization
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Bootstrap Icons
Official open source SVG icon library for Bootstrap with over 2,000 icons.
Explore Bootstrap Icons »
Bootstrap
·
Themes
·
Blog
Install
Bootstrap Icons are packaged up and published to npm. We only include the processed SVGs in this packageâit's up to you and your team to implement. Read our docs for usage instructions.
npm i bootstrap-icons
For those using Packagist, you can also install Bootstrap Icons via Composer:
composer require twbs/bootstrap-icons
Usage
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
See the docs for more information.
Development
Clone the repo, install dependencies, and start the Hugo server locally.
git clone https://github.com/twbs/icons/
cd icons
npm i
npm start
Then open http://localhost:4000 in your browser.
npm scripts
Here are some key scripts you'll use during development. Be sure to look to our package.json or npm run output for a complete list of scripts.
| Script | Description |
|---|---|
start | Alias for running docs-serve |
docs-serve | Starts a local Hugo server |
pages | Generates permalink pages for each icon with template Markdown |
icons | Processes and optimizes SVGs in icons directory, generates fonts and sprite |
Adding SVGs
Icons are typically only added by @mdo, but exceptions can be made. New glyphs are designed in Figma first on a 16x16px grid, then exported as flattened SVGs with fill (no stroke). Once a new SVG icon has been added to the icons directory, we use an npm script to:
- Optimize our SVGs with SVGO.
- Modify the SVGs source code, removing all attributes before setting new attributes and values in our preferred order.
Use npm run icons to run the script, run npm run pages to build permalink pages, complete those pages, and, finally, commit the results in a new branch for updating.
Warning: Please exclude any auto-generated files, like font/** and bootstrap-icons.svg from your branch because they cause conflicts, and we generally update the dist files before a release.
Publishing
Documentation is published automatically when a new Git tag is published. See our GitHub Actions and package.json for more information.
License
Author
Top Related Projects
The iconic SVG, font, and CSS toolkit
Simply beautiful open-source icons
Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎
A scalable set of icons handcrafted with <3 by GitHub
A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Material Design icons by Google (Material Symbols)
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot