https://github.com/uiwjs/bootstrap-icons
Official open source SVG icon library for Bootstrap.
https://github.com/uiwjs/bootstrap-icons
bootstrap bootstrap-icons css font icon-classname icons svg-icons
Last synced: 4 months ago
JSON representation
Official open source SVG icon library for Bootstrap.
- Host: GitHub
- URL: https://github.com/uiwjs/bootstrap-icons
- Owner: uiwjs
- License: mit
- Created: 2020-09-06T03:08:00.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-12-08T23:21:01.000Z (over 1 year ago)
- Last Synced: 2025-10-02T05:27:57.843Z (9 months ago)
- Topics: bootstrap, bootstrap-icons, css, font, icon-classname, icons, svg-icons
- Homepage: https://uiwjs.github.io/bootstrap-icons/
- Size: 9.67 MB
- Stars: 9
- Watchers: 2
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Bootstrap Icons Font
Official open source SVG icon library for Bootstrap.
Explore Bootstrap Icons »
Visit **[https://uiwjs.github.io/bootstrap-icons/](https://uiwjs.github.io/bootstrap-icons/index.html)** 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](https://opensource.org/licenses/MIT). Use them wherever you see fit, personal or commercial.
## 1,100+ icons
[](https://icons.getbootstrap.com)
## Install
```bash
npm install @uiw/bootstrap-icons --save
```
## Usage
You can use [https://uiwjs.github.io/bootstrap-icons/](https://uiwjs.github.io/bootstrap-icons/index.html) 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:
```bash
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
```xml
```
### Unicode
```html
.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;
}
```
### Class Name
Support for `.less` and `.css` styles references.
```html
```
### Used in React
Icons are used as components. `v1.3.0+` support.
```jsx
import { Activity, Wifi } from '@uiw/bootstrap-icons';
import { Activity } from '@uiw/bootstrap-icons/Activity';
```
To use SVG images as React components directly, webpack loader support is required.
Install dependencies:
```bash
yarn add @svgr/webpack file-loader
```
Configure webpack loader:
```js
// webpack.config.js
{
test: /\.svg$/,
use: [
{
loader: require.resolve('@svgr/webpack'),
options: {
prettier: false,
svgo: false,
svgoConfig: {
plugins: [{ removeViewBox: false }],
},
titleProp: true,
ref: true,
},
},
{
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash].[ext]',
},
},
],
issuer: {
and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
},
},
```
You can then import the SVG as a React component like this:
```javascript
import { ReactComponent as ComLogo } from '@uiw/bootstrap-icons/svg/wifi.svg';
```
**Custom Icon Component**
Create an `Icon` component.
```jsx
import React from 'react';
import svgPaths from '@uiw/icons/fonts/w-icon.json';
const renderSvgPaths = (type) => {
const pathStrings = svgPaths[type];
if (pathStrings == null) {
return null
}
return pathStrings.map((d, i) => )
}
export default class Icon extends React.PureComponent {
render() {
const { type, color } = this.props;
if (type == null || typeof type === "boolean") {
return null;
}
return (
{this.renderSvgPaths(type)}
);
}
}
```
Use the `Icon` component:
```jsx
const demo = () => {
return (
)
}
```
## Related
- [`@uiw/icons`](https://github.com/uiwjs/icons) The premium icon font for [`@uiwjs`](https://github.com/uiwjs) Component Library.
## Contributors
As always, thanks to our amazing contributors!
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Created By [svgtofont](https://github.com/jaywcjlove/svgtofont), Licensed under the [MIT License](https://opensource.org/licenses/MIT).