超过 2000+ 精美图标

Bootstrap Icons 完全指南

免费、开源、SVG 图标库，专为 Bootstrap 设计，亦可独立使用。
轻松通过 <i class="bi bi-图标名"></i> 引入现代网页。

浏览图标集查看代码用法

原生 Bootstrap 集成

图标与 Bootstrap 组件完美适配，尺寸、颜色、对齐随上下文自动继承，开发效率倍增。

可伸缩矢量 (SVG)

所有图标均为 SVG，支持任意缩放不失真，且可通过 CSS 轻松修改颜色与大小。

零依赖 & 开源

无需 JavaScript，纯字体/ SVG 方案。MIT 许可，可用于个人及商业项目。

精选图标集

点击下方任意图标卡片即可复制图标类名（bi bi-xxx），方便直接粘贴至您的项目中使用。

如何使用 Bootstrap Icons？

只需在页面中引入 Bootstrap Icons CSS 文件，然后使用 <i> 元素添加对应的图标类即可。

CDN 引入 (推荐)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

标准图标示例

<i class="bi bi-alarm"></i>
<i class="bi bi-github" style="font-size: 2rem;"></i>
<i class="bi bi-envelope-fill text-danger"></i>

通过 font-size 控制图标大小，color 修改颜色，支持所有 CSS 效果（旋转、动画等）。图标类名前缀一律为 bi bi- + 图标名称。

进阶技巧：

使用 .bi-xxl 或自定义 .fs-1 调整大小
搭配 Bootstrap 间距工具: me-2 p-3 轻松布局
可结合动画: <i class="bi bi-arrow-repeat spin"></i> (需自定义关键帧)
也可以直接作为 SVG 精灵图使用，详细参考官方文档。