@uiw/bootstrap-icons

Official open source SVG icon library for Bootstrap.

Usage no npm install needed!

<script type="module">
  import uiwBootstrapIcons from 'https://cdn.skypack.dev/@uiw/bootstrap-icons';
</script>

README

Bootstrap logo

Bootstrap Icons Font

Official open source SVG icon library for Bootstrap.
Explore Bootstrap Icons ยป

Visit https://uiwjs.github.io/bootstrap-icons/ and check out the search feature, which has keywords identifying common icon names and styles. For example, if you search for "swift" we call up every icon that could possibly be used as an arrow. We've also included each icon's class name for easy copy/pasting when you're developing!

They are free to use and licensed under MIT. Use them wherever you see fit, personal or commercial.

1,100+ icons

Bootstrap Icons full set

Install

npm install @uiw/bootstrap-icons --save

Usage

You can use https://uiwjs.github.io/bootstrap-icons/ to easily find the icon you want to use. Once you've copied the desired icon's CSS classname, simply add the icon and icon's classname, such as archive to an HTML element.

Suppose the font name is defined as btfont, The default home page is unicode, Will generate:

font-class.html
index.html
symbol.html
react
btfont.json
btfont.css
btfont.eot
btfont.less
btfont.svg
btfont.symbol.svg
btfont.ttf
btfont.woff
btfont.woff2

Preview demo font-class.html, symbol.html annd index.html. Automatically generated style btfont.css and btfont.less.

symbol svg

<svg class="icon" aria-hidden="true">
  <use xlink:href="node_modules/@uiw/bootstrap-icons/fonts/btfont.symbol.svg#btfont-javascript"></use>
</svg>

Unicode

<style>
.iconfont {
  font-family: "btfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
</style>
<span class="iconfont">&#59907;</span>

Class Name

Support for .less and .css styles references.

<link rel="stylesheet" type="text/css" href="node_modules/@uiw/bootstrap-icons/fonts/btfont.css">
<i class="btfont-javascript"></i>

React

Icons are used as components. v1.3.0+ support.

import { Activity, Wifi } from '@uiw/bootstrap-icons';

<Activity style={{ fill: 'red' }} />
<Wifi height="36" />

Related

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Created By svgtofont, Licensed under the MIT License.