一个图标该选多大：16 / 20 / 24 / 32 的取舍

图标尺寸不是「看着差不多就行」：同一条 1.5px 的线，在 16px 里占近 10%，在 32px 里只占 5%。尺寸一变，线宽、端点圆角、细节密度都要跟着变，否则整套图标会显得有的重有的轻。

本文目录

• 四个常用档位怎么选
• viewBox 与显示尺寸要分清
• 点击热区别和图标尺寸混为一谈
• 一页里混用多个尺寸的规则
• 响应式页面里的图标尺寸

四个常用档位怎么选

16px 适合表格行内、标签、密集后台，细节必须极简，通常改用填充版；20px 适合按钮与表单前缀；24px 是产品界面最通用的基准，多数开源图标库也以 24 为画布；32px 以上才适合带双色、渐变或装饰细节的图标。

• 16px：填充优先，别用带内描边的复杂图形
• 20px：线性 stroke-width 1.5 左右，端点圆角
• 24px：通用基准，成套图标统一到这个 viewBox
• 32px+：可上双色 / 插画，注意别整屏都用

viewBox 与显示尺寸要分清

viewBox 是内部坐标网格（如 0 0 24 24），width/height 或 CSS 决定实际显示多大。把 24 网格的图标显示成 16px 是可以的，但线条会被压细；正确做法是让库本身提供 16 网格版本，或者统一 stroke-width 后再整体缩放。

<!-- 内部 24 网格，显示 24px -->
<svg viewBox="0 0 24 24" width="24" height="24" ...>
<!-- 同一文件显示 16px：线条视觉上会变细 -->
<svg viewBox="0 0 24 24" width="16" height="16" ...>

点击热区别和图标尺寸混为一谈

图标 16px 不代表按钮只能 16px。可点击元素建议至少 32～44px 的触控区域，用 padding 撑开，SVG 居中。移动端尤其重要：看起来「点不中」多半是热区太小，不是图标画得小。

• 图标尺寸：视觉大小
• 按钮尺寸：可点击区域
• 两者用 padding 解耦，别把图标硬放大

一页里混用多个尺寸的规则

同一层级只用一种尺寸。导航、列表、按钮各自可以不同，但同排图标必须一致；确需强调某一个时，用颜色或底色，不要单独把它放大 2px——那种微小差异只会让人觉得没对齐。

响应式页面里的图标尺寸

响应式不等于让图标跟着容器百分比缩放。图标线条一旦被压成非整数像素，边缘就会发虚，同一排里不同图标还会因为拉伸比例不同而粗细不一。正确做法是设定几个断点，在断点处切换到离散的尺寸档（如窄屏 20px、宽屏 24px），并保持 viewBox 与 stroke-width 的搭配不变。表格密集区域可以整体降一档，但别让同一层级里出现两种尺寸。

• 用离散档位切换，不用百分比缩放
• 断点处同时调整图标与文字的间距
• 避免非整数像素造成的边缘发虚
• 同层级只用一种尺寸

常见问题

← 返回全部使用指南　·　许可与使用常见问题 →