图标

图标库

在下方搜索框里可以同时用英文名和中文词检索，例如 heart、心、箭头、天气、垃圾桶。点击任意图标即可复制它的 SVG 源码或使用片段。

三种用法

Bootstrap 图标提供三种引入方式，本站已把整套图标本地化，任选一种即可。

内联 SVG

复制图标的 <svg> 源码直接写进页面，不引入任何额外文件，也最容易控制尺寸与颜色。fill="currentColor" 会让图标继承文字颜色。

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
     class="bi bi-heart" viewBox="0 0 16 16">
  <path d="m8 2.748-.717-.737C5.6.281 2.257.98 1.234 4.544c-.59 1.903.254 3.912 1.7 5.27l4.873 4.46a.5.5.0 0 0 .674-.013l4.873-4.447c1.446-1.358 2.29-3.368 1.7-5.27C13.743.98 10.4.281 8.717 2.01L8 2.748" />
</svg>

SVG sprite

整套图标已合并成一个 sprite 文件放在 /icons/sprite.svg，用 <use> 按图标名引用，一次请求即可复用全部图标。本站文档页用的就是这种方式。

<svg class="bi" width="24" height="24" aria-hidden="true">
  <use href="/icons/sprite.svg#heart"></use>
</svg>

字体图标

引入字体样式表后用 <i> 标签加类名，适合批量着色、对齐的场景。样式表与字体文件同样已本地托管在 /assets/icons-font/。

<link href="/assets/icons-font/bootstrap-icons.min.css" rel="stylesheet">
<i class="bi bi-heart"></i>
<i class="bi bi-heart-fill"></i>

需要精确控制描边、多色或做动画时优先用 SVG；只需要单色小图标时字体方式最省事。

关于本站图标页

• 图标与字体文件来自 twbs/icons v1.13.2，共 2078 个 SVG，采用 MIT 许可，许可原文随文件放在 /icons/LICENSE.txt。
• 图标名保持英文原样——它就是文件名和类名，写进代码时不能翻译；中文化体现在分类名与搜索别名上。
• 中文检索词由本站整理（例如「箭头」会匹配 arrow-*、chevron-*、caret-*）。若某个词搜不到，可直接用英文名片段。
• 上游图标库与单个图标详情页在 icons.getbootstrap.com，新增或修订图标请向上游提交。