矢量图标把「能不能用」说清楚
图标好不好，不看它多好看，看它在你的网格里对不对齐、在深色底上够不够对比、授权条款允不允许商用。我们优先写这类判断标准，而不是罗列资源清单——清单会过期，标准不会。
ABOUT · shiliang-tubiao.cn
矢量图标 · 关于我们
我们做的是一个很窄的活儿：把「矢量图标」这件事讲清楚。哪个格式该在什么场景用、下载来的 SVG 为什么一改色就花、图标在 16px 下为什么糊成一团。这里没有下载按钮，只有把经验摊开写的长文。
2021开始整理矢量图标笔记
5条核心内容主线
3位常驻编辑与审校
48h版权投诉处理承诺
Company
我们把「矢量图标」这件小事，做成了长期功课
矢量图标库（shiliang-tubiao.cn）起步于 2021 年的一份内部笔记。那会儿团队在给一个后台系统做图标替换，设计师发现同一套图标在不同人手里能出三种线宽，前端发现导出的 SVG 里塞满了设计软件的冗余图层，改个颜色要翻半天。这些零碎的坑被记下来，越记越多，最后干脆整理成一个公开站点。
我们专注的事情只有一件：围绕矢量图标，把格式常识、检索方法、工程化落地这三段路讲通。你如果正卡在「下载了一堆 SVG 但不知道哪个能用」的阶段，或者遇到「图标在 Retina 屏上发虚、在深色模式里看不见」，这里大概率有对应的说明。我们不提供文件下载，也不做图标商店，做的是把判断标准交到你手里。
用户常问我们的价值在哪。说白了，图标这东西网上到处都是，缺的从来不是数量，而是「这个能不能商用」「这个 24px 的线稿缩到 16px 会不会糊」「这个 viewBox 被裁了怎么救」这类具体判断。我们把这些判断写成可复用的检查清单，谁都能拿去用。
坚持的理念很朴素：讲得清才写，拿不准就标注「暂未确认」。涉及具体授权条款、作者名单、获奖记录这类能反查的信息，我们以原作者与官方页面为准，不臆造、不补齐。这条边界我们写进了编辑流程，也写在了这一页里。
Culture
矢量图标三件我们愿意反复做的事
先问场景，再谈格式
移动端小尺寸、后台密集数据表、营销落地页的大插画，对矢量图标的要求完全不同。如果遇到 16px 下线条糊成一团，就先把线宽和网格对齐查一遍，再考虑换格式，往往问题不在格式上。
矢量图标不把猜测写成事实
授权条款、作者署名、更新日期，凡是我们无法核实的，就明确标注「以官方页面为准」。我们不编造下载量、评分和获奖记录，也不提供任何破解或未授权资源的路径，这条线不为了流量让步。
Insight
内行才知道的矢量图标辨别与使用细节
矢量图标打开 SVG 之前，先看这三行
拿到一个 SVG，别急着拖进项目。用编辑器打开，先找 viewBox：如果是 0 0 512 512 这类大数值，说明它是按大画布画的，缩到 24px 使用时线宽会被压细，得先等比缩放到 24×24 网格再调整。第二看 fill 是不是写死成 #000，写死意味着改色必须逐个改，正确做法是设成 currentColor，让图标跟着文字颜色走。第三看有没有 <style> 标签或 class 命名冲突，多个图标同时内联时，重名的 class 会互相污染。
像素对齐：糊不糊的分水岭
如果遇到图标在 1x 屏清楚、在 2x 屏发虚，八成是路径坐标落在半像素上。把关键描边对齐到偶数坐标（24px 网格下用 2px 线宽、坐标落整数），模糊基本消失。另外注意描边改填充：描边放大会变粗，填充不会，导出前把描边轮廓化更稳。
矢量图标检索的技巧：换词比换站更有效
搜「矢量图标」时直接搜中文常常命中一堆聚合页。更高效的做法是用场景词加格式词组合，比如「settings svg outline 24px」，再配合「-font」排除字体图标结果。找到一套风格统一的图标后，优先确认它的线宽、圆角、网格三要素是否一致，风格不统一比数量不足更伤界面。
矢量图标上线前的自查清单
- 统一网格：全站图标落在同一尺寸网格，24×24 或 20×20 择一，不混用。
- 统一线宽：2px 或 1.5px 定死，描边类图标不要和填充类混排。
- 颜色可继承：把
fill改为currentColor，深色模式自动适配。 - 语义可读：功能性图标加
aria-label，纯装饰加aria-hidden="true"。 - 请求合并：超过 20 个图标时用 symbol 雪碧图或内联，避免逐个请求。
- 授权留档：商用前把授权条款截图存档，注明来源与获取日期。
- 尺寸不写死：用
width:1em;height:1em让图标跟随字号缩放。
这套清单是我们审稿时实际在用的，哪一条你觉得不对，欢迎发邮件来掰扯——我们改过不止一次。
Team
背后是三个人，不是一台机器
这个站没有庞大的编辑部，内容由三位长期做图标与前端的人轮流写、互相审。每篇涉及格式规范的稿子，至少要过两道校对才发。
林砚
主编 · 图标格式与规范十二年 UI 与图标设计经验，负责矢量图标格式规范与检索方法类内容的审校，习惯先画网格再画图。
周聿
前端编辑 · SVG 工程化负责 SVG 引用、雪碧图与无障碍标注等实操教程的撰写，每个示例都跑过浏览器再发。
苏晚
版权与内容运营负责授权常识整理、来源标注核查与投诉受理，承诺 48 小时内给出处理回复。
FAQ
矢量图标被问得最多的六个问题
矢量图标到底是什么，和普通图片有什么区别？
矢量图标是用数学路径描述的图形，常见格式有 SVG、AI、EPS。它放大到任意尺寸边缘都清晰，文件通常只有几 KB，还能直接改颜色和线宽；普通位图（PNG、JPG）放大后会糊，改色也得重画。同一套图标，位图要出 1x、2x、3x 好几份，矢量一份就够。
在本站浏览矢量图标相关内容和资源安全吗？
本站是信息导航与内容解析站，只整理格式常识、检索技巧和使用方法，不托管、不上传、不代理任何文件或流媒体，也不提供破解、盗版下载路径。你在这里看到的是文字说明与指向公开来源的说明，不会触发任何文件下载。下载渠道请以原作者或官方站点为准，具体边界见服务定位与免责声明。
使用本站需要注册或登录吗？
不需要。全站内容无需注册、无需登录即可直接阅读，也不要求你填写手机号或邮箱。只有在通过邮件反馈纠错、版权投诉时才需要留下联系方式，我们会仅用于回复本次事项。
矢量图标怎么用到实际项目里？
设计侧把 SVG 拖进 Figma 或 Illustrator 后先做轮廓化，统一到 24×24 网格、线宽 2px，再导出；前端侧推荐内联 SVG 或用 symbol 雪碧图引用，给功能性图标补 aria-label 或 aria-hidden。具体步骤和常见坑（比如 fill 写死、viewBox 被裁）可以在深度解读一节看到更细的说明。
矢量图标和字体图标（icon font）有什么区别，该选哪个？
字体图标把图标当字符加载，好处是能继承字号颜色、兼容老项目；缺点是只支持单色、渲染有抗锯齿差异、无障碍语义弱。矢量图标（SVG）支持多色、渐变、精确像素对齐，可单独设 aria 标签，缺点是数量多时要注意请求合并。新项目优先 SVG；只有维护十年以上的老系统、图标又全单色时，继续用 icon font 更省事。
本站内容多久更新一次，发现错误怎么反馈？
格式规范、工具版本这类会变的信息，我们按季度复核一次，遇到 Figma、浏览器大版本更新会临时补写。发现错漏可以发邮件到 hello@shiliang-tubiao.cn，标题注明「纠错」，写清页面位置和你看到的问题；版权相关请发 copyright@shiliang-tubiao.cn，我们承诺 48 小时内给出处理回复。
Disclaimer
服务定位与免责声明
- 定位说明：本站是面向「矢量图标」主题的信息导航与内容解析站，提供格式科普、检索技巧与使用方法等文字内容，非官方站点，与任何图标平台、软件厂商无隶属或代理关系。
- 不托管不上传：本站服务器不存储、不缓存、不代理任何图标文件、素材包或流媒体资源，页面中出现的外部链接仅作来源说明，实际获取请以原作者或官方页面为准。
- 来源与版权：文中引用的公开信息、截图与示例，版权归原作者所有。我们尽量标注来源，若标注缺失或存在偏差，欢迎指正。
- 投诉与时效：如认为本站内容侵犯了你的权益，请发邮件至 copyright@shiliang-tubiao.cn，附上权属证明与具体页面地址，我们承诺在 48 小时内核实并处理，必要时先行下架相关内容。
- 未成年人提示：本站内容适合具备基本判断能力的设计与开发从业者阅读；未成年访客请在监护人指导下浏览，并按所用软件的官方授权条款使用素材。
- 信息时效：软件版本、格式规范与授权条款会随时间变化，文中内容仅供学习参考，涉及商用决策请以官方最新文档为准。
Contact
有话直说，我们回得挺快
不管是发现某个矢量图标的线宽说明写错了，还是想让我们补写某个格式的对比，都可以直接来信。写清页面位置、你看到的原文和你认为正确的做法，我们核实后会改，并在更新记录里注明。
如果是商务合作或内容授权，请在邮件标题加上「合作」；版权投诉请走 copyright@shiliang-tubiao.cn，处理更快。
✉ 给编辑部写封信- 品牌
- 矢量图标库（shiliang-tubiao.cn）
- 客服邮箱
- hello@shiliang-tubiao.cn
- 版权投诉
- copyright@shiliang-tubiao.cn
- 电话
- +86-571-8888-0000
- 地址
- 浙江省杭州市文三路 128 号数字创意园 3 号楼 5 层