Skip to main content
On this page

Icon Document Editor

Edit Xcode 26 .icon documents. Work with layers and groups, import SVG and PNG, preview by platform and appearance, and adjust fill and effect properties.

A .icon file is an Icon Composer document from Xcode 26. It describes an app icon in layers, and the system renders it live for each platform and appearance. In VS Code you can edit layers, import artwork, adjust fills and effects, and see a live preview.

Icon Document Editor with the layer tree on the left, preview in the middle and inspector on the right

Open a document

Right-click a .icon folder in the Explorer and choose KXBuild: Open Icon Document (.icon), or double-click the icon.json inside it. To see the raw JSON, click KXBuild: Open icon.json as Text in the title bar.

Layers

The left column holds groups and layers. Use the context menu or the title bar buttons to Add Group, Add Layer, Delete, Move Up and Move Down. List order is stacking order, so higher layers cover lower ones. The preview in the middle switches between platforms and the Any, Light, Dark and Tinted appearances.

Assets

Run KXBuild: Icon — Import Assets… or drag SVG and PNG files onto the asset list. Select an asset and click "Use in selected layer" to attach it to the current layer. Click "Remove" for assets you no longer need. Asset files are stored inside the .icon folder.

Inspector

GroupProperties
AppearanceName, Hidden, Opacity, Image, Scale, Offset
FillSystem Light / System Dark, Solid Color, Linear Gradient, Automatic Gradient, color space, Blend Mode
EffectsLiquid Glass, Lighting, Specular, Blur Material, Shadow, Translucency

With a group selected, only the properties that apply to groups are shown. Changes are written to icon.json immediately and the preview updates.

Next steps