theSVG7,400品牌SVG图标库终极指南——开发者的免费开源logo神器【免费下载链接】thesvg7,400 brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg项目地址: https://gitcode.com/gh_mirrors/th/thesvg做项目需要 GitHub、Figma、AWS 的品牌 logotheSVG 是一个免费开源的 SVG 品牌图标库收录了 7,400 品牌 SVG 图标支持搜索、复制、直接嵌入项目。它基于 npm 发布、可按需 tree-shake 引入、TypeScript 完整类型提示一条命令npm i thesvg即可把品牌图标搬进你的代码。为什么需要 theSVG大多数图标库只关注 UI 图标箭头、齿轮、设置而品牌 logo散落在官网新闻包、Figma 文件和各种零散仓库里——找一张 Stripe 或 Notion 的 logo 往往要翻半天。theSVG 把这件事做成了一站式痛点theSVG 的解法品牌图标难找、格式混乱统一 slug 命名 统一 SVG 格式搜索即得同一品牌需要多种配色每个图标最多 7 种变体彩色/单色/浅色/深色/字标包体积臃肿支持 tree-shaking只打包用到的图标前后端/多框架重复造轮子React、Vue、Svelte 组件 CLI CDN API 全覆盖库内有什么7,400 图标全景 全部图标文件位于 public/icons/ 目录共 7,425 个图标文件夹。按集合Collection划分如下集合数量说明Brand Icons品牌图标4,675覆盖 115 类别的品牌 logoAuth Badges认证徽章858双因素认证/验证器应用用的圆形徽章AWS Architecture739官方 AWS 架构服务图标Azure Services626微软 Azure 服务图标Community社区256开发工具、数据库、框架等Google Cloud214GCP 服务图标Kubernetes38官方 K8s / CNCF 架构图标类别涵盖 AI、数据库、云计算、汽车、航空、支付、游戏等 115 方向比如AI、DevTool、Payment、Gaming、Linux。每个图标最多提供 12,300 种 SVG 变体组合。最快上手一条命令安装 ⚡npm i thesvg核心数据由 packages/icons/ 提供可按需引入import github from thesvg/github; github.svg; // 原始 SVG 字符串 github.title; // GitHub github.hex; // 181717 品牌色 github.variants; // { default, mono, ... } 多变体项目还准备了完整工具链详见 README.md 的 Install 与 Packages 章节thesvg全部图标一体化包thesvg/react带类型的 React 组件thesvg/vue带类型的 Vue 3 组件thesvg/svelte带类型的 Svelte 组件thesvg/cli终端命令行工具thesvg/mcp-serverAI 助手指针服务5 种使用场景总有一款适合你1️⃣ React 项目里当组件用import { Github, Figma } from thesvg/react; Github width{24} height{24} classNametext-white /;Vue 和 Svelte 用法几乎一致分别引入thesvg/vue、thesvg/svelte即可类型提示开箱即用。2️⃣ CLI像 shadcn 一样add 图标npx thesvg/cli add github # 把 SVG 落盘到项目 npx thesvg/cli search ai # 按关键词搜索不用打开浏览器终端一行命令即可把图标文件放进工程。CLI 源码见 packages/cli/。3️⃣ CDN 直引不安装也能用完全静态托管任何图标都可通过 URL 直接引用img srchttps://cdn.jsdelivr.net/gh/glincker/thesvgmain/public/icons/github/default.svg width32 height32 altGitHub /URL 规律很简单/icons/{slug}/{variant}.svg。适合 Markdown、Notion、Webflow 等不方便装包的场景。4️⃣ MCP Server让 AI 编辑器直接取图标theSVG 官方提供 MCP 服务器thesvg/mcp-server可接入 Claude、Cursor、Windsurf 等 AI 编辑器——描述给我一张 OpenAI 的 logoAI 就能自动按名称或类别拉取对应 SVG。源码入口在 packages/mcp/src/。5️⃣ 数据清单 API自建工具链的原料两个预构建 JSON 清单覆盖所有查询需求/api/registry.json完整图标清单slug、标题、别名、类别、品牌色、变体/api/categories.json类别与计数仓库内的源清单 src/data/icons.json 是事实来源包含每个图标的license、dateAdded等完整字段适合拉取后在客户端过滤无需鉴权。图标变体一个 logo7 种风格 每个图标最多支持 7 种变体适配任何设计语境变体 Key适用场景default品牌原色必有mono单色自动继承文字颜色light白色版适合深色背景dark黑色版适合浅色背景wordmark完整文字 logowordmarkLight/wordmarkDark文字 logo 的白/深色版比如页脚放白色 GitHub 图标用light按钮里跟文字同色用mono官网横幅用wordmark——不用自己拿 Illustrator 重绘。丰富生态编辑器、设计工具、AI 全打通 theSVG 的扩展生态位于 extensions/覆盖开发者日常几乎每个场景扩展能力Figma 插件浏览全部图标、变体选择器、插入可编辑矢量VS Code 扩展命令面板搜索复制 SVG / JSX / CDN 链接Raycast 扩展macOS 一个快捷键搜索并复制任意品牌 SVGNeovim 插件Telescope 选择器光标处插入 SVGAlfred 工作流macOS 全局快速搜索复制浏览器扩展Chrome/Edge 弹窗即搜即用设计侧还有 Figma 插件与 Iconify 图标集mono 与 color 两套可直接在 Figma 中取用。⚖️ 授权与品牌合规一次说清代码库与工具链采用MIT 协议见 LICENSE每个品牌图标仍是其商标所有者的知识产权theSVG 基于指示性合理使用提供商用前请遵循各品牌的使用规范AWS 架构图标以 CC BY-ND 2.0 分发不得修改Auth Badges 为 CC0 公有领域品牌方申请更新或移除图标可提交 issue完整条款见 LEGAL.md 与 TRADEMARK.md。参与 theSVG 社区 项目奉行No gatekeeping不设门槛——每个品牌都有位置提交图标通过官网 Submit 页面或提 PR图标放入public/icons/{slug}/开发环境git clone仓库后pnpm install pnpm dev本地 3333 端口起服务贡献指南详见 CONTRIBUTING.md。总结如果你需要一个免费、开源、可搜索、支持 tree-shaking 的品牌 SVG 图标库theSVG 目前是选择面最广的方案之一7,400 图标、7 种变体、115 类别npm / CDN / CLI / API / MCP 五种接入方式外加 Figma、VS Code、Raycast 等全套生态插件。下次再找品牌 logo直接npm i thesvg几秒钟搞定。【免费下载链接】thesvg7,400 brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg项目地址: https://gitcode.com/gh_mirrors/th/thesvg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考