免费 SVG 图标、插画与资源目录
精选优质 SVG 资源合集 — 图标、插画、工具、教程与灵感
图标
高质量 SVG 图标资源，覆盖线性、面性、彩色、3D 等多种风格
SVGRepo
超过 50 万个免费 SVG 图标和插画，支持在线编辑和批量下载
Lucide
简洁美观的开源图标库，提供 1500+ SVG 图标，支持主流框架
Phosphor Icons
灵活的图标家族，提供 7000+ 图标，6种粗细风格（Regular/Thin/Light/Bold/Fill/Duotone）
Font Awesome
最流行的图标库之一，2000+ 免费图标（共 16,000+），生态完善
iconfont
阿里巴巴矢量图标库，国内最大，10,000,000+ 图标，中文支持好
Flaticon
Freepik 旗下图标搜索引擎，超过 300 万个 SVG 图标，支持在线编辑和自定义颜色
Noun Project
全球最大的图标数据库之一，超过 1000 万个图标，覆盖几乎所有领域
Iconify
统一的图标框架，整合 150+ 图标集，超过 20 万个图标
Heroicons
Tailwind CSS 团队出品的精美 SVG 图标，提供 Outline、Solid、Mini 三种风格
Tabler Icons
免费开源 SVG 图标集，4900+ 像素完美的线条图标，支持 React/Vue
Bootstrap Icons
Bootstrap 官方图标库，2000+ 图标，与 Bootstrap 生态完美集成
Remix Icon
开源中性风格图标系统，2800+ 图标，支持多框架
Boxicons
精心设计的开源图标，1600+ 图标，提供 Regular/Solid/Logos 三种风格
Iconoir
开源图标库，1500+ 简洁线条图标，支持多框架
Feather Icons
简洁美观的开源图标，280+ 图标，影响了众多后续图标库
IconPark
字节跳动出品的图标平台，2600+ 图标，多种主题风格，支持自定义
Icons8
多风格图标库，1,000,000+ 图标，风格多样，有免费额度
Ant Design Icons
Ant Design 官方图标，400+ 图标，与 Ant Design 生态完美集成
IconScout
1400 万+ 设计资源平台，包含图标、插画、3D 和 Lottie 动画，支持 Figma 插件
SVG Icons
31 万+ 开源 SVG 图标，整合 227 套图标集，免费商用
IconArchive
80 万+ 免费图标资源，可按分类、艺术家、热门程度浏览，支持 PNG/SVG/ICO
插画与背景
矢量插画、背景生成器和纹理素材，适用于网页设计和产品界面
unDraw
免费可商用的矢量插画库，支持自定义主色调，适合网页和产品设计
Freepik
海量矢量素材、PSD 和图片资源，设计师必备的素材搜索引擎
Storyset
Freepik 旗下免费插画工具，提供多种风格的可编辑矢量插画
Humaaans
可自由组合的人物插画库，支持自定义姿势、服装和发型
Open Peeps
手绘风格的人物插画库，支持肤色、表情、配件等自定义组合
Vecteezy
免费矢量素材社区，提供大量可编辑的 SVG、EPS 和 AI 格式文件
Mixkit
免费高质量设计素材，包括矢量图形、视频、音乐和模板
DrawKit
精美的矢量插画和图标库，提供多种风格的主题包
Blush
可定制插画工具，与 Figma 集成，多种艺术家风格可选
IRA Design
渐变风格插画生成器，可自定义渐变色
ManyPixels
免费可商用的矢量插画库，提供多场景插画，支持 PNG 和 SVG 格式下载
PixelTrue
高质量免费矢量插画，风格现代统一，适合着陆页和产品界面
FreeSVG
免费 SVG 剪贴画和矢量图形库，公共领域授权，适合各类设计项目
工具
SVG 编辑器、优化压缩、格式转换、AI 生成等实用工具
LottieFiles
免费增值全球最大的 Lottie 动画社区，提供海量免费动画资源和在线编辑工具
SVGator
免费增值在线 SVG 动画制作工具，无需代码即可创建复杂的 SVG 动画
Lordicon
免费增值精美的动态图标库，提供线性、填充等多种风格的可交互 SVG 动画图标
Keyshape
付费Mac 平台的 SVG 动画编辑器，支持时间轴动画和导出多种格式
SVGR
SVG 转 React 组件工具，在线转换，支持多种选项
Vectr
免费矢量图形编辑器，支持实时协作
Boxy SVG
专业 SVG 编辑器，界面简洁，功能强大
SVG Optimizer
在线 SVG 优化压缩工具，无损压缩，显著减小文件体积
SVG AI
AI 驱动的 SVG 工具集，支持图片转 SVG、SVG 编辑器和 SVG 动画制作
SvgTrace
AI 图片转 SVG 工具，将低分辨率图片转换为高质量矢量图形
Recraft
AI 矢量设计工具，支持文生矢量图、图片矢量化和品牌风格控制
教程与文章
SVG 基础入门、动画进阶、路径滤镜、实战案例等学习资源
MDN SVG Tutorial
Mozilla 官方 SVG 教程，从基础概念到高级特性全面覆盖
CSS-Tricks SVG Guide
CSS-Tricks 的 SVG 完整指南，涵盖内联、CSS 使用和动画
CSS-Tricks SVG Animation
SVG 动画完整指南，使用 CSS 和 JavaScript 实现
Codrops SVG Tutorials
Codrops 的 SVG 创意教程集合，包含大量实战案例
SVG on the Web
SVG 在 Web 开发中的完整使用指南，实用性强
web.dev SVG Guide
Google 官方的 SVG 优化与最佳实践指南
W3Schools SVG
W3Schools 的 SVG 入门教程，适合初学者
SMIL Animation Guide
MDN 的 SMIL SVG 动画教程，原生动画技术详解
GreenSock SVG Animation
GSAP 官方 SVG 动画文档，专业级动画解决方案
SVG Path Tutorial
MDN 的 SVG Path 路径属性详解
SVG Filter Effects
SVG 滤镜效果详解，包含模糊、阴影等效果
Yoksel SVG Tools
SVG 可视化工具集合，帮助理解 SVG 语法
SVGO Documentation
SVG 优化工具 SVGO 的官方文档和使用指南
SVG.js Documentation
SVG.js 3.0 官方文档，轻量级 SVG 操作库
Snap.svg Documentation
Snap.svg 官方文档，Adobe 出品的 SVG 库
freeCodeCamp SVG Guide
免费编程教育平台提供的 SVG 入门教程，从基础到进阶，配有详细代码示例
Sara Soueidan Blog
SVG 领域权威专家的技术博客，深入讲解 SVG 模式、动画和可访问性
Smashing Magazine SVG
知名前端设计媒体，提供深入的高质量 SVG 实战文章和教程
灵感
SVG 交互作品、动画案例、生成艺术和 CodePen 创意合集
CodePen SVG Topic
CodePen 上的 SVG 创意作品集合，社区精选
Awwwards SVG Websites
Awwwards 上使用 SVG 的获奖网站，顶级设计参考
Haikei
SVG 背景生成器，一键生成各种风格的矢量背景
CodePen SVG Animation
CodePen 上的 SVG 动画作品搜索，海量创意灵感
Dribbble SVG
Dribbble 上的 SVG 设计作品，设计师灵感来源
Behance SVG
Behance 上的 SVG 项目展示，专业设计案例
SVG Art Gallery
SVG 艺术作品画廊，展示 SVG 的创意可能性
Generative Art with SVG
使用 SVG 创作生成艺术的教程和案例
SVG Experiments by Sara Soueidan
Sara Soueidan 的 SVG 实验文章，SVG 技术探索
Codrops SVG Inspiration
Codrops 的 SVG 灵感文章集合，创意设计参考
SVG Party
SVG 派对，展示各种 SVG 动画和交互效果
SVG Backgrounds
SVG 背景图案库，可自定义的矢量背景