App icons with Icon Composer: from Figma to Xcode 26

Before Xcode 26, adding an app icon meant exporting a 1024×1024 PNG, dropping it into an asset catalog, and hoping the system resize looked good at every size. If you wanted a dark-mode variant, you needed a second PNG and a second slot. Tinted support was largely opt-in guesswork.

Icon Composer, introduced at WWDC25 and shipping in Xcode 26, replaces that workflow with a single .icon file. You bring one SVG; it generates every required size, and you configure Light, Dark, and Tinted appearances in the same editor. The result is an adaptive icon with no manual size management.

This walkthrough goes from picking a starting template in Figma to running on a simulator with all three appearances working.

Pick a starting template in Figma

Designing an icon from a blank canvas is the slowest path. The three Figma community files below give you a starting point matched to the iOS 26 visual language:

Open any of the links above, click Duplicate to your drafts in the top-right corner, then open your duplicate. You’re now working on your own editable copy, and edits here don’t affect the community original.

Check: your Figma drafts now contain a copy of the template. You can see it in Drafts in the left sidebar of the Figma home screen.

Prepare your artwork for Icon Composer

The single most important rule: your artwork layer must have a transparent background. Icon Composer owns the background fill; if you bake a white or coloured rectangle into the SVG, the background layer in Icon Composer will be invisible and the light/dark switching will break.

In your Figma duplicate:

1. Locate the frame labelled Foreground or Artwork (it should be 1024×1024 pt).
2. Select the frame and check the Fill panel on the right, then remove any solid or gradient fill so the frame itself is transparent.
3. Add or adjust your icon elements (shapes, icons, symbols) inside that frame.
4. If your design contains text: select the text layer → Type → Create Outlines (⌥⌘O). This bakes the letterforms into paths so they render identically at all sizes regardless of font availability.

To export:

1. Select your artwork frame.
2. In the right panel, scroll to Export and click +.
3. Set format to SVG.
4. Expand the settings (gear icon) → enable Outline text if you didn’t use Create Outlines above.
5. Click Export [frame name].

Save the .svg file somewhere you can find it. The Desktop works fine.

Check: open the exported .svg in a browser. You should see your icon artwork on a transparent (checkerboard) background with no rectangle behind it.

Create the Icon Composer file in Xcode

Open your Xcode project, then:

1. File → New → File… (or ⌘N).
2. In the filter field at the top, type icon.
3. Under the Resource category, select Icon Composer.
4. Click Next, name the file AppIcon.icon, and save it inside your project folder. Alongside your .xcodeproj file is a good location.
5. Xcode adds the file to the project and opens the Icon Composer editor.

The editor opens with a default placeholder icon: a grey square with a generic symbol. That placeholder is what you’ll replace with your own artwork in the next step.

Check: the Icon Composer editor is open. You can see a sidebar on the left and a preview strip in the centre. No build is needed yet.

Import your SVG into the Foreground layer

With the Icon Composer editor open:

1. Open Finder and locate your exported SVG (or PNG).
2. Drag the file onto the Foreground layer item in the left sidebar, or drag it directly onto the large icon preview in the centre canvas.
3. The placeholder artwork is replaced with your design immediately.
4. Use the transform handles (drag a corner of the artwork) to resize or reposition. Aim to keep the icon within roughly 80% of the canvas width. This is the safe zone that prevents clipping on home screen masking.
5. The preview strip at the bottom of the canvas shows your icon scaled to every required size. Check that small sizes (16 pt, 20 pt) still read clearly; if the design is too detailed, simplify.

Check: your artwork appears in the preview strip across all sizes. If the icon looks clipped at small sizes, scale it down slightly using the transform handles.

Set the background colour for each appearance

The Background layer controls the fill that appears behind your artwork. This is where you set your brand colour, and where you configure different fills for Light and Dark appearances.

Light appearance:

1. Click the Background layer item in the left sidebar. A colour well appears in the inspector on the right.
2. Click the colour well to open the system colour picker. Choose the colour you want for the light appearance, typically your brand’s primary colour.
3. The preview canvas updates in real time.

Dark appearance:

1. Click the Dark tab at the top of the editor.
2. Repeat the same steps: click Background → set a colour. For dark, use a deeper or near-black variant of your brand colour so the icon looks intentional rather than just dimmed.
3. The foreground artwork switches to the Dark tab automatically, so you don’t need to re-import it.

Check: toggle between the Light and Dark tabs. The background colour changes; the artwork stays. If only one colour appears across both tabs, you may have accidentally set the same value for both, so check the tab is actually selected before editing the colour.

Configure the Tinted appearance

The Tinted appearance is used when the user enables app icon tinting in Settings → Accessibility → Display & Text Size on iOS 18 and later. In iOS 26, tinted icons are more visible in the redesigned home screen when Automatic appearance is on.

1. Click the Tinted tab at the top of the editor.
2. Icon Composer automatically generates a monochrome version of your artwork. This uses the luminance values from your foreground SVG: bright areas become light, dark areas stay dark.
3. Check the result: the foreground artwork should be clearly visible against the background, even in grayscale. If the two elements blend together (low contrast), adjust the Brightness or Contrast slider in the right inspector.
4. You don’t need to supply a separate asset for Tinted. The auto-derivation is designed to work with well-structured artwork. If your SVG uses mostly flat colour fills, the result is usually clean without any manual adjustment.

Check: the Tinted preview shows a recognisable, single-colour version of your icon that still communicates the same shape as the Light version.

Add the .icon file to your target

The .icon file is already inside your Xcode project from Step 3. Now wire it up to the target’s icon setting:

1. In the Project Navigator, click your .icon file and open the File Inspector (⌘⌥1 or View → Inspectors → File).
2. Under Target Membership, confirm the checkbox next to your app target is ticked. If it isn’t, tick it.
3. Select your project in the navigator → select your app target → open the General tab.
4. Scroll to App Icons and Launch Screen.
5. Click the App Icons Source dropdown (currently set to AppIcon) and choose your AppIcon.icon file from the list.

If you don’t see it in the dropdown, the target membership from step 2 wasn’t saved, so go back and check the File Inspector.

Check: press ⌘B. The build should succeed with no icon-related warnings. If you see a warning about a missing icon size, ensure the .icon file is saved (⌘S) and that you didn’t accidentally leave the Tinted tab in an unsaved state.

Run and verify all three appearances

Press ⌘R to build and run on a simulator.

On the iOS simulator:

1. Press the Home button (or swipe up) to go to the home screen. Your app icon should appear with the Light appearance.
2. Open Settings → Display & Brightness and switch to Dark appearance. Return to the home screen, and your icon’s background should change to the dark colour you set.
3. To test Tinted: Settings → Accessibility → Display & Text Size → Colour Filters → enable Grayscale. The icon should now show the monochrome tinted variant.

Alternatively, use the simulator’s Appearance toggle: in Xcode’s simulator menu bar, Features → Toggle Appearance (⇧⌘A) switches between Light and Dark instantly without opening Settings.

Check: all three appearances show the correct artwork and background. The icon is crisp at all sizes on a Retina display. Done.

What changed with Icon Composer

The practical benefit is faster iteration: changing the background colour for dark mode is a two-click edit in the editor, not a round-trip through a design tool. The Figma community templates give you a starting point for the artwork; Icon Composer handles the rest.