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.
npm install @uiw/bootstrap-icons --save
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
.
<svg class="icon" aria-hidden="true">
<use xlink:href="node_modules/@uiw/bootstrap-icons/fonts/btfont.symbol.svg#btfont-javascript"></use>
</svg>
<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"></span>
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>
Icons are used as components. v1.3.0+
support.
import { Activity, Wifi } from '@uiw/bootstrap-icons';
import { Activity } from '@uiw/bootstrap-icons/Activity';
<Activity style={{ fill: 'red' }} />
<Wifi height="36" />
To use SVG images as React components directly, webpack loader support is required.
Install dependencies:
yarn add @svgr/webpack file-loader
Configure webpack loader:
// 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:
import { ReactComponent as ComLogo } from '@uiw/bootstrap-icons/svg/wifi.svg';
<ComLogo />
Custom Icon Component
Create an Icon
component.
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) => <path key={i} d={d} fillRule="evenodd" />)
}
export default class Icon extends React.PureComponent {
render() {
const { type, color } = this.props;
if (type == null || typeof type === "boolean") {
return null;
}
return (
<svg fill={color} viewBox={`0 0 24 24`}>{this.renderSvgPaths(type)}</svg>
);
}
}
Use the Icon
component:
const demo = () => {
return (
<Icon type="wifi" />
)
}
-
@uiw/icons
The premium icon font for@uiwjs
Component Library.
As always, thanks to our amazing contributors!
Made with github-action-contributors.
Created By svgtofont, Licensed under the MIT License.