图标设计是UI设计基础，虽然微小，但是有自己独立的语言符号，可以帮助用户快速理解信息。根据图标使用功能的不同，icon图标设计大致可以分为两类：
-
可操作的图标：图标是可点击的并且可以触发操作。
-
信息图标：图标不可点击。它们描述或突出显示用户需要知道的信息。
不同类型icon图标设计和使用也不同，下文将详细介绍icon图标设计、使用以及与开发的对接。
1. 如何快速完成图标设计
icon图标设计是一套系统工程，不是设计出1-2个图标就可以的，一般都是一套几十个。所以icon图标设计是系统的、统一的图标集。在大多数项目中，不建议设计整套图标，可以从优质的图标库中检索自己需要的图标，再通过整理归类得出一套属于自己的图标集。
1.1 选择优质的图标库
在Pixso的插件中有两个非常优质的图标库，分别是阿里巴巴图标库和字节跳动图标库，包含大量SVG图标、多种填充、描边状态和文字图标，根据品牌调性选择适合的图标类型。
1.2 将图标添加到Pixso文件中
Pixso图标都是SVG矢量格式的，可以无限放大和缩小都会保持清晰，还可以改变颜色和改变形状，以便适用于项目中。Pixso中的icon图标设计插件使用起来也非常简单，只需要简单拖拽即可。
-
添加插件中的图标
在Pixso中选择右上角的插件工具，打开字节跳动图标库，选中需要的图标，将图标拖拽到画布中完成。
-
添加资源中的图标
在Pixso中选择左上角的资源，其中有海量优质icon图标设计素材，选中需要的图标，将图标拖拽到画布中完成。
1.3 自定义图标
从图标库中找到的图标一般情况下都有大小不同，颜色不同的情况，所以在选择合适的图标后，需要对他们进行一些处理，才可以正常使用。
-
调整每个图标的大小
在添加好图标后，需要将大小不一的图标统一起来。SVG图标都有一个矢量方形框架，调整每个框架让其大小统一。icon图标设计大小尽量设置成 4 或 8 的倍数，例如 16x16、20x20、24x24 等等。
-
为每个图标设置样式
统一icon图标设计颜色样式等设置，统一图标为默认状态，以便于后期添加图标状态，这些都统一好，方便匹配UI界面。
1.4 创建组件
将每个图标变成一个组件，后期设计中调用它们只需要在组件库中选择即可。Pixso创建组件的方法十分简单，有两种方式可以实现。
-
右键创建组件
选择其中一个图标，单击右键，选择创建组件，然后在左侧组件栏中就会出现刚刚创建的组件，使用时拖拽到画布中完成。
-
按钮快捷创建组件
除了创建单个图形组件，还可以框选多个图形创建组件，框选多个组件，点击工具栏中间的创建组件按钮，然后在左侧组件栏中就会出现刚刚创建的组件，使用时拖拽到画布中即可。
1.5 创建变体组件
在Pixso中还可以创建变体组件，切换不同状态的icon图标设计就像操作APP一样简单。方法也非常简单，只需要两步即可。
-
将不同状态创建为组件
选择按钮状态，右键选择创建组件按钮，创建出三个按钮组件。
-
点击创建变体组件按钮
选择不同状态的icon图标设计，点击右侧栏的创建变体组件按钮，在左侧组件栏中就会出现创建好的变体组件。
2. 如何与开发高效交接图标
完成设计稿后，开发人员需要从设计稿中导出的icon图标设计，在Pixso中切图导出非常方便，选择需要导出的icon图标设计，点击右侧栏中导出后面的“+”号，就会出现导出已选对象的按钮，点击按钮即可快速导出到本地。小贴士：再次点击“+”号可以导出不同尺寸的icon图标设计，最多可以输出三倍图标尺寸。
3. 推荐使用Pixso快速开启图标设计
icon图标是UI设计师最常用的元素，也是UI设计中最繁琐的一环，但往往会出现缺少优质图标库、创建使用过于复杂、图标导出过于繁琐等等问题。不过在Pixso中这些都不是问题，因为Pixso拥有最好用的icon图标设计工具
-
Pixso拥有大厂icon图标设计插件和超多优质icon图标设计素材，便于设计师随时调用。
-
Pixso创建组件、使用组件非常简单，拖拽使用即可，另外还有变体组件，改变icon图标设计状态和操作APP一样简单。
-
Pixso还有快速切图导出工具，可以保存出不同格式不同尺寸的icon图标设计。
另外Pixso是一款在线协同设计工具，不需要下载本地，打开Web就能在线设计，打破了设备限制，基于云上储存，走到哪儿都可以随时获取文稿进行修改。
