首页 / 工具 / SVG 图标查看

SVG 图标查看

32 个内建图标，全部用 24 网格上的线段手写而成，不引用任何图标库。挑一个，调尺寸、描边、线帽、接角与颜色，预览用内联 SVG 实时重画，右边给出可直接内联进页面的 SVG 标记。

图标尺寸描边颜色

线帽接角用 currentColor（跟随文字颜色）填充路径（实心图标用）

· 等待生成

路径数据（可编辑）

改这里可以直接调整图形；生成时会按当前尺寸与描边重新拼成完整 SVG。

SVG 标记

图标预览

—

实际尺寸对照

预览按 24 网格等比放大显示；下面一排小图标是 16 / 24 / 32 / 48 px 的真实大小，可以直接判断线条在界面里是否太细。

—

数据不出浏览器 · 零网络请求 · 可断网可用。
32 个图标全部写在这个页面里，没有图标字体、没有外链 sprite、没有 CDN；每个图标的路径坐标都落在 24 × 24 网格内，描边宽度按 24 网格的坐标单位计（1.5 是这套图标的主值）。
勾了 currentColor 后图标跟随父元素文字颜色，产物里写 stroke="currentColor"；取消勾选则改用颜色选择器的十六进制值，产物里同时写 stroke 与填充色，单独打开或内联都能正确显示。
「填充路径」是给实心图标准备的开关：这些路径本身是描边设计，勾上填充后会得到实心色块，形状仍然是那个轮廓，属于有意的降级而不是错误。
路径数据可以直接手改，改完点「生成 SVG」或按 Ctrl / ⌘ + Enter；坐标超出 0–24 也不会报错，只是会被 viewBox 裁掉。
下载的 .svg 带 XML 声明和 xmlns，可以单独当文件用；如果只要内联进 HTML，用复制出来的那份标记即可，它同样完整可用。