京东设计师这一期放大招，给大家毫无保留的分享图标设计指南
一、标签栏图标规范
1、5种图标样式总结：
标签栏图标最近流行五种样式，线型+面型 、线型+线型、线型+线面、面型+面型、无图标+无图标。在线性图标中，描边都在1pt-2pt。
如图效果：
2、图标视觉大小
图标可分为圆形图标（50*50px)、方形图标（46*46px)、宽形图标（62px)、条形图标（56px)不同的图标形状为了看上去一致，图标尺寸大小要不同，比如50px×50px 的正方形比 50px×50px 的圆形面积更大，所以正方形的视觉大小也会大于圆形。为了统一图标的视觉大小，正方形要做适当的面积收缩处理。（矩形同理）
如图做收缩处理：
那么如何在做图标的时候就让图标大小统一呢，这里要用到辅助网格系统。
以上的网格规范建议尺寸只是参考，还要根据实际情况进行微调修正。
3、图标输出尺寸
iOS 规定标签栏图标的输出尺寸统一为 31pt×28pt；Material Design 规定标签栏图标的输出尺寸统一为 24dp×24dp。但是
由于图标形状的不同，每个图标大小还是要进行微调的，微调也有讲究的，有个安全边距，我们将一组图标都放置在一个比图标本身略大的相同尺寸容器中。而图标与这个容器之间的空白像素，正好也帮助我们规避了图标落地后，切图边缘像素可能被截断的现象发生。安全边距的间距统一是2dp。
如图效果：
二、静态图标
标签栏的图标一般分为静态图标和动态图标两种。这里重点讲一下静态图标，动态图标下期在做重点来讲。
静态图标又分为两种位图.png格式文件、矢量图标.svg 格式文件
1、位图
位图不同项目切图套数是不同的如
iOS切图需要 @1x/@2x/@3x 三种倍率的切图文件；
Android切图需要@1.5x/@2x/@3x/@4x 四种倍率的切图文件（@0.75x 和 @1x 切图层分别用于 ldpi 和 mdpi 分辨率设备，但这些设备现在几乎已退出市场，所以可不考虑，但最终视项目真实需求确定。）；
web 项目的切图@2x
2、矢量图
矢量图最大的好处是不失真，无论图标如何放大缩小都不会失真。
svg 不支持渐变颜色填充；
svg 不支持描边，请将所有的描边轮廓化。Sketch 中可通过「图层-轮廓化」；AI 中可通过「对象－路径－轮廓化描边」；
要确保一组图标的文件尺寸一致，需在图标下方增加一个透明方形，和图标一同导出。
总结：制作图标的指南都总结在这了，大家要注意的重点是图标的规范位图矢量图的规范。