和 Bootstrap 天生一对的免费图标库：Bootstrap Icons 开源直接用
如果你在用 Bootstrap 搭页面，配一套同源风格的图标能省下大量对齐心智。Bootstrap Icons 正是官方维护的开源图标库，风格和 Bootstrap 的组件天然一致，既能当字体图标也能当 SVG 用。无论是按钮上的小标识、侧边栏的导航图标，还是表单里的状态符号，它都覆盖了相当完整的一套，而且更新节奏和 Bootstrap 本身同步。
它解决什么问题
用 Bootstrap 做页面，却找不到风格匹配的图标，强行混搭显得突兀。
图标字体体积大，整库引入拖慢首屏加载。
担心第三方图标库后续停更或收费，影响长期维护。
核心能力
| 能力 | 具体能做到什么 |
|---|---|
| 官方同源 | 由 Bootstrap 团队维护，视觉语言和组件库完全一致，搭配零违和 |
| 双形态 | 同时提供字体图标与独立 SVG，可按项目需要选择引入方式 |
| MIT 授权 | 协议宽松到几乎无限制，商业闭源项目也能直接拿去用 |
| 分类清晰 | 按箭头、表单、品牌、设备、天气等分类，找图标不费劲 |
| 按需打包 | 支持只引入用到的图标，避免把整库打进前端产物 |
| 版本稳定 | 随 Bootstrap 主版本迭代，长期有维护，不用担心突然停更 |
它是 Bootstrap 设计语言的「图标补全」，而非独立作品
Bootstrap Icons 的设计目标是补全 Bootstrap 组件在文字之外所需的图形符号：按钮、徽章、输入框、导航、提示框等都需要轻量图标来降低认知负荷。它的造型遵循 Bootstrap 自身的栅格与描边节奏，因此当它和 btn、nav、form-control 这类组件摆在一起时，视觉重量是对得上的，不会出现图标比文字还抢眼的情况。
工程上推荐优先用 SVG 方案：把需要的图标以独立文件或内联方式引入，配合打包工具的 tree-shaking 只保留用到的路径，能显著控制体积。如果项目已经大量使用 Web Font，那选用字体方案也合理，但要注意用 font-display 控制加载，避免图标在字体未就绪时出现空白。无论哪种方式，都不要整库全量引入。
同类工具怎么选
| 工具 | 授权 | 差别在哪 |
|---|---|---|
| Remix Icon | 开源免费 | 风格更现代中性，分类细致，适合非 Bootstrap 项目。 |
| Feather Icons | 开源免费 | 极简线性，图标数较少但辨识度强。 |
| Iconoir | 开源免费 | 总量大、圆润风，主题切换支持好。 |
谁适合用
- 正在用 Bootstrap 开发网站的前端
- 需要快速搭出一致界面的全栈开发者
- 做后台系统时缺一套稳妥图标的产品团队
怎么开始
- 访问官网，用顶部搜索或左侧分类找到目标图标。
- 复制对应的字体 class 或下载 SVG 文件，按项目形态取用。
- 若用字体方案，引入 CSS 与字体文件后在元素上加 icon 类即可。
- 用 SVG 时把路径内联进标记，通过 CSS 控制尺寸和颜色。
- 只用到少数图标时，借助图标库工具做按需裁剪再打包。
常见问题
能商用吗，需要署名吗？
MIT 协议，可商用，无需署名，也没有付费门槛。
不写 Bootstrap 也能用吗？
能。它作为独立图标库可用在任何项目里，不强制依赖 Bootstrap 框架。
字体版和 SVG 版怎么选？
追求极致体积与可控动画选 SVG；已有字体体系、图标准而多可选字体版。
图标不够用怎么办？
可混用同风格的开源线性图标补齐，或按同规则自行补绘个别符号。
授权与合规
Bootstrap Icons 以 MIT 协议发布，可自由用于任何项目，商业用途也完全免费。 官网：icons.getbootstrap.com。
继续找同类资源
这条属于「设计素材」栏目，同栏目还有更多可直接使用的免费资源，可以在 设计素材全部资源 里按需翻阅。
相关资源
同栏目下这几条也常被一起翻到：
↓ 获取资源
点击按钮直接前往资源页面。
