theSVG 开发者的品牌图标库 - ZHE.INK

theSVG 是一个开源的品牌 SVG 图标库，收录 5,600+ 品牌图标，涵盖品牌 Logo、AWS/Azure/GCP 云架构图标，支持 npm 包、CDN、CLI、API、MCP 服务器等多种使用方式，React/Vue/Svelte 全框架支持，Tree-shakeable，TypeScript 类型完备。

做项目时找品牌 Logo 是个老大难：官网 Press Kit 格式不统一，Figma 社区质量参差不齐，GitHub 上散落各处。theSVG 把这些全收拢到一个地方——搜索、复制、用，三步搞定。

图标收录

集合	数量	说明
品牌图标	4,019	55+ 分类的品牌 Logo
AWS 架构图标	739	官方 AWS 服务/资源图标（2026-Q1）
Azure 服务图标	626	微软 Azure 服务图标（2026-Q1）
Google Cloud 图标	214	GCP 平台图标（2026-Q1）

共 8,400+ SVG 变体——彩色、单色、亮色、暗色、文字标识，一个图标最多 7 种变体。

核心特性

1. 多种使用方式

方式	说明
npm 包	`npm i thesvg` ，支持 Tree-shaking
CDN	`https://thesvg.org/icons/{slug}/{variant}.svg`
CLI	`npx @thesvg/cli add github`
API	RESTful 接口，搜索/获取/分类
MCP 服务器	接入 Claude、Cursor、Windsurf 等 AI 工具

2. 全框架支持

// React
import { Github } from '@thesvg/react';
<Github variant="default" size={32} />

<!-- Vue -->
<script setup>
import { Github } from '@thesvg/vue';
</script>
<Github variant="mono" :size="32" />

<!-- Svelte -->
<script>
import { Github } from '@thesvg/svelte';
</script>
<Github variant="dark" size={32} />

<!-- CDN，零安装 -->
<img src="https://thesvg.org/icons/github/default.svg" width="32" />

3. Tree-shakeable

• 引入一个图标，只打包这一个图标
• 不会把 5600 个图标全塞进你的 bundle
• 使用 @thesvg/icons 作用域包获得最佳 Tree-shaking 效果

4. 7 种变体

变体	说明
default	品牌原色
mono	继承文字颜色
light	白色，适合深色背景
dark	黑色，适合浅色背景
wordmark	完整文字 Logo
wordmarkLight	白色文字 Logo
wordmarkDark	深色文字 Logo

5. AI 就绪

• 内置 MCP 服务器（@thesvg/mcp-server）
• Claude、Cursor、Windsurf 等 AI 工具可直接搜索和使用图标
• 对 AI 说"给我一个 GitHub 图标"，直接返回 SVG

6. 55+ 分类

AI、云服务、数据库、设计、开发工具、框架、支付、社交、游戏、音乐、安全、自托管……覆盖开发者日常所需的几乎所有品牌类别。

安装方法

npm 安装

# 全量包
npm i thesvg

# 按需引入（推荐）
npm i @thesvg/icons

# 框架组件
npm i @thesvg/react    # React
npm i @thesvg/vue      # Vue 3
npm i @thesvg/svelte   # Svelte

CDN 直接使用（零安装）

<img src="https://thesvg.org/icons/github/default.svg" />
<img src="https://thesvg.org/icons/aws/default.svg" />

CLI

npx @thesvg/cli add github

API 接口

端点	说明
`GET /api/icons?q=github&limit=20`	搜索图标
`GET /api/icons/{slug}`	获取单个图标及元数据
`GET /api/categories`	列出所有分类及数量
`GET /icons/{slug}/{variant}.svg`	获取原始 SVG 文件

应用场景

场景 1：项目文档/README

传统痛点：README 里想放技术栈图标，到处找 SVG，格式大小不统一

解决方案：CDN 直接引用，URL 格式统一，所有图标风格一致

场景 2：云架构图

传统痛点：画 AWS/Azure/GCP 架构图，官方图标包下载麻烦，格式混乱

解决方案：739 个 AWS + 626 个 Azure + 214 个 GCP 图标，npm 引入或 CDN 直接用

场景 3：产品页面/Landing Page

传统痛点：展示合作伙伴或集成平台的 Logo，逐个去官网下载

解决方案：4000+ 品牌图标，搜索即用，7 种变体适配不同背景

场景 4：AI 辅助开发

传统痛点：让 AI 帮你写页面，但 AI 不知道去哪找品牌图标

解决方案：MCP 服务器接入 AI 工具，AI 直接搜索和插入图标

常见问题

Q1：图标可以商用吗？

代码和工具采用 MIT 协议。品牌图标属于各自商标持有者，使用需遵守各品牌的使用规范（nominative fair use）。

Q2：AWS 图标的许可证是什么？

AWS 架构图标遵循 CC BY-ND 2.0（不可修改），按原样分发。

Q3：如何提交新图标？

访问 thesvg.org/submit 或直接提交 Pull Request。

Q4：图标更新频率？

云架构图标按季度更新（Q1/Q2/Q3/Q4），品牌图标持续接受社区贡献。

资源链接

• GitHub 仓库：https://github.com/GLINCKER/thesvg
• 在线浏览：https://thesvg.org

标签：