站点介绍

theSVG是一个为开发者和设计师精心打造的免费品牌SVG图标库，汇集了5656个高质量的SVG格式品牌图标，涵盖了全球知名品牌的SVG格式图标资源，所有图标均为矢量格式，支持无限缩放而不失质量，适合各种设计场景使用

站点内所有的图标均可以免费下载，而且相关项目已经在Github进行开源展示，如果你有兴趣可以直接通过站点右上角的GitHub链接进去进行批量下载等操作。

功能介绍

库与SDK

你可以通过官方提供的多个库和SDK将品牌图标集成到项目中：

• thesvg - 官方npm包，包含全部5656个图标，支持tree-shakeable和类型定义
• @thesvg/icons - 核心图标数据包，支持tree-shakeable、双ESM/CJS格式和单个图标导入
• @thesvg/react - 5656个类型化React组件，支持forwardRef、tree-shakeable和深色模式
• @thesvg/vue - 5656个类型化Vue 3组件，基于render函数、支持tree-shakeable、无需SFC编译器
• @thesvg/svelte - 5656个Svelte组件，支持类型化props、兼容Svelte 4和5、SvelteKit就绪
• Python - 社区提供的Python包装器，用于theSVG API和CDN访问

编辑器扩展

你可以在代码编辑器中直接搜索和插入图标，无需离开编辑环境：

• VS Code - 从命令面板搜索5656个图标，支持复制SVG、JSX、CDN链接或直接在光标处插入
• JetBrains - 支持IntelliJ、WebStorm、PyCharm等IDE，可从IDE工具窗口浏览图标
• Neovim - Telescope选择器配合浮动预览，支持插入路径或内联SVG

设计工具

你可以在设计工具中拖放品牌图标到设计稿中：

• Figma Plugin - 计划中，支持浏览、按名称或颜色搜索、拖入画布
• Sketch Plugin - 直接将品牌SVG插入Sketch画板
• Framer - 直接使用CDN URL，零配置、始终保持最新

开发者工具

你可以通过CLI、CDN和API以编程方式访问图标资源：

• @thesvg/cli - shadcn风格的安装器，使用npx @thesvg/cli add github可复制SVG文件
• CDN via jsDelivr - 通过全球CDN提供任何图标，支持在HTML、CSS或markdown中直接使用
• REST API - 付费API即将上线，支持搜索、获取元数据、编程方式检索SVG

AI与自动化

你可以让AI代理和启动器访问品牌图标：

• MCP Server - 支持Claude、Cursor、Windsurf，通过工具调用获取图标
• Raycast Extension - 搜索5656个图标，一键复制SVG或CDN URL，支持按类别筛选和预览变体
• Alfred Workflow - macOS快速访问，从任何位置搜索并复制到剪贴板

第三方集成

你可以在无代码和创意工具中使用theSVG：

• Webflow - 计划中，通过自定义嵌入组件使用CDN URL嵌入图标
• Notion - 计划中，使用CDN URL作为图像块在页面中嵌入品牌SVG
• Blender - 将SVG导入为曲线，适合3D logo效果图制作

使用方法/界面展示

站点首页截图如下：

站点默认是全英文的，但是不影响我们使用，每个图标提供了三个可以操作的按钮，分辨是「Copy」复制按钮、下载按钮、查看按钮，其中「Copy」和下载按钮会直接跳转到图标详情，但是下载按钮会直接将其图标下载到本地，查看按钮则是会弹窗显示大图标：

从上图中的1️⃣号按钮区域可以看到站点提供了直接下载以及jsDelivr两种方式，也就是提供了本地和外链，大家根据自己的需求来选择。

2️⃣号按钮区域则显示了两种不懂的获取方式，有点类似1️⃣号按钮的行为。

3️⃣号按钮区域则提供了不同开发环境下需要的图标代码，从上图可以看得出，其提供了React、Vue、HTML、Next.js、CSS等方式

4️⃣号按钮区域提供了不同尺寸的png格式图片供大家下载。

额外补充

站点提供的图标无论是数量上面还是质量上面都是非常客观和优秀的，而且每个图标提供的相关代码是一些常规的SVG站点所不能提供的，最主要的就是每个图标非常贴心的提供了不同开发环境中对应的代码，这个确实是很多站点做不到的，非常适合开发者。

如果你需要批量下载SVG图标，可以前往其官方GitHub进行下载： https://github.com/GLINCKER/thesvg