Simple Icons 完整指南：3456 个品牌 SVG 图标，从查找 slug 到嵌入页面只需 5 分钟

Simple Icons 完整指南：3456 个品牌 SVG 图标，从查找 slug 到嵌入页面只需 5 分钟

【免费下载链接】simple-iconsSVG icons for popular brands项目地址: https://gitcode.com/GitHub_Trending/si/simple-icons

你在给客户网站做页脚时，需要放一排合作品牌 logo。手动去各品牌官网找原图，导出来尺寸不一、底色参差，光是把图标对齐就耗掉一个下午。Simple Icons 是一个收录 3456 个流行品牌的统一风格 SVG 图标库，一条命令就能把图标文件、品牌色和 slug 标识符一起装进你的项目。

项目速览：先确认 Simple Icons 适合你的场景

这一节用 30 秒帮你判断该不该用这个项目，避免装完才发现不匹配。

项目说明见 README.md，品牌名与 slug 对照表见 slugs.md。

从零安装 Simple Icons：两条路线任选其一

这一节带你完成安装并验证图标可用，全程只需一条命令。

路线 A：装 npm 包（做 Web 项目推荐）

npm install simple-icons node -e "const {siGithub} = require('simple-icons'); console.log(siGithub.hex, siGithub.title)"

看到输出181717 GitHub就说明安装成功：181717是 GitHub 图标的官方品牌色。

路线 B：直接 clone 仓库（做设计稿取图、PHP 项目推荐）

git clone https://gitcode.com/GitHub_Trending/si/simple-icons

进入目录后执行ls icons | wc -l，看到3456即成功。之后直接取用icons/react.svg这类文件即可。

首次配置建议两条：

• 锁定主版本号：CDN 或 npm 依赖写成@16而不是@latest，因为图标被移除时@latest会直接 404，锁版本则稳定到下个主版本。
• 先读法律免责声明：使用任何品牌图标前，花 2 分钟看完 DISCLAIMER.md。

核心工作流：把一个品牌图标从 slug 查到页面上

这一节以"在落地页展示 React、Vue.js、GitHub 三个技术品牌"为主线，走通 查找 → 插入 → 调整 → 验证 完整链路。

第 1 步：查 slug

在 slugs.md 中搜索品牌名（它是自动生成的对照表，格式为品牌名 | slug）：

注意 Vue.js 的 slug 是vuedotjs而不是vue——品牌名里的.会被转成dot，猜 slug 不如查表。

第 2 步：拿到图标数据

npm 包里按si+ 首字母大写的 slug 导入，每个图标返回title、slug、hex（品牌色）、svg（完整 SVG 字符串）、path等字段：

const {siReact, siVuedotjs, siGithub} = require('simple-icons');

第 3 步：插入页面

最省事的写法是直接引用仓库中的 SVG 文件，24×24 是库的统一基准尺寸：

<img width="24" height="24" src="icons/react.svg" alt="React" />

第 4 步：调整颜色

图标默认单色，官方品牌色存在hex字段里（React 是61DAFB、Vue.js 是4FC08D）。内联 SVG 时用 CSS 的fill上色；走官方带颜色的 CDN 服务时，则直接在 URL 里追加颜色参数，例如/react/61DAFB，还支持第三段参数指定深色模式颜色。

第 5 步：验证

浏览器里应看到三个 24×24 的品牌色图标。再对照 data/simple-icons.json 里对应条目的hex值，确认颜色与官方一致，这条链路就跑通了。

进阶技巧：别名搜索、SDK 转换与团队协作

以下几条是真正能省时间的用法，各配一个适用场景。

• 用aliases做别名匹配：React 的aliases.dup里登记了 React Native，搜"React Native"命中同一 slug。场景：用户搜的别名和库内品牌名不一致时。
• 用guidelines字段查官方规范：.NET等品牌的条目里带官方风格指南链接，改色改尺寸前先看品牌方要求。场景：图标要进正式产品而非演示稿。
• 用 SDK 的titleToSlug批量转换：sdk.mjs 导出的titleToSlug能按官方规则把品牌名转成 slug（小写、.转dot、去符号）。场景：写脚本从品牌名单批量生成图标文件名。
• 设计工具里用官方生态扩展：README 列出了 Figma 插件、Boxy SVG 库、Drawio 库、Miro 应用、Webflow 应用等第三方扩展。场景：不写代码、直接在设计稿里插入图标。

避坑指南：新手高频的 4 个问题

问答体速查，答案都控制在三行内。

Q1：依赖写成@latest，某天图标突然 404 了？

说明该图标在新版本中被移除了。改用主版本锁定（如@16），下个主版本发布前都不会失效。

Q2：图标能随便商用吗？

图标文件与数据是 CC0-1.0 许可，但品牌 logo 的商标权归各公司。图标只能用于表示该品牌，不能暗示官方合作或背书，详见 DISCLAIMER.md。

Q3：宽高都设 24，为什么图标视觉大小看着不齐？

所有图标共享 24×24 viewBox，但各品牌实际绘制范围不同。用官方带色 CDN 时追加viewbox=auto参数，会按绘制范围自动裁剪，一排图标就能视觉对齐。

Q4：库里没有我要的品牌？

Simple Icons 只收录流行品牌，且明确排除政府机构、宗教组织、体育俱乐部等类别。请先查是否已有请求，没有则按 CONTRIBUTING.md 的规则提交 issue。

小结：三步就能把图标用起来

回顾一下核心动作：在 slugs.md 查 slug →npm install simple-icons或 clone 仓库 → 按icons/[slug].svg插入页面并调成官方hex色。现在就去打开 slugs.md，挑一个你项目里的品牌，把它的 slug 找到——图标就已经到手了。

【免费下载链接】simple-iconsSVG icons for popular brands项目地址: https://gitcode.com/GitHub_Trending/si/simple-icons