Simple Icons 品牌图标库10 分钟快速接入 3400 官方 SVG Logo【免费下载链接】simple-iconsSVG icons for popular brands项目地址: https://gitcode.com/GitHub_Trending/si/simple-icons给官网底部补一排技术栈 LogoReact、Node、Postgres……时最省事的办法不是逐个跑去官网抠 PNG而是直接引 Simple Icons——一个收录 3400 多个品牌 SVG 图标的开源库当前数据文件里是 3476 条。每个图标都是 24×24 画布、单色、只有单个 path 的矢量文件风格天生统一尺寸随便放大都不糊。30 秒认识 Simple Icons一句话定位它把一堆流行品牌的 Logo 统一成同一套规格的 SVG让你不用管每个品牌的原始格式。几个关键数字先记住3476 个图标官方口径是 3400以当前 data/simple-icons.json 的实际条数为准。24×24 画布所有图标viewBox0 0 24 24同一排摆出来高度天然对齐。主版本 16当前包16.28.0minor/patch 每周发一次major 大约每半年一次。适合谁前端开发者直接用 npm 包做官网/落地页的人用 CDN 一行出图设计团队评审稿、白板协作走它 README 里列的第三方扩展Figma、Draw.io、Miro 等。第一次上手从 0 到插入第一个图标最快的路线是 CDN——不用装任何东西5 分钟内就能在页面上看到第一个品牌 Logo。选一个 CDN。jsDelivr 或官方cdn.simpleicons.org都行。用图标的slug拼出地址例如 GitHub 的 slug 是githubNode.js 是nodedotjs。把地址塞进一个img标签。img height32 width32 srchttps://cdn.simpleicons.org/github / img height32 width32 srchttps://cdn.simpleicons.org/nodedotjs /这一步做完你应该看到浏览器里出现两个 32×32 的灰色 Logo颜色默认就是该品牌在官网登记的品牌色。slug 从哪来slug 就是去掉空格和特殊符号的小写品牌名.NET变dotnet、.ENV变dotenv、11变1and1。完整对照见仓库里的 slugs.md3400 行品牌名→slug 一一对应或者在项目官网的搜索框里搜品牌名直接抄。图标在仓库里长什么样图标本体是icons/xxx.svg这种单文件结构固定一个svg roleimg viewBox0 0 24 24里面一个title存品牌名、一个path存图形没有任何颜色填充。元数据品牌名、品牌色 hex、来源链接则统一放在 data/simple-icons.json每条至少含title、hex、source三个字段。一条真实工作流给官网技术栈区装 Logo把上面这套串成一个完整场景假设要在首页放 React、Node.js、Postgres、GitHub 四个技术 Logo。定清单先写下要用的 4 个品牌把 slug 查出来react、nodedotjs、postgres、github。装包。项目里已经用 Node 时一行命令拉取整个库npm install simple-icons按 slug 导入对应图标导出名是si加上首字母大写的 slugimport {siReact, siNodedotjs, siPostgres, siGithub} from simple-icons;拿到数据。每个导入项是一个对象svg字段是完整 SVG 字符串hex字段是官方品牌色如#61DAFB。渲染。把svg字符串注入 DOM给每个图标套上统一尺寸用各自的hex上色——颜色直接来自官方数据不用自己猜。发布。四个 Logo 高度一致、颜色准确、来源可追溯source字段。整条流程没有一个图标需要你手动改。想省事的话第 2~5 步也可以全换成 CDN 的img标签完成。效率放大把图标库变成团队资产以下三件事做到位能让这库从能用的图标变成团队共享的图标资产。只在 URL 里换色含暗色模式什么时候值得用你不想动 SVG 内容只想要品牌色、单色或深色适配比如页面要切夜间模式。怎么做官方 CDN 支持在 slug 后追加颜色第一段是亮色、第二段是暗色颜色可以是 hex 也可以是 CSS 颜色名img height32 srchttps://cdn.simpleicons.org/react/61DAFB/282C34 /浏览器会按系统prefers-color-scheme自动在两个色值间切换一套代码同时覆盖深浅色页面。用 viewboxauto 让一排图标等高什么时候值得用一排 Logo 高度看着不齐——因为各品牌原始图形在 24×24 画布里占的位置不一样。怎么做地址加?viewboxauto并只声明height不写widthimg height20 srchttps://cdn.simpleicons.org/github?viewboxauto /这样每个图标按自身比例缩放后再对齐到 20px 高一排下来视觉重量更一致。设计工具里直接取用什么时候值得用设计评审、白板协作、非开发同事也要拿 Logo。怎么做不用自己导出README 的第三方扩展表里列了 12 个官方收录的扩展包括 Figma 插件、Draw.io 库、Miro 应用、Blender 插件、Raycast、Typst、Webflow 等对应工具里装插件即可检索同一套图标。避坑清单用品牌图标前先过一遍✅项目是 CC0但单个图标不一定是。库整体走 CC0不代表每个 Logo 都能随便商用用前看该图标的license字段字段缺失不代表无许可只代表还没补录。✅对外投放前读一遍 DISCLAIMER.md。图标只代表对应品牌不能暗示官方合作或背书某些品牌有自己的 guidelinesguidelines字段或官网卡片上有链接商用时以品牌方要求为准。✅别改得认不出来。需要调整时保留核心识别特征尤其是带 ®/™ 的图标是否保留符号有明确规则见 CONTRIBUTING.md。✅注意库里没有的品牌。微软、Amazon/AWS、迪士尼、Oracle 等因品牌方保护严格被明确排除找不到的原因是合规不是遗漏。✅颜色用官方 hex别自己取色。每个图标的hex是登记值自己吸色容易偏。✅锁版本。major 版本会删图标、改 slug半年一次要么固定到具体大版本要么用latest但接受图标被删就 404的风险。✅只引用到的图标。前端建议用支持 tree-shaking 的打包器如 webpack别把 3400 个图标全打进包。个人用户先去 slugs.md 把要用的几个 slug 抄下来CDN 的img标签能出图就先上团队用户把图标版本和品牌 hex 值写进设计规范、锁定 minor 版本每半年跟一次 major 清理失效图标。【免费下载链接】simple-iconsSVG icons for popular brands项目地址: https://gitcode.com/GitHub_Trending/si/simple-icons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
