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 秒帮你判断该不该用这个项目避免装完才发现不匹配。项目信息数据定位流行品牌的单色 SVG 图标库所有图标统一 24×24 viewBox图标规模3456 个icons/目录实测数量当前版本npm 包 16.28.0许可证CC0-1.0图标文件与数据获取方式npm、Composer、CDN、字体单独分发包适合人群需要品牌 logo 的前端/全栈开发者、设计师项目说明见 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品牌名slug对应文件Reactreacticons/react.svgVue.jsvuedotjsicons/vuedotjs.svgGitHubgithubicons/github.svg注意 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 width24 height24 srcicons/react.svg altReact /第 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 时追加viewboxauto参数会按绘制范围自动裁剪一排图标就能视觉对齐。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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考