Skip to main content
On this page

Asset Catalog Editor

Create image sets, color sets, symbol sets and app icons, generate every icon size from one 1024 image, set appearance, device and scale for image sets, and use the built-in validation and compile check.

AppIcon selected in the Asset Catalog Editor

Open the editor

FromAction
KXBuild viewClick the asset catalog under a project node
ExplorerRight-click a .xcassets folder and choose KXBuild: Open Asset Catalog, or double-click any Contents.json
Command PaletteKXBuild: Open Asset Catalog. If the workspace has several catalogs, you pick one from a list.
Back from text modeKXBuild: Open with Asset Catalog Editor in the Contents.json editor's title bar

If another tool changes files in the catalog, click KXBuild: Reload Asset Catalog in the title bar.

Add assets

Right-click an empty area or a folder in the tree on the left.

Menu itemCreates
New App IconAn icon from the iOS, macOS or watchOS template. For iOS you can choose all sizes or a single 1024 icon.
New Image SetAn .imageset with 1x, 2x and 3x slots
New Color SetA .colorset that can vary by appearance
New Data SetA .dataset holding any file plus a type identifier
New Symbol Image SetA .symbolset for SVGs exported from SF Symbols
New FolderA group. Check Provides Namespace to prefix the names of the assets inside.
New App Icon (visionOS)A layered visionOS icon
New App Icon & Top Shelf Image (tvOS)A tvOS .brandassets
New Image Stack (tvOS)An .imagestack with front and back layers

Right-click an item to Rename, Delete or Reveal in Explorer.

App icons

ActionWhat it does
Fill All Sizes from 1024×1024 Image…Pick a square PNG of at least 1024 pixels and every slot is filled with a scaled copy. You can fill the Dark and Tinted slots at the same time.
Add Platform…Adds slots for iPad, Mac, Watch, CarPlay and other platforms to an existing icon set
Convert to Single Size IconReplaces the per-size entries with one 1024 image and tells you how many files are no longer referenced

You can drag an image onto a single slot, or right-click it for Replace Image… and Remove Image. The 1024 App Store icon must not have an alpha channel, and the editor flags it if it does.

Image set attributes

AttributeValues
AppearancesAny, Light, Dark, Tinted, High Contrast. Each one you check adds slots.
DevicesUniversal, iPhone, iPad, Mac, Apple Watch, Apple TV, Apple Vision, CarPlay
GamutAny, or separate sRGB and Display P3
ScalesIndividual Scales (1x, 2x, 3x) or Single Scale (one vector image)
Render AsDefault, Original Image, Template Image
Preserve Vector DataKeeps PDF and SVG vector data so the image scales at runtime
CompressionHow the image is compressed at build time

Color sets take a Color Space, Hex and Opacity, or a system color. Data sets take a Type Identifier and a file. Symbol image sets accept SVG only.

Validation

The editor checks the catalog when it opens. Results go to the Problems panel, with a count in the title bar. It catches Contents.json parse errors, duplicate entries, empty slots, missing referenced files, images that aren't PNG or have the wrong size, an App Store icon with alpha, a missing 1024 icon, unreferenced files, out-of-range color components and more.

Platform-specific requirements need a compile to check. Click KXBuild: Compile-check Asset Catalog in the title bar and pick a platform. Warnings and errors also appear in the Problems panel.

Unreferenced files

After you replace an image, remove a slot or convert to a single size, the old files may no longer be referenced. The editor asks whether to delete them.

Next steps