App icons with Icon Composer: from Figma to Xcode 26

Hi, designers and developers. Let’s make an app icon with Icon Composer, the new icon editor in Xcode 26, and skip the afternoon of exporting PNGs in twenty sizes.

By the end of this article, you will be able to take a Figma template, export it as an SVG, build a single .icon file in Icon Composer with Light, Dark, and Tinted appearances, and see all three working on a simulator.

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

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

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 that matches the iOS 26 look:

Open any of the links above. Click Duplicate to your drafts in the top-right corner, then open your duplicate. You now have your own editable copy. 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

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 hidden, and the light/dark switching will break.

In your Figma duplicate:

1. Find the frame labelled Foreground or Artwork (it should be 1024×1024 pt).
2. Select the frame and check the Fill panel on the right. 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 turns the letters into paths. They then render the same at all sizes, no matter which fonts are installed.

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. Next to your .xcodeproj file is a good spot.
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. You’ll replace that placeholder 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 find your exported SVG (or PNG).
2. Drag the file onto the Foreground layer item in the left sidebar, or drag it straight onto the large icon preview in the centre canvas.
3. The placeholder artwork is replaced with your design right away.
4. Use the transform handles (drag a corner of the artwork) to resize or move it. Try to keep the icon within roughly 80% of the canvas width. This is the safe zone that stops the home screen mask from clipping it.
5. The preview strip at the bottom of the canvas shows your icon at every required size. Check that small sizes (16 pt, 20 pt) still read clearly. If the design is too detailed, simplify it.

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

Set the background colour for each appearance

The Background layer controls the fill behind your artwork. This is where you set your brand colour. It is also where you set 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, usually 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 version of your brand colour. That way the icon looks planned, not just dimmed.
3. The foreground artwork carries over to the Dark tab on its own, so you don’t need to import it again.

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

Configure the Tinted appearance

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

1. Click the Tinted tab at the top of the editor.
2. Icon Composer makes a monochrome version of your artwork on its own. It 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 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 built to work with well-structured artwork. If your SVG uses mostly flat colour fills, the result is usually clean without any manual changes.

Check: the Tinted preview shows a clear, single-colour version of your icon. It should still show 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 connect it 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. 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, make sure the .icon file is saved (⌘S). Also check that you didn’t 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. Go back to the home screen. 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.

Or use the simulator’s Appearance toggle: in Xcode’s simulator menu bar, Features → Toggle Appearance (⇧⌘A) switches between Light and Dark right away, 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 win is faster iteration. Changing the background colour for dark mode takes two clicks in the editor, with no trip back to the design tool.

Recap

The goal was to go from a Figma template to a working adaptive app icon on a simulator. The main points:

• Start from a Figma community template and duplicate it to your drafts.
• Export the artwork as an SVG with a transparent background. Outline any text first.
• Create an AppIcon.icon file in Xcode and drag your SVG onto the Foreground layer. Keep it inside the 80% safe zone.
• Set a Background colour for Light and Dark. Tinted is derived from your artwork on its own.
• Set the target’s App Icons Source to your .icon file, then check all three appearances on the simulator.

I hope this writing helps you. Thanks for reading, and share it with someone who still exports icons by hand.