做网页、写后台、搭管理面板，总得加几个图标——按钮旁的小齿轮、列表前的箭头、状态栏里的对勾……用 PNG 太糊？字体图标太重？这时候 SVG 就是解药：放大不虚、颜色随心换、代码里一贴就用。
这些 SVG 图标站，真香
Iconfont（阿里）：国内用得最多。搜“设置”“下载”“用户”，直接出 SVG 文件，还能一键生成字体包或 Symbol 引用。右键“复制 SVG 代码”，粘进 HTML 里就能改 fill 颜色：
<svg viewBox="0 0 1024 1024" width="24" height="24"><path d="M512 128c-176.7 0-320 143.3-320 320s143.3 320 320 320 320-143.3 320-320S688.7 128 512 128zm0 576c-137.2 0-248-110.8-248-248S374.8 168 512 168s248 110.8 248 248-110.8 248-248 248z" fill="#666"/></svg>Tabler Icons：开源免费，1800+ 简洁线性图标，每款都带 React/Vue 组件代码，也支持直接下载 SVG。比如要一个“邮件已读”图标，搜 mail-read，点开就有 SVG 源码和 CDN 地址。
Feather Icons：轻量极简风，200 多个图标全开源，GitHub 上 star 过万。适合做后台工具类页面，图标线条干净，嵌入后几乎不用调样式。
怎么用才顺手？
别再一张张下 SVG 文件了。推荐两种高效方式：
一是用 <svg> 内联写法，把图标代码直接贴进 HTML，配合 CSS 控制大小和颜色：
<button><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"><polyline points="20 6 9 17 4 12"/></svg> 提交</button>stroke: #007bff，图标立马变蓝。二是用 <use> 引用 Sprite 图标集，所有 SVG 合成一个文件，页面只加载一次，后续复用靠 ID：
<svg class="icon"><use href="/icons.svg#search"/></svg>小提醒：下载来的 SVG 文件，如果打开是黑底白图，大概率是 fill 被设成了 #000。用编辑器打开，删掉 fill="..." 或改成 fill="currentColor"，这样就能用 CSS 统一控制颜色了。
别踩坑
有些网站标着“免费 SVG”，点进去却要注册、强制关注公众号才能下载；还有些图标带隐藏追踪脚本，或版权写的是“仅限个人使用”。建议优先选 GitHub 开源项目（如 Tabler、Feather）、大厂托管平台（Iconfont、Material Icons），下载前扫一眼 LICENSE 文件，心里有底。
你常逛哪个 SVG 站？评论区甩个链接，咱一起挖宝。