bootstrap-icons
Version:
Official open source SVG icon library for Bootstrap
1,645 lines (1,640 loc) • 160 kB
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bootstrap-icons</title>
<style>
.icons {
display: grid;
max-width: 100%;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr) );
gap: 1.25rem;
}
.icon {
background-color: var(--bs-light);
border-radius: .25rem;
}
.bi {
margin: .25rem;
font-size: 2.5rem;
}
.label {
font-family: var(--bs-font-monospace);
}
.label {
display: inline-block;
width: 100%;
overflow: hidden;
padding: .25rem;
font-size: .625rem;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-icons.css">
</head>
<body class="text-center">
<h1>bootstrap-icons</h1>
<div class="icons">
<div class="icon">
<i class="bi bi-alarm-fill"></i>
<div class="label">alarm-fill</div>
</div>
<div class="icon">
<i class="bi bi-alarm"></i>
<div class="label">alarm</div>
</div>
<div class="icon">
<i class="bi bi-align-bottom"></i>
<div class="label">align-bottom</div>
</div>
<div class="icon">
<i class="bi bi-align-center"></i>
<div class="label">align-center</div>
</div>
<div class="icon">
<i class="bi bi-align-end"></i>
<div class="label">align-end</div>
</div>
<div class="icon">
<i class="bi bi-align-middle"></i>
<div class="label">align-middle</div>
</div>
<div class="icon">
<i class="bi bi-align-start"></i>
<div class="label">align-start</div>
</div>
<div class="icon">
<i class="bi bi-align-top"></i>
<div class="label">align-top</div>
</div>
<div class="icon">
<i class="bi bi-alt"></i>
<div class="label">alt</div>
</div>
<div class="icon">
<i class="bi bi-app-indicator"></i>
<div class="label">app-indicator</div>
</div>
<div class="icon">
<i class="bi bi-app"></i>
<div class="label">app</div>
</div>
<div class="icon">
<i class="bi bi-archive-fill"></i>
<div class="label">archive-fill</div>
</div>
<div class="icon">
<i class="bi bi-archive"></i>
<div class="label">archive</div>
</div>
<div class="icon">
<i class="bi bi-arrow-90deg-down"></i>
<div class="label">arrow-90deg-down</div>
</div>
<div class="icon">
<i class="bi bi-arrow-90deg-left"></i>
<div class="label">arrow-90deg-left</div>
</div>
<div class="icon">
<i class="bi bi-arrow-90deg-right"></i>
<div class="label">arrow-90deg-right</div>
</div>
<div class="icon">
<i class="bi bi-arrow-90deg-up"></i>
<div class="label">arrow-90deg-up</div>
</div>
<div class="icon">
<i class="bi bi-arrow-bar-down"></i>
<div class="label">arrow-bar-down</div>
</div>
<div class="icon">
<i class="bi bi-arrow-bar-left"></i>
<div class="label">arrow-bar-left</div>
</div>
<div class="icon">
<i class="bi bi-arrow-bar-right"></i>
<div class="label">arrow-bar-right</div>
</div>
<div class="icon">
<i class="bi bi-arrow-bar-up"></i>
<div class="label">arrow-bar-up</div>
</div>
<div class="icon">
<i class="bi bi-arrow-clockwise"></i>
<div class="label">arrow-clockwise</div>
</div>
<div class="icon">
<i class="bi bi-arrow-counterclockwise"></i>
<div class="label">arrow-counterclockwise</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down-circle-fill"></i>
<div class="label">arrow-down-circle-fill</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down-circle"></i>
<div class="label">arrow-down-circle</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down-left-circle-fill"></i>
<div class="label">arrow-down-left-circle-fill</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down-left-circle"></i>
<div class="label">arrow-down-left-circle</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down-left-square-fill"></i>
<div class="label">arrow-down-left-square-fill</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down-left-square"></i>
<div class="label">arrow-down-left-square</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down-left"></i>
<div class="label">arrow-down-left</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down-right-circle-fill"></i>
<div class="label">arrow-down-right-circle-fill</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down-right-circle"></i>
<div class="label">arrow-down-right-circle</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down-right-square-fill"></i>
<div class="label">arrow-down-right-square-fill</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down-right-square"></i>
<div class="label">arrow-down-right-square</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down-right"></i>
<div class="label">arrow-down-right</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down-short"></i>
<div class="label">arrow-down-short</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down-square-fill"></i>
<div class="label">arrow-down-square-fill</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down-square"></i>
<div class="label">arrow-down-square</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down-up"></i>
<div class="label">arrow-down-up</div>
</div>
<div class="icon">
<i class="bi bi-arrow-down"></i>
<div class="label">arrow-down</div>
</div>
<div class="icon">
<i class="bi bi-arrow-left-circle-fill"></i>
<div class="label">arrow-left-circle-fill</div>
</div>
<div class="icon">
<i class="bi bi-arrow-left-circle"></i>
<div class="label">arrow-left-circle</div>
</div>
<div class="icon">
<i class="bi bi-arrow-left-right"></i>
<div class="label">arrow-left-right</div>
</div>
<div class="icon">
<i class="bi bi-arrow-left-short"></i>
<div class="label">arrow-left-short</div>
</div>
<div class="icon">
<i class="bi bi-arrow-left-square-fill"></i>
<div class="label">arrow-left-square-fill</div>
</div>
<div class="icon">
<i class="bi bi-arrow-left-square"></i>
<div class="label">arrow-left-square</div>
</div>
<div class="icon">
<i class="bi bi-arrow-left"></i>
<div class="label">arrow-left</div>
</div>
<div class="icon">
<i class="bi bi-arrow-repeat"></i>
<div class="label">arrow-repeat</div>
</div>
<div class="icon">
<i class="bi bi-arrow-return-left"></i>
<div class="label">arrow-return-left</div>
</div>
<div class="icon">
<i class="bi bi-arrow-return-right"></i>
<div class="label">arrow-return-right</div>
</div>
<div class="icon">
<i class="bi bi-arrow-right-circle-fill"></i>
<div class="label">arrow-right-circle-fill</div>
</div>
<div class="icon">
<i class="bi bi-arrow-right-circle"></i>
<div class="label">arrow-right-circle</div>
</div>
<div class="icon">
<i class="bi bi-arrow-right-short"></i>
<div class="label">arrow-right-short</div>
</div>
<div class="icon">
<i class="bi bi-arrow-right-square-fill"></i>
<div class="label">arrow-right-square-fill</div>
</div>
<div class="icon">
<i class="bi bi-arrow-right-square"></i>
<div class="label">arrow-right-square</div>
</div>
<div class="icon">
<i class="bi bi-arrow-right"></i>
<div class="label">arrow-right</div>
</div>
<div class="icon">
<i class="bi bi-arrow-up-circle-fill"></i>
<div class="label">arrow-up-circle-fill</div>
</div>
<div class="icon">
<i class="bi bi-arrow-up-circle"></i>
<div class="label">arrow-up-circle</div>
</div>
<div class="icon">
<i class="bi bi-arrow-up-left-circle-fill"></i>
<div class="label">arrow-up-left-circle-fill</div>
</div>
<div class="icon">
<i class="bi bi-arrow-up-left-circle"></i>
<div class="label">arrow-up-left-circle</div>
</div>
<div class="icon">
<i class="bi bi-arrow-up-left-square-fill"></i>
<div class="label">arrow-up-left-square-fill</div>
</div>
<div class="icon">
<i class="bi bi-arrow-up-left-square"></i>
<div class="label">arrow-up-left-square</div>
</div>
<div class="icon">
<i class="bi bi-arrow-up-left"></i>
<div class="label">arrow-up-left</div>
</div>
<div class="icon">
<i class="bi bi-arrow-up-right-circle-fill"></i>
<div class="label">arrow-up-right-circle-fill</div>
</div>
<div class="icon">
<i class="bi bi-arrow-up-right-circle"></i>
<div class="label">arrow-up-right-circle</div>
</div>
<div class="icon">
<i class="bi bi-arrow-up-right-square-fill"></i>
<div class="label">arrow-up-right-square-fill</div>
</div>
<div class="icon">
<i class="bi bi-arrow-up-right-square"></i>
<div class="label">arrow-up-right-square</div>
</div>
<div class="icon">
<i class="bi bi-arrow-up-right"></i>
<div class="label">arrow-up-right</div>
</div>
<div class="icon">
<i class="bi bi-arrow-up-short"></i>
<div class="label">arrow-up-short</div>
</div>
<div class="icon">
<i class="bi bi-arrow-up-square-fill"></i>
<div class="label">arrow-up-square-fill</div>
</div>
<div class="icon">
<i class="bi bi-arrow-up-square"></i>
<div class="label">arrow-up-square</div>
</div>
<div class="icon">
<i class="bi bi-arrow-up"></i>
<div class="label">arrow-up</div>
</div>
<div class="icon">
<i class="bi bi-arrows-angle-contract"></i>
<div class="label">arrows-angle-contract</div>
</div>
<div class="icon">
<i class="bi bi-arrows-angle-expand"></i>
<div class="label">arrows-angle-expand</div>
</div>
<div class="icon">
<i class="bi bi-arrows-collapse"></i>
<div class="label">arrows-collapse</div>
</div>
<div class="icon">
<i class="bi bi-arrows-expand"></i>
<div class="label">arrows-expand</div>
</div>
<div class="icon">
<i class="bi bi-arrows-fullscreen"></i>
<div class="label">arrows-fullscreen</div>
</div>
<div class="icon">
<i class="bi bi-arrows-move"></i>
<div class="label">arrows-move</div>
</div>
<div class="icon">
<i class="bi bi-aspect-ratio-fill"></i>
<div class="label">aspect-ratio-fill</div>
</div>
<div class="icon">
<i class="bi bi-aspect-ratio"></i>
<div class="label">aspect-ratio</div>
</div>
<div class="icon">
<i class="bi bi-asterisk"></i>
<div class="label">asterisk</div>
</div>
<div class="icon">
<i class="bi bi-at"></i>
<div class="label">at</div>
</div>
<div class="icon">
<i class="bi bi-award-fill"></i>
<div class="label">award-fill</div>
</div>
<div class="icon">
<i class="bi bi-award"></i>
<div class="label">award</div>
</div>
<div class="icon">
<i class="bi bi-back"></i>
<div class="label">back</div>
</div>
<div class="icon">
<i class="bi bi-backspace-fill"></i>
<div class="label">backspace-fill</div>
</div>
<div class="icon">
<i class="bi bi-backspace-reverse-fill"></i>
<div class="label">backspace-reverse-fill</div>
</div>
<div class="icon">
<i class="bi bi-backspace-reverse"></i>
<div class="label">backspace-reverse</div>
</div>
<div class="icon">
<i class="bi bi-backspace"></i>
<div class="label">backspace</div>
</div>
<div class="icon">
<i class="bi bi-badge-3d-fill"></i>
<div class="label">badge-3d-fill</div>
</div>
<div class="icon">
<i class="bi bi-badge-3d"></i>
<div class="label">badge-3d</div>
</div>
<div class="icon">
<i class="bi bi-badge-4k-fill"></i>
<div class="label">badge-4k-fill</div>
</div>
<div class="icon">
<i class="bi bi-badge-4k"></i>
<div class="label">badge-4k</div>
</div>
<div class="icon">
<i class="bi bi-badge-8k-fill"></i>
<div class="label">badge-8k-fill</div>
</div>
<div class="icon">
<i class="bi bi-badge-8k"></i>
<div class="label">badge-8k</div>
</div>
<div class="icon">
<i class="bi bi-badge-ad-fill"></i>
<div class="label">badge-ad-fill</div>
</div>
<div class="icon">
<i class="bi bi-badge-ad"></i>
<div class="label">badge-ad</div>
</div>
<div class="icon">
<i class="bi bi-badge-ar-fill"></i>
<div class="label">badge-ar-fill</div>
</div>
<div class="icon">
<i class="bi bi-badge-ar"></i>
<div class="label">badge-ar</div>
</div>
<div class="icon">
<i class="bi bi-badge-cc-fill"></i>
<div class="label">badge-cc-fill</div>
</div>
<div class="icon">
<i class="bi bi-badge-cc"></i>
<div class="label">badge-cc</div>
</div>
<div class="icon">
<i class="bi bi-badge-hd-fill"></i>
<div class="label">badge-hd-fill</div>
</div>
<div class="icon">
<i class="bi bi-badge-hd"></i>
<div class="label">badge-hd</div>
</div>
<div class="icon">
<i class="bi bi-badge-tm-fill"></i>
<div class="label">badge-tm-fill</div>
</div>
<div class="icon">
<i class="bi bi-badge-tm"></i>
<div class="label">badge-tm</div>
</div>
<div class="icon">
<i class="bi bi-badge-vo-fill"></i>
<div class="label">badge-vo-fill</div>
</div>
<div class="icon">
<i class="bi bi-badge-vo"></i>
<div class="label">badge-vo</div>
</div>
<div class="icon">
<i class="bi bi-badge-vr-fill"></i>
<div class="label">badge-vr-fill</div>
</div>
<div class="icon">
<i class="bi bi-badge-vr"></i>
<div class="label">badge-vr</div>
</div>
<div class="icon">
<i class="bi bi-badge-wc-fill"></i>
<div class="label">badge-wc-fill</div>
</div>
<div class="icon">
<i class="bi bi-badge-wc"></i>
<div class="label">badge-wc</div>
</div>
<div class="icon">
<i class="bi bi-bag-check-fill"></i>
<div class="label">bag-check-fill</div>
</div>
<div class="icon">
<i class="bi bi-bag-check"></i>
<div class="label">bag-check</div>
</div>
<div class="icon">
<i class="bi bi-bag-dash-fill"></i>
<div class="label">bag-dash-fill</div>
</div>
<div class="icon">
<i class="bi bi-bag-dash"></i>
<div class="label">bag-dash</div>
</div>
<div class="icon">
<i class="bi bi-bag-fill"></i>
<div class="label">bag-fill</div>
</div>
<div class="icon">
<i class="bi bi-bag-plus-fill"></i>
<div class="label">bag-plus-fill</div>
</div>
<div class="icon">
<i class="bi bi-bag-plus"></i>
<div class="label">bag-plus</div>
</div>
<div class="icon">
<i class="bi bi-bag-x-fill"></i>
<div class="label">bag-x-fill</div>
</div>
<div class="icon">
<i class="bi bi-bag-x"></i>
<div class="label">bag-x</div>
</div>
<div class="icon">
<i class="bi bi-bag"></i>
<div class="label">bag</div>
</div>
<div class="icon">
<i class="bi bi-bar-chart-fill"></i>
<div class="label">bar-chart-fill</div>
</div>
<div class="icon">
<i class="bi bi-bar-chart-line-fill"></i>
<div class="label">bar-chart-line-fill</div>
</div>
<div class="icon">
<i class="bi bi-bar-chart-line"></i>
<div class="label">bar-chart-line</div>
</div>
<div class="icon">
<i class="bi bi-bar-chart-steps"></i>
<div class="label">bar-chart-steps</div>
</div>
<div class="icon">
<i class="bi bi-bar-chart"></i>
<div class="label">bar-chart</div>
</div>
<div class="icon">
<i class="bi bi-basket-fill"></i>
<div class="label">basket-fill</div>
</div>
<div class="icon">
<i class="bi bi-basket"></i>
<div class="label">basket</div>
</div>
<div class="icon">
<i class="bi bi-basket2-fill"></i>
<div class="label">basket2-fill</div>
</div>
<div class="icon">
<i class="bi bi-basket2"></i>
<div class="label">basket2</div>
</div>
<div class="icon">
<i class="bi bi-basket3-fill"></i>
<div class="label">basket3-fill</div>
</div>
<div class="icon">
<i class="bi bi-basket3"></i>
<div class="label">basket3</div>
</div>
<div class="icon">
<i class="bi bi-battery-charging"></i>
<div class="label">battery-charging</div>
</div>
<div class="icon">
<i class="bi bi-battery-full"></i>
<div class="label">battery-full</div>
</div>
<div class="icon">
<i class="bi bi-battery-half"></i>
<div class="label">battery-half</div>
</div>
<div class="icon">
<i class="bi bi-battery"></i>
<div class="label">battery</div>
</div>
<div class="icon">
<i class="bi bi-bell-fill"></i>
<div class="label">bell-fill</div>
</div>
<div class="icon">
<i class="bi bi-bell"></i>
<div class="label">bell</div>
</div>
<div class="icon">
<i class="bi bi-bezier"></i>
<div class="label">bezier</div>
</div>
<div class="icon">
<i class="bi bi-bezier2"></i>
<div class="label">bezier2</div>
</div>
<div class="icon">
<i class="bi bi-bicycle"></i>
<div class="label">bicycle</div>
</div>
<div class="icon">
<i class="bi bi-binoculars-fill"></i>
<div class="label">binoculars-fill</div>
</div>
<div class="icon">
<i class="bi bi-binoculars"></i>
<div class="label">binoculars</div>
</div>
<div class="icon">
<i class="bi bi-blockquote-left"></i>
<div class="label">blockquote-left</div>
</div>
<div class="icon">
<i class="bi bi-blockquote-right"></i>
<div class="label">blockquote-right</div>
</div>
<div class="icon">
<i class="bi bi-book-fill"></i>
<div class="label">book-fill</div>
</div>
<div class="icon">
<i class="bi bi-book-half"></i>
<div class="label">book-half</div>
</div>
<div class="icon">
<i class="bi bi-book"></i>
<div class="label">book</div>
</div>
<div class="icon">
<i class="bi bi-bookmark-check-fill"></i>
<div class="label">bookmark-check-fill</div>
</div>
<div class="icon">
<i class="bi bi-bookmark-check"></i>
<div class="label">bookmark-check</div>
</div>
<div class="icon">
<i class="bi bi-bookmark-dash-fill"></i>
<div class="label">bookmark-dash-fill</div>
</div>
<div class="icon">
<i class="bi bi-bookmark-dash"></i>
<div class="label">bookmark-dash</div>
</div>
<div class="icon">
<i class="bi bi-bookmark-fill"></i>
<div class="label">bookmark-fill</div>
</div>
<div class="icon">
<i class="bi bi-bookmark-heart-fill"></i>
<div class="label">bookmark-heart-fill</div>
</div>
<div class="icon">
<i class="bi bi-bookmark-heart"></i>
<div class="label">bookmark-heart</div>
</div>
<div class="icon">
<i class="bi bi-bookmark-plus-fill"></i>
<div class="label">bookmark-plus-fill</div>
</div>
<div class="icon">
<i class="bi bi-bookmark-plus"></i>
<div class="label">bookmark-plus</div>
</div>
<div class="icon">
<i class="bi bi-bookmark-star-fill"></i>
<div class="label">bookmark-star-fill</div>
</div>
<div class="icon">
<i class="bi bi-bookmark-star"></i>
<div class="label">bookmark-star</div>
</div>
<div class="icon">
<i class="bi bi-bookmark-x-fill"></i>
<div class="label">bookmark-x-fill</div>
</div>
<div class="icon">
<i class="bi bi-bookmark-x"></i>
<div class="label">bookmark-x</div>
</div>
<div class="icon">
<i class="bi bi-bookmark"></i>
<div class="label">bookmark</div>
</div>
<div class="icon">
<i class="bi bi-bookmarks-fill"></i>
<div class="label">bookmarks-fill</div>
</div>
<div class="icon">
<i class="bi bi-bookmarks"></i>
<div class="label">bookmarks</div>
</div>
<div class="icon">
<i class="bi bi-bookshelf"></i>
<div class="label">bookshelf</div>
</div>
<div class="icon">
<i class="bi bi-bootstrap-fill"></i>
<div class="label">bootstrap-fill</div>
</div>
<div class="icon">
<i class="bi bi-bootstrap-reboot"></i>
<div class="label">bootstrap-reboot</div>
</div>
<div class="icon">
<i class="bi bi-bootstrap"></i>
<div class="label">bootstrap</div>
</div>
<div class="icon">
<i class="bi bi-border-all"></i>
<div class="label">border-all</div>
</div>
<div class="icon">
<i class="bi bi-border-bottom"></i>
<div class="label">border-bottom</div>
</div>
<div class="icon">
<i class="bi bi-border-center"></i>
<div class="label">border-center</div>
</div>
<div class="icon">
<i class="bi bi-border-inner"></i>
<div class="label">border-inner</div>
</div>
<div class="icon">
<i class="bi bi-border-left"></i>
<div class="label">border-left</div>
</div>
<div class="icon">
<i class="bi bi-border-middle"></i>
<div class="label">border-middle</div>
</div>
<div class="icon">
<i class="bi bi-border-outer"></i>
<div class="label">border-outer</div>
</div>
<div class="icon">
<i class="bi bi-border-right"></i>
<div class="label">border-right</div>
</div>
<div class="icon">
<i class="bi bi-border-style"></i>
<div class="label">border-style</div>
</div>
<div class="icon">
<i class="bi bi-border-top"></i>
<div class="label">border-top</div>
</div>
<div class="icon">
<i class="bi bi-border-width"></i>
<div class="label">border-width</div>
</div>
<div class="icon">
<i class="bi bi-border"></i>
<div class="label">border</div>
</div>
<div class="icon">
<i class="bi bi-bounding-box-circles"></i>
<div class="label">bounding-box-circles</div>
</div>
<div class="icon">
<i class="bi bi-bounding-box"></i>
<div class="label">bounding-box</div>
</div>
<div class="icon">
<i class="bi bi-box-arrow-down-left"></i>
<div class="label">box-arrow-down-left</div>
</div>
<div class="icon">
<i class="bi bi-box-arrow-down-right"></i>
<div class="label">box-arrow-down-right</div>
</div>
<div class="icon">
<i class="bi bi-box-arrow-down"></i>
<div class="label">box-arrow-down</div>
</div>
<div class="icon">
<i class="bi bi-box-arrow-in-down-left"></i>
<div class="label">box-arrow-in-down-left</div>
</div>
<div class="icon">
<i class="bi bi-box-arrow-in-down-right"></i>
<div class="label">box-arrow-in-down-right</div>
</div>
<div class="icon">
<i class="bi bi-box-arrow-in-down"></i>
<div class="label">box-arrow-in-down</div>
</div>
<div class="icon">
<i class="bi bi-box-arrow-in-left"></i>
<div class="label">box-arrow-in-left</div>
</div>
<div class="icon">
<i class="bi bi-box-arrow-in-right"></i>
<div class="label">box-arrow-in-right</div>
</div>
<div class="icon">
<i class="bi bi-box-arrow-in-up-left"></i>
<div class="label">box-arrow-in-up-left</div>
</div>
<div class="icon">
<i class="bi bi-box-arrow-in-up-right"></i>
<div class="label">box-arrow-in-up-right</div>
</div>
<div class="icon">
<i class="bi bi-box-arrow-in-up"></i>
<div class="label">box-arrow-in-up</div>
</div>
<div class="icon">
<i class="bi bi-box-arrow-left"></i>
<div class="label">box-arrow-left</div>
</div>
<div class="icon">
<i class="bi bi-box-arrow-right"></i>
<div class="label">box-arrow-right</div>
</div>
<div class="icon">
<i class="bi bi-box-arrow-up-left"></i>
<div class="label">box-arrow-up-left</div>
</div>
<div class="icon">
<i class="bi bi-box-arrow-up-right"></i>
<div class="label">box-arrow-up-right</div>
</div>
<div class="icon">
<i class="bi bi-box-arrow-up"></i>
<div class="label">box-arrow-up</div>
</div>
<div class="icon">
<i class="bi bi-box-seam"></i>
<div class="label">box-seam</div>
</div>
<div class="icon">
<i class="bi bi-box"></i>
<div class="label">box</div>
</div>
<div class="icon">
<i class="bi bi-braces"></i>
<div class="label">braces</div>
</div>
<div class="icon">
<i class="bi bi-bricks"></i>
<div class="label">bricks</div>
</div>
<div class="icon">
<i class="bi bi-briefcase-fill"></i>
<div class="label">briefcase-fill</div>
</div>
<div class="icon">
<i class="bi bi-briefcase"></i>
<div class="label">briefcase</div>
</div>
<div class="icon">
<i class="bi bi-brightness-alt-high-fill"></i>
<div class="label">brightness-alt-high-fill</div>
</div>
<div class="icon">
<i class="bi bi-brightness-alt-high"></i>
<div class="label">brightness-alt-high</div>
</div>
<div class="icon">
<i class="bi bi-brightness-alt-low-fill"></i>
<div class="label">brightness-alt-low-fill</div>
</div>
<div class="icon">
<i class="bi bi-brightness-alt-low"></i>
<div class="label">brightness-alt-low</div>
</div>
<div class="icon">
<i class="bi bi-brightness-high-fill"></i>
<div class="label">brightness-high-fill</div>
</div>
<div class="icon">
<i class="bi bi-brightness-high"></i>
<div class="label">brightness-high</div>
</div>
<div class="icon">
<i class="bi bi-brightness-low-fill"></i>
<div class="label">brightness-low-fill</div>
</div>
<div class="icon">
<i class="bi bi-brightness-low"></i>
<div class="label">brightness-low</div>
</div>
<div class="icon">
<i class="bi bi-broadcast-pin"></i>
<div class="label">broadcast-pin</div>
</div>
<div class="icon">
<i class="bi bi-broadcast"></i>
<div class="label">broadcast</div>
</div>
<div class="icon">
<i class="bi bi-brush-fill"></i>
<div class="label">brush-fill</div>
</div>
<div class="icon">
<i class="bi bi-brush"></i>
<div class="label">brush</div>
</div>
<div class="icon">
<i class="bi bi-bucket-fill"></i>
<div class="label">bucket-fill</div>
</div>
<div class="icon">
<i class="bi bi-bucket"></i>
<div class="label">bucket</div>
</div>
<div class="icon">
<i class="bi bi-bug-fill"></i>
<div class="label">bug-fill</div>
</div>
<div class="icon">
<i class="bi bi-bug"></i>
<div class="label">bug</div>
</div>
<div class="icon">
<i class="bi bi-building"></i>
<div class="label">building</div>
</div>
<div class="icon">
<i class="bi bi-bullseye"></i>
<div class="label">bullseye</div>
</div>
<div class="icon">
<i class="bi bi-calculator-fill"></i>
<div class="label">calculator-fill</div>
</div>
<div class="icon">
<i class="bi bi-calculator"></i>
<div class="label">calculator</div>
</div>
<div class="icon">
<i class="bi bi-calendar-check-fill"></i>
<div class="label">calendar-check-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar-check"></i>
<div class="label">calendar-check</div>
</div>
<div class="icon">
<i class="bi bi-calendar-date-fill"></i>
<div class="label">calendar-date-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar-date"></i>
<div class="label">calendar-date</div>
</div>
<div class="icon">
<i class="bi bi-calendar-day-fill"></i>
<div class="label">calendar-day-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar-day"></i>
<div class="label">calendar-day</div>
</div>
<div class="icon">
<i class="bi bi-calendar-event-fill"></i>
<div class="label">calendar-event-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar-event"></i>
<div class="label">calendar-event</div>
</div>
<div class="icon">
<i class="bi bi-calendar-fill"></i>
<div class="label">calendar-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar-minus-fill"></i>
<div class="label">calendar-minus-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar-minus"></i>
<div class="label">calendar-minus</div>
</div>
<div class="icon">
<i class="bi bi-calendar-month-fill"></i>
<div class="label">calendar-month-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar-month"></i>
<div class="label">calendar-month</div>
</div>
<div class="icon">
<i class="bi bi-calendar-plus-fill"></i>
<div class="label">calendar-plus-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar-plus"></i>
<div class="label">calendar-plus</div>
</div>
<div class="icon">
<i class="bi bi-calendar-range-fill"></i>
<div class="label">calendar-range-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar-range"></i>
<div class="label">calendar-range</div>
</div>
<div class="icon">
<i class="bi bi-calendar-week-fill"></i>
<div class="label">calendar-week-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar-week"></i>
<div class="label">calendar-week</div>
</div>
<div class="icon">
<i class="bi bi-calendar-x-fill"></i>
<div class="label">calendar-x-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar-x"></i>
<div class="label">calendar-x</div>
</div>
<div class="icon">
<i class="bi bi-calendar"></i>
<div class="label">calendar</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-check-fill"></i>
<div class="label">calendar2-check-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-check"></i>
<div class="label">calendar2-check</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-date-fill"></i>
<div class="label">calendar2-date-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-date"></i>
<div class="label">calendar2-date</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-day-fill"></i>
<div class="label">calendar2-day-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-day"></i>
<div class="label">calendar2-day</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-event-fill"></i>
<div class="label">calendar2-event-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-event"></i>
<div class="label">calendar2-event</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-fill"></i>
<div class="label">calendar2-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-minus-fill"></i>
<div class="label">calendar2-minus-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-minus"></i>
<div class="label">calendar2-minus</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-month-fill"></i>
<div class="label">calendar2-month-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-month"></i>
<div class="label">calendar2-month</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-plus-fill"></i>
<div class="label">calendar2-plus-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-plus"></i>
<div class="label">calendar2-plus</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-range-fill"></i>
<div class="label">calendar2-range-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-range"></i>
<div class="label">calendar2-range</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-week-fill"></i>
<div class="label">calendar2-week-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-week"></i>
<div class="label">calendar2-week</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-x-fill"></i>
<div class="label">calendar2-x-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar2-x"></i>
<div class="label">calendar2-x</div>
</div>
<div class="icon">
<i class="bi bi-calendar2"></i>
<div class="label">calendar2</div>
</div>
<div class="icon">
<i class="bi bi-calendar3-event-fill"></i>
<div class="label">calendar3-event-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar3-event"></i>
<div class="label">calendar3-event</div>
</div>
<div class="icon">
<i class="bi bi-calendar3-fill"></i>
<div class="label">calendar3-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar3-range-fill"></i>
<div class="label">calendar3-range-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar3-range"></i>
<div class="label">calendar3-range</div>
</div>
<div class="icon">
<i class="bi bi-calendar3-week-fill"></i>
<div class="label">calendar3-week-fill</div>
</div>
<div class="icon">
<i class="bi bi-calendar3-week"></i>
<div class="label">calendar3-week</div>
</div>
<div class="icon">
<i class="bi bi-calendar3"></i>
<div class="label">calendar3</div>
</div>
<div class="icon">
<i class="bi bi-calendar4-event"></i>
<div class="label">calendar4-event</div>
</div>
<div class="icon">
<i class="bi bi-calendar4-range"></i>
<div class="label">calendar4-range</div>
</div>
<div class="icon">
<i class="bi bi-calendar4-week"></i>
<div class="label">calendar4-week</div>
</div>
<div class="icon">
<i class="bi bi-calendar4"></i>
<div class="label">calendar4</div>
</div>
<div class="icon">
<i class="bi bi-camera-fill"></i>
<div class="label">camera-fill</div>
</div>
<div class="icon">
<i class="bi bi-camera-reels-fill"></i>
<div class="label">camera-reels-fill</div>
</div>
<div class="icon">
<i class="bi bi-camera-reels"></i>
<div class="label">camera-reels</div>
</div>
<div class="icon">
<i class="bi bi-camera-video-fill"></i>
<div class="label">camera-video-fill</div>
</div>
<div class="icon">
<i class="bi bi-camera-video-off-fill"></i>
<div class="label">camera-video-off-fill</div>
</div>
<div class="icon">
<i class="bi bi-camera-video-off"></i>
<div class="label">camera-video-off</div>
</div>
<div class="icon">
<i class="bi bi-camera-video"></i>
<div class="label">camera-video</div>
</div>
<div class="icon">
<i class="bi bi-camera"></i>
<div class="label">camera</div>
</div>
<div class="icon">
<i class="bi bi-camera2"></i>
<div class="label">camera2</div>
</div>
<div class="icon">
<i class="bi bi-capslock-fill"></i>
<div class="label">capslock-fill</div>
</div>
<div class="icon">
<i class="bi bi-capslock"></i>
<div class="label">capslock</div>
</div>
<div class="icon">
<i class="bi bi-card-checklist"></i>
<div class="label">card-checklist</div>
</div>
<div class="icon">
<i class="bi bi-card-heading"></i>
<div class="label">card-heading</div>
</div>
<div class="icon">
<i class="bi bi-card-image"></i>
<div class="label">card-image</div>
</div>
<div class="icon">
<i class="bi bi-card-list"></i>
<div class="label">card-list</div>
</div>
<div class="icon">
<i class="bi bi-card-text"></i>
<div class="label">card-text</div>
</div>
<div class="icon">
<i class="bi bi-caret-down-fill"></i>
<div class="label">caret-down-fill</div>
</div>
<div class="icon">
<i class="bi bi-caret-down-square-fill"></i>
<div class="label">caret-down-square-fill</div>
</div>
<div class="icon">
<i class="bi bi-caret-down-square"></i>
<div class="label">caret-down-square</div>
</div>
<div class="icon">
<i class="bi bi-caret-down"></i>
<div class="label">caret-down</div>
</div>
<div class="icon">
<i class="bi bi-caret-left-fill"></i>
<div class="label">caret-left-fill</div>
</div>
<div class="icon">
<i class="bi bi-caret-left-square-fill"></i>
<div class="label">caret-left-square-fill</div>
</div>
<div class="icon">
<i class="bi bi-caret-left-square"></i>
<div class="label">caret-left-square</div>
</div>
<div class="icon">
<i class="bi bi-caret-left"></i>
<div class="label">caret-left</div>
</div>
<div class="icon">
<i class="bi bi-caret-right-fill"></i>
<div class="label">caret-right-fill</div>
</div>
<div class="icon">
<i class="bi bi-caret-right-square-fill"></i>
<div class="label">caret-right-square-fill</div>
</div>
<div class="icon">
<i class="bi bi-caret-right-square"></i>
<div class="label">caret-right-square</div>
</div>
<div class="icon">
<i class="bi bi-caret-right"></i>
<div class="label">caret-right</div>
</div>
<div class="icon">
<i class="bi bi-caret-up-fill"></i>
<div class="label">caret-up-fill</div>
</div>
<div class="icon">
<i class="bi bi-caret-up-square-fill"></i>
<div class="label">caret-up-square-fill</div>
</div>
<div class="icon">
<i class="bi bi-caret-up-square"></i>
<div class="label">caret-up-square</div>
</div>
<div class="icon">
<i class="bi bi-caret-up"></i>
<div class="label">caret-up</div>
</div>
<div class="icon">
<i class="bi bi-cart-check-fill"></i>
<div class="label">cart-check-fill</div>
</div>
<div class="icon">
<i class="bi bi-cart-check"></i>
<div class="label">cart-check</div>
</div>
<div class="icon">
<i class="bi bi-cart-dash-fill"></i>
<div class="label">cart-dash-fill</div>
</div>
<div class="icon">
<i class="bi bi-cart-dash"></i>
<div class="label">cart-dash</div>
</div>
<div class="icon">
<i class="bi bi-cart-fill"></i>
<div class="label">cart-fill</div>
</div>
<div class="icon">
<i class="bi bi-cart-plus-fill"></i>
<div class="label">cart-plus-fill</div>
</div>
<div class="icon">
<i class="bi bi-cart-plus"></i>
<div class="label">cart-plus</div>
</div>
<div class="icon">
<i class="bi bi-cart-x-fill"></i>
<div class="label">cart-x-fill</div>
</div>
<div class="icon">
<i class="bi bi-cart-x"></i>
<div class="label">cart-x</div>
</div>
<div class="icon">
<i class="bi bi-cart"></i>
<div class="label">cart</div>
</div>
<div class="icon">
<i class="bi bi-cart2"></i>
<div class="label">cart2</div>
</div>
<div class="icon">
<i class="bi bi-cart3"></i>
<div class="label">cart3</div>
</div>
<div class="icon">
<i class="bi bi-cart4"></i>
<div class="label">cart4</div>
</div>
<div class="icon">
<i class="bi bi-cash-stack"></i>
<div class="label">cash-stack</div>
</div>
<div class="icon">
<i class="bi bi-cash"></i>
<div class="label">cash</div>
</div>
<div class="icon">
<i class="bi bi-cast"></i>
<div class="label">cast</div>
</div>
<div class="icon">
<i class="bi bi-chat-dots-fill"></i>
<div class="label">chat-dots-fill</div>
</div>
<div class="icon">
<i class="bi bi-chat-dots"></i>
<div class="label">chat-dots</div>
</div>
<div class="icon">
<i class="bi bi-chat-fill"></i>
<div class="label">chat-fill</div>
</div>
<div class="icon">
<i class="bi bi-chat-left-dots-fill"></i>
<div class="label">chat-left-dots-fill</div>
</div>
<div class="icon">
<i class="bi bi-chat-left-dots"></i>
<div class="label">chat-left-dots</div>
</div>
<div class="icon">
<i class="bi bi-chat-left-fill"></i>
<div class="label">chat-left-fill</div>
</div>
<div class="icon">
<i class="bi bi-chat-left-quote-fill"></i>
<div class="label">chat-left-quote-fill</div>
</div>
<div class="icon">
<i class="bi bi-chat-left-quote"></i>
<div class="label">chat-left-quote</div>
</div>
<div class="icon">
<i class="bi bi-chat-left-text-fill"></i>
<div class="label">chat-left-text-fill</div>
</div>
<div class="icon">
<i class="bi bi-chat-left-text"></i>
<div class="label">chat-left-text</div>
</div>
<div class="icon">
<i class="bi bi-chat-left"></i>
<div class="label">chat-left</div>
</div>
<div class="icon">
<i class="bi bi-chat-quote-fill"></i>
<div class="label">chat-quote-fill</div>
</div>
<div class="icon">
<i class="bi bi-chat-quote"></i>
<div class="label">chat-quote</div>
</div>
<div class="icon">
<i class="bi bi-chat-right-dots-fill"></i>
<div class="label">chat-right-dots-fill</div>
</div>
<div class="icon">
<i class="bi bi-chat-right-dots"></i>
<div class="label">chat-right-dots</div>
</div>
<div class="icon">
<i class="bi bi-chat-right-fill"></i>
<div class="label">chat-right-fill</div>
</div>
<div class="icon">
<i class="bi bi-chat-right-quote-fill"></i>
<div class="label">chat-right-quote-fill</div>
</div>
<div class="icon">
<i class="bi bi-chat-right-quote"></i>
<div class="label">chat-right-quote</div>
</div>
<div class="icon">
<i class="bi bi-chat-right-text-fill"></i>
<div class="label">chat-right-text-fill</div>
</div>
<div class="icon">
<i class="bi bi-chat-right-text"></i>
<div class="label">chat-right-text</div>
</div>
<div class="icon">
<i class="bi bi-chat-right"></i>
<div class="label">chat-right</div>
</div>
<div class="icon">
<i class="bi bi-chat-square-dots-fill"></i>
<div class="label">chat-square-dots-fill</div>
</div>
<div class="icon">
<i class="bi bi-chat-square-dots"></i>
<div class="label">chat-square-dots</div>
</div>
<div class="icon">
<i class="bi bi-chat-square-fill"></i>
<div class="label">chat-square-fill</div>
</div>
<div class="icon">
<i class="bi bi-chat-square-quote-fill"></i>
<div class="label">chat-square-quote-fill</div>
</div>
<div class="icon">
<i class="bi bi-chat-square-quote"></i>
<div class="label">chat-square-quote</div>
</div>
<div class="icon">
<i class="bi bi-chat-square-text-fill"></i>
<div class="label">chat-square-text-fill</div>
</div>
<div class="icon">
<i class="bi bi-chat-square-text"></i>
<div class="label">chat-square-text</div>
</div>
<div class="icon">
<i class="bi bi-chat-square"></i>
<div class="label">chat-square</div>
</div>
<div class="icon">
<i class="bi bi-chat-text-fill"></i>
<div class="label">chat-text-fill</div>
</div>
<div class="icon">
<i class="bi bi-chat-text"></i>
<div class="label">chat-text</div>
</div>
<div class="icon">
<i class="bi bi-chat"></i>
<div class="label">chat</div>
</div>
<div class="icon">
<i class="bi bi-check-all"></i>
<div class="label">check-all</div>
</div>
<div class="icon">
<i class="bi bi-check-circle-fill"></i>
<div class="label">check-circle-fill</div>
</div>
<div class="icon">
<i class="bi bi-check-circle"></i>
<div class="label">check-circle</div>
</div>
<div class="icon">
<i class="bi bi-check-square-fill"></i>
<div class="label">check-square-fill</div>
</div>
<div class="icon">
<i class="bi bi-check-square"></i>
<div class="label">check-square</div>
</div>
<div class="icon">
<i class="bi bi-check"></i>
<div class="label">check</div>
</div>
<div class="icon">
<i class="bi bi-check2-all"></i>
<div class="label">check2-all</div>
</div>
<div class="icon">
<i class="bi bi-check2-circle"></i>
<div class="label">check2-circle</div>
</div>
<div class="icon">
<i class="bi bi-check2-square"></i>
<div class="label">check2-square</div>
</div>
<div class="icon">
<i class="bi bi-check2"></i>
<div class="label">check2</div>
</div>
<div class="icon">
<i class="bi bi-chevron-bar-contract"></i>
<div class="label">chevron-bar-contract</div>
</div>
<div class="icon">
<i class="bi bi-chevron-bar-down"></i>
<div class="label">chevron-bar-down</div>
</div>
<div class="icon">
<i class="bi bi-chevron-bar-expand"></i>
<div class="label">chevron-bar-expand</div>
</div>
<div class="icon">
<i class="bi bi-chevron-bar-left"></i>
<div class="label">chevron-bar-left</div>
</div>
<div class="icon">
<i class="bi bi-chevron-bar-right"></i>
<div class="label">chevron-bar-right</div>
</div>
<div class="icon">
<i class="bi bi-chevron-bar-up"></i>
<div class="label">chevron-bar-up</div>
</div>
<div class="icon">
<i class="bi bi-chevron-compact-down"></i>
<div class="label">chevron-compact-down</div>
</div>
<div class="icon">
<i class="bi bi-chevron-compact-left"></i>
<div class="label">chevron-compact-left</div>
</div>
<div class="icon">
<i class="bi bi-chevron-compact-right"></i>
<div class="label">chevron-compact-right</div>
</div>
<div class="icon">
<i class="bi bi-chevron-compact-up"></i>
<div class="label">chevron-compact-up</div>
</div>
<div class="icon">
<i class="bi bi-chevron-contract"></i>
<div class="label">chevron-contract</div>
</div>
<div class="icon">
<i class="bi bi-chevron-double-down"></i>
<div class="label">chevron-double-down</div>
</div>
<div class="icon">
<i class="bi bi-chevron-double-left"></i>
<div class="label">chevron-double-left</div>
</div>
<div class="icon">
<i class="bi bi-chevron-double-right"></i>
<div class="label">chevron-double-right</div>
</div>
<div class="icon">
<i class="bi bi-chevron-double-up"></i>
<div class="label">chevron-double-up</div>
</div>
<div class="icon">
<i class="bi bi-chevron-down"></i>
<div class="label">chevron-down</div>
</div>
<div class="icon">
<i class="bi bi-chevron-expand"></i>
<div class="label">chevron-expand</div>
</div>
<div class="icon">
<i class="bi bi-chevron-left"></i>
<div class="label">chevron-left</div>
</div>
<div class="icon">
<i class="bi bi-chevron-right"></i>
<div class="label">chevron-right</div>
</div>
<div class="icon">
<i class="bi bi-chevron-up"></i>
<div class="label">chevron-up</div>
</div>
<div class="icon">
<i class="bi bi-circle-fill"></i>
<div class="label">circle-fill</div>
</div>
<div class="icon">
<i class="bi bi-circle-half"></i>
<div class="label">circle-half</div>
</div>
<div class="icon">
<i class="bi bi-circle-square"></i>
<div class="label">circle-square</div>
</div>
<div class="icon">
<i class="bi bi-circle"></i>
<div class="label">circle</div>
</div>
<div class="icon">
<i class="bi bi-clipboard-check"></i>
<div class="label">clipboard-check</div>
</div>
<div class="icon">
<i class="bi bi-clipboard-data"></i>
<div class="label">clipboard-data</div>
</div>
<div class="icon">
<i class="bi bi-clipboard-minus"></i>
<div class="label">clipboard-minus</div>
</div>
<div class="icon">
<i class="bi bi-clipboard-plus"></i>
<div class="label">clipboard-plus</div>
</div>
<div class="icon">
<i class="bi bi-clipboard-x"></i>
<div class="label">clipboard-x</div>
</div>
<div class="icon">
<i class="bi bi-clipboard"></i>
<div class="label">clipboard</div>
</div>
<div class="icon">