Skip to content

图标

两个图标库分别满足不同需求:一个是可搜索的宽泛通用图标集,另一个是专门收录社交媒体与平台徽标的库,并配有独立的颜色与尺寸控件。

快速概览

  1. 打开 Icons 标签页(Alt+4)。
  2. 浏览分类卡片,或按名称搜索。
  3. 点击图标即可将它插入到画布中央。
  4. 在属性面板中为它重新上色和调整大小。
  5. 插入平台徽标时,切换到社交图标库,按分类搜索或浏览,然后在插入前设定颜色和尺寸。

详细参考

通用图标库

图标被归入若干宽泛且便于浏览的分类:

分类涵盖内容
Arrows & Navigation方向、箭头、移动、导航流向
Communication & Social聊天、邮件、分享、麦克风、社交
Files & Folders文件、文件夹、压缩包、存储、文档
Text, Layout & Editing字体排印、对齐、裁剪、编辑、布局工具
Business & Finance公文包、建筑、金钱、工作、发票
Charts & Data图表、数据库、活动、分析
Devices & Media相机、图像、视频、设备、播放
People & Accessibility用户、无障碍、健康、社区
Security & Alerts锁、盾牌、警报、扫描、安全
Travel & Maps地图、交通、路线、定位、出行
Nature & Weather太阳、月亮、云、植物、天气、地形
Commerce & Shopping购物车、店铺、包裹、折扣、配送
Home & Food家居、家具、食物、厨房、生活
Shapes & Symbols星星、爱心、徽章、几何标记
Miscellaneous库中其余各类图标

随着底层图标集不断扩充,每个分类下的确切数量会有所变化,但每个分类都可搜索,所以你不必被动地一直翻找。每张分类卡片都会显示实时数量,以及取自该分类首个图标的预览。

搜索

搜索会同时匹配图标名称和它所属的分类名称,因此像“wallet”“cloud”或“shield”这样的关键词,会在一个扁平的网格里汇集来自各个分类的图标。清空搜索框,或点击 Back,即可回到分类卡片。若某个查询没有任何匹配项,会显示一句简单的“No icons found”提示,而不是一个空网格。

插入图标

图标以矢量对象的形式插入,并居中于当前画布,因此它们在任何尺寸下都保持清晰,并且可以像其他任何对象一样上色、缩放和组合。

社交图标

这是一个独立的平台与品牌标识库,分为六个分类,插入时配有专门的颜色和尺寸控件:

分类示例
Social MediaInstagram、Facebook、X/Twitter、LinkedIn、TikTok、YouTube、Pinterest、Snapchat、Reddit 等
BusinessGitHub、Dribbble、Behance、Medium 等
CommunicationTelegram、WhatsApp、Discord、Slack 等
Symbols邮件、电话、地球、定位、日历等
TechnologyApple、Google、Microsoft、Android 等
General播放、音乐、相机、购物车、爱心等

颜色和尺寸

控件取值范围默认值
颜色任意颜色白色
尺寸20-80 px40 px

在点击图标之前先设定颜色和尺寸;每次插入都会采用当前的取值。插入后,每个图标仍可在属性面板中单独重新上色。

分步操作

通过搜索查找并重新上色图标

  1. 打开 Icons 标签页(Alt+4)。
  2. 在搜索框中输入关键词,例如 cloud。网格会展开为跨所有分类的全部匹配项。
  3. 点击你想要的图标,即可将它居中放置到画布上。
  4. 选中该图标后,打开属性面板并设置它的 fill 颜色,例如 #1E88E5,让它与设计的其余部分相协调。

浏览某个分类并插入

  1. 打开 Icons 标签页,点击一张分类卡片,例如 Charts & Data。卡片上的数量会告诉你其中有多少个图标。
  2. 滚动进入分类后的网格;每个单元格都会显示图标及其名称。
  3. 点击某个单元格即可插入该图标。
  4. 点击 Back 回到分类卡片,再挑选另一组。

以设定的颜色和尺寸插入平台徽标

  1. 切换到社交图标库
  2. 先设定颜色尺寸(尺寸范围为 20-80 px,默认 40,颜色默认为白色)。
  3. 按分类搜索或浏览,然后点击徽标,即可按这些确切的取值插入。
  4. 重复操作,以相同尺寸放置多个徽标,排成整齐的一行;之后可在属性面板中单独为其中任意一个重新上色。

放置后再上色

你在社交图标库中设定的颜色和尺寸只在插入的那一刻生效。要更改已在画布上的图标,请选中它,然后在属性面板中编辑它的 fill。

常见任务

  • 让图标与文本颜色相配:选中图标,将它的 fill 设为与标题或强调色相同的取值,使它看起来像是设计的一部分。
  • 按关键词搜索:在搜索框中输入内容;由于同时匹配图标名称和分类名称,像“arrow”或“user”这样宽泛的词能一次性呈现出一整个系列。
  • 返回分类:清空搜索框或点击 Back,即可离开分类详情视图或搜索结果。
  • 放置一排社交徽标:在社交图标库中设定一个尺寸,然后依次点击各个徽标,它们就会以相同的比例插入。
  • 拉开多个图标的间距:每个图标都会居中落在画布上,所以新插入的会叠在上一个之上。先把第一个拖到一旁,再插入下一个,然后对齐它们。
  • 保存重新上色后的图标以便复用:右击它并选择 Save to My Shapes,参见我的形状

疑难排查

  • 搜索显示“No icons found”。 查询词没有匹配到任何图标名称或分类名称。试试更短或更宽泛的词,或者直接用分类名称。请记住,品牌和平台徽标位于社交图标库中,而不在通用图标集里。
  • 通用搜索里找不到某个平台徽标。 请到专门的社交图标库中查找。Instagram、GitHub、WhatsApp 等标识只在那里。
  • 图标只能上一种颜色。 通用图标是单色填充的矢量图形,因此它们作为一个平面形状整体上色;fill 控件无法生成多色图标。
  • 社交图标插入时颜色或尺寸不对。 这些取值是在插入那一刻读取的。请在点击前先设定颜色和尺寸,或者选中已放置的图标并在属性面板中更改它的 fill。
  • 新图标叠在一起。 每个图标都会居中插入到当前画布上,因此接连插入就会堆叠。先把每一个移到位再添加下一个,或者之后选中这一叠重新摆放。

键盘快捷键

快捷键操作
Alt+4打开 Icons 面板

提示

徽标请到社交图标库中找

如果某个平台徽标在通用图标搜索里没有出现,请到专门的社交图标库中查找。品牌标识都在那里,而不在通用图标集中。

重新上色以匹配你的配色

每个图标都只能上一种填充色。将它与你的文本色或强调色相匹配,使它读起来像是设计的一部分,而不是一枚贴纸。

相关内容