SVG 图标样例库

看中哪枚图标就点它一下，代码直接进剪贴板。要改尺寸、描边或颜色，切到「定制输出」。

本地生成

选择工具

图标库、定制输出与雪碧图
图标库 按分组浏览与搜索，点一下就复制
浅色底
深色底

search

同一枚图标压在两种底色上。图标用的是 currentColor，颜色由外层元素的文字色决定，所以贴到你自己的页面里它会跟着文字走 —— 前提是用内联 SVG 或雪碧图；用 img 引 data URI 时不具备这个能力，页面上会标出来。

预览固定按最大尺寸放大显示，方便看清线条；实际尺寸以输出代码里的 width 为准。

分组

—

图标

点一下就把它复制走

选中的图标

可直接选中复制
等待输入…
当前工具图标库
当前图标search
图标总数—

常见问题

复制出来的图标能直接贴到项目里用吗？

能。复制出来的就是一段自带 viewBox 的完整 SVG，贴进 HTML 里立刻就能显示。图标体里没有写死任何颜色，描边用的是 currentColor，所以它会跟着所在元素的文字色走——这也是站内所有图标统一的做法。

为什么选 data URI 时颜色被写死了？

因为 img 标签指向的是一个独立文档，里面没有可以继承的文字色，currentColor 在这种场景下只会解析成黑色。与其给你一段「在预览里看着正常、贴过去变全黑」的代码，不如把它明确换成黑色，并在页面上标出来。想保留跟随文字色的能力，用内联 SVG 或雪碧图那两种输出。

雪碧图适合什么场景？

同一个页面上要用很多枚图标时。把所有 symbol 放进一张 SVG 贴在 body 里，之后每处只用一行 use 引用，浏览器只解析一次路径数据；比起几十段内联 SVG，标记会干净很多，改图标颜色也只需要改外层 svg 的 color。

这些图标是从哪来的，可以自己用吗？

都是本站为了自己的界面手绘的 24×24 线条图，没有引用任何第三方图标库，因此也没有附带他人的许可证要求。你可以把代码复制到自己的项目里使用。涉及商标注册这类需要唯一性的场景，请自行做检索确认。

会联网或上传我复制的图标吗？

不会。图标数据就写在页面加载的那两个脚本里，页面不发起任何网络请求，也不生成图片文件，只是把你选的图标拼成一段文本。你的选择和调好的参数只留在浏览器本地，方便下次打开接着用。

图标是抄来的还是画的，差别很大

从图标站下载一套图标，最麻烦的从来不是找图形，而是后面那堆事：许可证能不能商用、风格能不能统一、深色模式下要不要再来一套。这里换了个做法 —— 图标是本站为了自己的界面画的，24×24 视区、圆头端点的线条图，不加任何颜色，描边一律 currentColor。于是深色模式、换主题、改品牌色都不需要额外的图标文件，颜色跟着文字走就行。

统一的一套画法

全部按 24×24 视区、1.7 描边、圆头圆角绘制，混在一起用不会显得参差。

不写死颜色

描边用 currentColor，靠外层的文字色决定颜色，一份图标就能应付深浅两套主题。

五种输出格式

原始 SVG、React 组件、Vue 模板、CSS 背景图与 HTML img，按场景挑一种拿走。

在线调参数

尺寸、描边粗细、端点样式与颜色实时反映在预览和代码上，不用来回试。

深浅双底对照

同一枚图标同时压在浅底和深底上，一眼看出在两种主题下是不是都够清楚。

中文也能搜

键名、中文名与分组名三种输入都能命中，不用先记住图标叫什么。

雪碧图打包

勾一批图标合成一包 symbol，页面里每处只用一行 use 引用。

不联网

图标数据随页面下发，不请求任何接口，也不生成图片文件。

三个容易踩的地方

  1. data URI 里的 # 忘了编码。颜色 #2b3b52 里的井号在 URI 里是片段标识符的起点，不转成 %23，浏览器读到它就截断后半段 —— 图标直接空白，而且预览区完全看不出来，因为预览用的是内联 SVG。
  2. 把 currentColor 写进 data URI。img 指向的文档里没有继承来源，currentColor 只会解析成黑色。想要跟随文字色，就得用内联 SVG 或雪碧图，这两条路才有继承链。
  3. JSX 里属性名用了连字符。stroke-width、stroke-linecap 这些在 React 里必须写成 strokeWidth、strokeLinecap。写错不会报错，只在控制台留一条警告，属性静默失效，图标看起来「有点怪」但没人知道为什么。