图标
两个图标库分别满足不同需求:一个是可搜索的宽泛通用图标集,另一个是专门收录社交媒体与平台徽标的库,并配有独立的颜色与尺寸控件。
快速概览
- 打开 Icons 标签页(
Alt+4)。 - 浏览分类卡片,或按名称搜索。
- 点击图标即可将它插入到画布中央。
- 在属性面板中为它重新上色和调整大小。
- 插入平台徽标时,切换到社交图标库,按分类搜索或浏览,然后在插入前设定颜色和尺寸。
详细参考
通用图标库
图标被归入若干宽泛且便于浏览的分类:
| 分类 | 涵盖内容 |
|---|---|
| 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 Media | Instagram、Facebook、X/Twitter、LinkedIn、TikTok、YouTube、Pinterest、Snapchat、Reddit 等 |
| Business | GitHub、Dribbble、Behance、Medium 等 |
| Communication | Telegram、WhatsApp、Discord、Slack 等 |
| Symbols | 邮件、电话、地球、定位、日历等 |
| Technology | Apple、Google、Microsoft、Android 等 |
| General | 播放、音乐、相机、购物车、爱心等 |
颜色和尺寸
| 控件 | 取值范围 | 默认值 |
|---|---|---|
| 颜色 | 任意颜色 | 白色 |
| 尺寸 | 20-80 px | 40 px |
在点击图标之前先设定颜色和尺寸;每次插入都会采用当前的取值。插入后,每个图标仍可在属性面板中单独重新上色。
分步操作
通过搜索查找并重新上色图标
- 打开 Icons 标签页(
Alt+4)。 - 在搜索框中输入关键词,例如
cloud。网格会展开为跨所有分类的全部匹配项。 - 点击你想要的图标,即可将它居中放置到画布上。
- 选中该图标后,打开属性面板并设置它的 fill 颜色,例如
#1E88E5,让它与设计的其余部分相协调。
浏览某个分类并插入
- 打开 Icons 标签页,点击一张分类卡片,例如 Charts & Data。卡片上的数量会告诉你其中有多少个图标。
- 滚动进入分类后的网格;每个单元格都会显示图标及其名称。
- 点击某个单元格即可插入该图标。
- 点击 Back 回到分类卡片,再挑选另一组。
以设定的颜色和尺寸插入平台徽标
- 切换到社交图标库。
- 先设定颜色和尺寸(尺寸范围为 20-80 px,默认 40,颜色默认为白色)。
- 按分类搜索或浏览,然后点击徽标,即可按这些确切的取值插入。
- 重复操作,以相同尺寸放置多个徽标,排成整齐的一行;之后可在属性面板中单独为其中任意一个重新上色。
放置后再上色
你在社交图标库中设定的颜色和尺寸只在插入的那一刻生效。要更改已在画布上的图标,请选中它,然后在属性面板中编辑它的 fill。
常见任务
- 让图标与文本颜色相配:选中图标,将它的 fill 设为与标题或强调色相同的取值,使它看起来像是设计的一部分。
- 按关键词搜索:在搜索框中输入内容;由于同时匹配图标名称和分类名称,像“arrow”或“user”这样宽泛的词能一次性呈现出一整个系列。
- 返回分类:清空搜索框或点击 Back,即可离开分类详情视图或搜索结果。
- 放置一排社交徽标:在社交图标库中设定一个尺寸,然后依次点击各个徽标,它们就会以相同的比例插入。
- 拉开多个图标的间距:每个图标都会居中落在画布上,所以新插入的会叠在上一个之上。先把第一个拖到一旁,再插入下一个,然后对齐它们。
- 保存重新上色后的图标以便复用:右击它并选择 Save to My Shapes,参见我的形状。
疑难排查
- 搜索显示“No icons found”。 查询词没有匹配到任何图标名称或分类名称。试试更短或更宽泛的词,或者直接用分类名称。请记住,品牌和平台徽标位于社交图标库中,而不在通用图标集里。
- 通用搜索里找不到某个平台徽标。 请到专门的社交图标库中查找。Instagram、GitHub、WhatsApp 等标识只在那里。
- 图标只能上一种颜色。 通用图标是单色填充的矢量图形,因此它们作为一个平面形状整体上色;fill 控件无法生成多色图标。
- 社交图标插入时颜色或尺寸不对。 这些取值是在插入那一刻读取的。请在点击前先设定颜色和尺寸,或者选中已放置的图标并在属性面板中更改它的 fill。
- 新图标叠在一起。 每个图标都会居中插入到当前画布上,因此接连插入就会堆叠。先把每一个移到位再添加下一个,或者之后选中这一叠重新摆放。
键盘快捷键
| 快捷键 | 操作 |
|---|---|
Alt+4 | 打开 Icons 面板 |
提示
徽标请到社交图标库中找
如果某个平台徽标在通用图标搜索里没有出现,请到专门的社交图标库中查找。品牌标识都在那里,而不在通用图标集中。
重新上色以匹配你的配色
每个图标都只能上一种填充色。将它与你的文本色或强调色相匹配,使它读起来像是设计的一部分,而不是一枚贴纸。