矢量图与图片素材网站推荐
做前端或写博客时，找图往往比写代码还费时间。这篇把自己常用的素材站按图标 / 图片 / 插画 / 配色 / 处理工具分类整理，标了是否免费商用和各自的特点，随取随用。
一、图标图标库
先说结论：日常开发首选 Iconify，它聚合了 200+ 套图标集（含 Material、Lucide、Heroicons、Carbon 等），一个库解决所有需求，支持按需引入。
| 站点 | 特点 | 免费商用 | 备注 |
|---|---|---|---|
| Iconify | 聚合 200+ 图标集，20 万+ 图标 | ✅ | 强烈推荐，Vue/React 都有组件 |
| iconfont 阿里巴巴矢量图标库 | 中文图标最全，可建项目打包 | ⚠️ 需注意 | 国内访问快，但商用前看清授权 |
| Flaticon 【强推】 | 图标海量，风格统一 | ⚠️ 免费需署名 | 免署名需订阅会员 |
| Lucide | Feather 的续作，线性风、极简 | ✅ | 前端项目常用，体积很小 |
| Heroicons | Tailwind 团队出品，两种风格 | ✅ | 与 Tailwind 生态最搭 |
| Remix Icon | 中性风格，2600+ 图标 | ✅ | 中文文档友好 |
| IconPark | 字节出品，可在线调线宽/颜色/端点 | ✅ | 一套图标四种主题 |
| Font Awesome | 老牌，免费版够用 | ⚠️ 部分收费 | 生态最广 |
| Bootstrap Icons | 官方出品，MIT 协议 | ✅ | 不依赖 Bootstrap 也能用 |
| Simple Icons | 品牌 Logo 图标（微信、GitHub 等） | ✅ | 做友链、技术栈展示很合适 |
用 Iconify 在 Vue / React 里的写法：
1 | npm install @iconify/vue # Vue |
1 | import { Icon } from '@iconify/react' |
图标名可以在 icon-sets.iconify.design 里搜，搜到直接复制。
二、免费高清图片
| 站点 | 特点 | 授权 |
|---|---|---|
| Unsplash | 摄影质感最好，文艺风 | ✅ 可商用，无需署名 |
| Pexels | 图片 + 视频都有，中文界面 | ✅ 可商用，无需署名 |
| Pixabay | 图多，含插画与矢量 | ✅ 可商用（注意肖像/商标） |
| StockSnap | 每周更新，分类清晰 | ✅ CC0 |
| Burst | Shopify 出品，电商场景友好 | ✅ 可商用 |
| Foodiesfeed | 美食类专用 | ✅ 部分免费 |
| 觅元素 | 中文，免抠 PNG/背景素材多 | ⚠️ 有免费额度 |
配图找封面时，Unsplash + Pexels 二选一就够了，别在素材站里逛太久——挑图的时间成本远比想象中高。选定后统一裁成同一比例（如 16:9），整站观感会整齐很多。
三、插画资源
做空状态页、404 页、Banner 时特别好用：
| 站点 | 风格 | 特点 |
|---|---|---|
| unDraw | 扁平线条、可在线改主色 | ⭐ 最实用，改色后直接下载 SVG |
| Storyset | 场景插画，可编辑人物/配色 | 免费版需署名 |
| Open Doodles | 手绘涂鸦风 | ✅ CC0 |
| Open Peeps | 手绘人物头像库 | ✅ 可拼组合 |
| Blush | 可自由组合人物插画 | 免费版有限制 |
| IRA Design | 渐变色插画，可配色 | ✅ |
| drawKit | 成套插画包 | 部分免费 |
| ManyPixels | 扁平插画，风格统一 | ✅ 可商用 |
| Freepik | 素材最全（图/矢量/PSD） | ⚠️ 免费需署名 |
四、背景、纹理与小元素
| 站点 | 用途 |
|---|---|
| Hero Patterns | 可配色的 SVG 背景纹理，直接复制到 CSS |
| Transparent Textures | 叠加型纹理，做质感背景 |
| Shape Divider | 生成波浪/斜切分隔形状，复制 SVG |
| CleanPNG | 免抠透明 PNG |
| Remove.bg | 一键抠图去背景 |
| Excalidraw | 手绘风示意图，画流程图神器 |
五、配色与字体
| 类型 | 推荐 |
|---|---|
| 配色方案 | Coolors（一键生成）、Color Hunt（现成搭配） |
| 中国传统色 | 中国色（名字好听：月白、竹青、胭脂） |
| 渐变 | UI Gradients、CSS Gradient |
| 对比度检查 | Contrast Ratio（检查文字是否可读） |
| 免费字体 | Google Fonts、字由（中文商用字体） |
字体是版权重灾区。很多「免费下载」的字体只有个人授权，商用会被追责。中文商用以思源黑体/思源宋体（SIL 协议，可商用）最安全。
六、图片处理工具
下载完别直接用，压一压体积能小一个数量级：
| 工具 | 用途 |
|---|---|
| TinyPNG | PNG/JPG 有损压缩，效果好，免费每月 500 张 |
| Squoosh | Google 出品，可实时对比、转 WebP / AVIF |
| SVGOMG | SVG 精简，去掉编辑器留下的冗余属性 |
| iLoveIMG | 批量压缩、裁剪、格式转换 |
| Convertio | 格式互转（WebP ↔ PNG 等） |
格式怎么选：照片用 WebP（比 JPG 小 30% 左右）；图标/Logo/简单图形用 SVG（矢量无损、可用 CSS 改色）；需要动画的小图用 APNG 或 GIF（GIF 体积大，优先 APNG/WebP 动图）。
七、版权避坑（重要）
免费下载 ≠ 可以随便用。三类最常见的雷：
- 需署名却没署名 —— Flaticon、Freepik、Storyset 的免费资源大多要求标注作者，商用前务必确认
- 仅个人授权却商用 —— 字体、部分国内素材站常见，下载页的小字才写
- 含第三方元素 —— 图片里有可识别的人物肖像、品牌 Logo、艺术品，即使图片本身免费也可能侵权
安全的做法：
- 优先用明确标注 CC0 / 可商用 的站点（Unsplash、Pexels、Pixabay）
- 商业项目不留隐患就买会员（Flaticon、Freepik 年费不高）
- 涉及人物肖像的素材，谨慎用在商业宣传中
八、我的常用组合
封面 → Unsplash / Pexels
技术示意图 → Excalidraw 手绘
图标 → Iconify（Lucide 集）
压缩 → TinyPNG 过一遍再上传
UI 图标 → Iconify 按需引入
空状态插画 → unDraw 改主色
背景纹理 → Hero Patterns
字体 → 思源黑体 / Inter
配图 → Pixabay（中文搜索好）
人物插画 → Open Peeps / Blush
配色 → Color Hunt 抄一套
图标 → iconfont（中文图标全）
工具不在多，在于用得顺手。上面这些挑三五个放进书签栏，比收藏几十个站然后每次都重新找要高效得多。
