Create icons with Icon Composer
SwiftUI & UI Frameworks 进阶 0m

用 Icon Composer 制作应用图标

Create icons with Icon Composer

2025年6月9日

在 Apple 官方观看视频

一句话判断

如果你还在 Photoshop 里给图标套各种尺寸的圆角蒙版、手动做 dark/tinted 适配——停手。Icon Composer 把整条链路收进了「一个 .icon 文件」，这才是正确的方向。

这场 Session 讲了什么

2025 年 Apple 带来了 Liquid Glass 设计语言，图标不再是一张贴图，而是多层玻璃材质的堆叠。随之而来的问题是：同一套图标要适配 iPhone/iPad/Mac/Watch 四个平台、Default/Dark/Clear light/Clear dark/Tinted light/Tinted dark 六种外观——如果还用老办法，设计师会疯。

Icon Composer 就是为了解决这个问题而生的。它是一个独立工具（不是 Xcode 内置），专门用来组装分层图标、配置 Liquid Glass 材质属性、预览多平台多外观效果，最后输出一个 .icon 文件拖进 Xcode 就完事。

核心工作流分四步：

  1. 设计——在 Figma/Sketch/Illustrator/Photoshop 中分层绘制，用 Apple Design Resources 提供的模板（iPhone/iPad/Mac 统一 1024px，Watch 为 1088px）
  2. 导出图层——每层导出为 SVG（矢量）或 PNG（位图/渐变），按 Z 轴深度编号
  3. Icon Composer 调校——拖入图层、分组、配置玻璃属性（specular、opacity、translucency、shadow、blur）、切换六种外观预览
  4. 交付——保存 .icon 文件，拖入 Xcode Project Editor，构建运行即可看到效果

值得深挖的点

分组（Group）控制玻璃材质的边界

Icon Composer 最多支持 4 个 Group，每个 Group 独立接收 Liquid Glass 属性。这不是随意的限制——Apple 认为 4 层是图标视觉复杂度的合理上限。Home 图标用了全部 4 层，每层都是独立的玻璃片。Messages 只用了 1 前景 + 1 背景，简单有效。

外观属性分「per-appearance」和「all」两类

Opacity、blend mode、fill 这些属性是按外观（Default/Dark/Mono）分别配置的，因为它们在不同模式下通常需要调整。而其他属性默认跨所有外观统一。你可以点击 hover 上的 + 为任意属性创建独立的 variant，灵活度很高。

Chromatic Shadow 是个被低估的细节

当图标在白色背景上使用彩色元素时，试试 chromatic shadow——图标颜色会「溢出」到背景上，模拟真实的光线散射效果，视觉质感立刻拉满。然后给 Dark 和 Mono 模式保留 neutral shadow 的 variant。

Mono 模式的可读性关键：至少一个纯白元素

Icon Composer 会自动将彩色转灰度，但你需要手动确保图标中最重要、最可辨识的元素设置为白色，其余映射为不同灰度。自动转换能用，但手调对比度效果更好。

代码片段

这不是一个代码密集的 Session，但交付环节极简：

# Icon Composer 输出后，只需在 Xcode 中操作：
# 1. 把 .icon 文件拖入项目
# 2. 在 Project Editor 中选择该图标
# 3. Build & Run

设计图层导出时有一个关键技巧——用 Illustrator 的可以把图层批量导出为 SVG 的脚本（Apple 提供了下载）。如果是文字图层，导出前务必转为 outline，因为 SVG 不保留字体信息。

最佳实践

  1. 图层拆分要按颜色而非按视觉元素。比如 Translate 图标的气泡和文字分开，这样在 Dark 模式下只需改一个 fill 就搞定适配
  2. 源文件保持「图形本质」——flat、opaque、不加特效。模糊、阴影、specular 这些全部留给 Icon Composer 去加，因为它们是 Liquid Glass 的动态属性
  3. 不要在导出时包含圆角矩形或圆形蒙版，Icon Composer 会自动应用平台对应的裁切
  4. 背景色/渐变不要导出为图层，直接在 Icon Composer 中用 Canvas 的 inspector 设置，还能用系统预设的优化背景
  5. Watch 的圆形构图需要额外关注——如果元素碰到画布边缘，要放大到重新触边，或者在源文件中预留 bleed

还有什么值得关注

  • Icon Composer 目前是 beta 版，Apple 明确鼓励通过 Feedback Assistant 提需求
  • 配套 Session “Say hello to the new look of app icons”（session 362）讲的是设计语言本身，建议先看那个再看这个
  • Apple 自己所有系统图标今年都是用 Icon Composer 更新的——这说明工具已经经受了大规模实战检验
  • 如果你的图标风格偏插画/复杂写实，仍可以走老路直接往 Xcode 传多尺寸图片，系统仍会自动加上 specular highlight 边缘效果
  • Icon Composer 支持导出图片用于营销素材，不只是给 Xcode 用的
SwiftUI Design