——从图标到插画，一站打包免费商用
一、为什么这篇值得收藏？
- 全链路场景：图标、插画、背景、装饰图形一网打尽。
- 免费可商用：每个站点都标注了授权方式，避免踩坑。
- 格式干净：100% SVG，方便 React、Vue、Svelte 直接导入。
- 中文友好：搜索、分类、预览都支持中文或拼音。
二、图标类（Icon）
| 名称 | 数量/特色 | 授权/备注 | 直达 |
|---|
| SVG Repo | 50 万+ 纯 SVG，在线改色 | 完全免费，无需署名 | svgrepo.com |
| IconPark（字节） | 2 400+ 图标，React 组件化 | MIT 协议，可商用 | iconpark.oceanengine.com |
| Iconfont（阿里） | 2 000 万+，中文搜索 | 免费/需遵守 MIT | iconfont.cn |
| Heroicons | Tailwind 官方图标 | MIT | heroicons.com |
| Lucide | Heroicons 社区续作 | ISC 协议 | lucide.dev |
三、插画类（Illustration）
| 名称 | 风格 | 可编辑 | 直达 |
|---|
| unDraw | 扁平渐变 | ✅ 在线换主色 | undraw.co |
| Storyset | 3D/手绘/动态 | ✅ 可开关图层 | storyset.com |
| Open Doodles | 手绘线稿 | ✅ 可下载 SVG | opendoodles.com |
| ManyPixels Gallery | 2.5D 商务 | ✅ 可改色 | manypixels.co/gallery |
🔍 小技巧
- unDraw 的下载 URL 带
?bg=transparent 可直接去底。
四、综合矢量图库
| 名称 | 资源量级 | 过滤技巧 | 直达 |
|---|
| Freepik | 100 万+ 免费 SVG | 侧边栏 → License → Free | freepik.com |
| Pixabay | 8 万+ 矢量 | License → CC0 | pixabay.com/vectors |
五、学习与工具链
| 工具 | 用途 | 亮点 | 直达 |
|---|
| SVGO | 压缩/去冗余 | CLI & GUI | github.com/svg/svgo |
| SVGOMG | 在线版 SVGO | 实时预览压缩率 | jakearchibald.github.io/svgomg |
| Figma 社区 | 搜索“SVG”关键词 | 直接复制 SVG 代码 | figma.com/community |
六、React / Next.js 使用示例
npm i lucide-react
// src/app/about/page.tsx
import { Heart } from 'lucide-react';export default function About() {return (<section className="flex gap-2 items-center"><Heart className="w-6 h-6 text-red-500" /><span>Made with love</span></section>);
}
七、一键速查清单（复制收藏）
图标：svgrepo.com | iconpark.oceanengine.com | heroicons.com
插画：undraw.co | storyset.com | opendoodles.com
压缩：jakearchibald.github.io/svgomg
图库：freepik.com (License=Free) | pixabay.com/vectors
