App icon

The icon is an Icon Composer file in git:

Icon/AppIcon.icon

, a folder with

icon.json

and SVG layers in

Assets/

. You write both by hand. macOS adds the glass, the highlights, the shadow, the mask, and the dark, tinted, and clear looks. You never draw those yourself.

tools/make_icon.sh

compiles it with

actool

into

Resources/Assets.car

and

Resources/AppIcon.icns

build.sh

runs it when the icon changed.

```
tools/icon_review.sh
```
renders it with
```
ictool
```
(Icon Composer's command line tool, inside Xcode) into one contact sheet you read.

Older app without these files: copy

Icon/

tools/make_icon.sh

tools/icon_review.sh

, and

tools/icon_sheet.swift

from the

new-mac-app

template, the icon block of its

build.sh

, and

CFBundleIconName

AppIcon

from its

Info.plist.in

Other cases: more-cases.md.

An Xcode or XcodeGen project (Xcode compiles the
```
.icon
```
itself).
Converting an existing flat icon into layers.
A Dock icon that changes with a theme or style.
```
NSApp.applicationIconImage
```
shows a flat picture, so render glass versions ahead of time.

The file

text

Icon/AppIcon.icon/
  icon.json
  Assets/front.svg     1024 x 1024 canvas, same as the icon
  Assets/back.svg

json

{
  "fill" : { "automatic-gradient" : "srgb:0.20000,0.42000,0.96000,1.00000" },
  "groups" : [
    {
      "layers" : [
        { "glass" : true, "image-name" : "front.svg", "name" : "front" },
        { "glass" : true, "image-name" : "back.svg", "name" : "back", "opacity" : 0.6 }
      ],
      "shadow" : { "kind" : "neutral", "opacity" : 0.5 },
      "translucency" : { "enabled" : true, "value" : 0.5 }
    }
  ],
  "supported-platforms" : { "squares" : [ "macOS" ] }
}

```
fill
```
is the background:
```
solid
```
,
```
automatic-gradient
```
(one color, the system adds a soft gradient), or
```
linear-gradient
```
with two colors. Colors are
```
srgb:r,g,b,a
```
or
```
display-p3:r,g,b,a
```
.
The first layer in the list sits on top.
Shadow
```
kind
```
:
```
neutral
```
,
```
layer-color
```
, or
```
none
```
.
A different look per appearance goes in
```
<key>-specializations
```
, for example
```
fill-specializations
```
with an entry for
```
dark
```
.
The art fills the whole square. Never draw the rounded square, a margin, a shadow, or a sheen: the system adds them.

What makes it look like Apple made it

One idea. One object that says what the app does: a check for tasks, a stack of cards for a reader, a waveform for audio.
No text, no letters, no screenshots of the UI.
The glyph is your own drawing. Never use an SF Symbol, or a shape that looks like one: the SF Symbols license forbids symbols in app icons.
Two or three layers, each one flat shape in white or one tint. Glass gives the depth. Put the main shape on top, a softer one behind it.
The glyph is large: about 45 to 55 percent of the canvas width. Thin parts vanish at 16 px.
Filled shapes only. A stroke on an open path leaves a faint glass line.
One background hue.
```
automatic-gradient
```
looks right almost every time.
Distinct from the apps next to it in the Dock. List Dock apps without a screenshot:
```
defaults read com.apple.dock persistent-apps | grep file-label
```
.

Steps

Read
```
docs/BRIEF.md
```
. Write three icon concepts in one line each: the object, the background color, the layers. Pick one with the user, or pick the one that is easiest to recognize at 16 px.
Check: one concept is chosen and it uses no SF Symbol.
Write the layers as SVG files in
```
Icon/AppIcon.icon/Assets/
```
, on a 1024 x 1024 canvas, white filled shapes (
```
rect
```
with
```
rx
```
,
```
circle
```
,
```
path
```
). Write
```
icon.json
```
to list them. Delete layer files you no longer use.
Check: every
```
image-name
```
in
```
icon.json
```
has a file in
```
Assets/
```
.
Compile:
bash
```
tools/make_icon.sh
# wrote Resources/Assets.car and Resources/AppIcon.icns
```
Check: the line above prints. On an error, fix the file it names.
Review every look:
bash
```
tools/icon_review.sh
# wrote /tmp/<AppName>-icon.png
```
Read the PNG. It shows Default, Dark, Tinted, and Clear at 256 pt, then Default at 32 and 16 pt. The glyph reads in every look and is still recognizable at 16 pt. If not, make it bigger, bolder, or simpler.
Iterate two or three times. Change one thing per round: glyph size, layer opacity, background color.
Install and look at the Dock:
bash
```
./build.sh --open
```
If the Dock still shows the old icon, macOS cached it. Run
```
touch ~/Applications/<AppName>.app
```
and restart the app. As a last resort,
```
killall Dock
```
.

The user can fine-tune the file by hand in Icon Composer:

open -a "Icon Composer" Icon/AppIcon.icon

. Run

tools/make_icon.sh

after they save.

Gotchas

The folder must be named
```
AppIcon.icon
```
. With another name,
```
actool
```
writes nothing and still exits 0.
```
make_icon.sh
```
checks for that.
A missing layer file:
```
actool
```
fails with the name, but
```
ictool
```
exits 0 and renders an empty background. Compile before you review.
PDF layers do not render. Use SVG or PNG.

xcrun ictool

is a different tool. Icon Composer's

ictool

lives at

$(xcode-select -p)/../Applications/Icon Composer.app/Contents/Executables/ictool

The icon needs

CFBundleIconName

AppIcon

Info.plist

and

Assets.car

Contents/Resources

AppIcon.icns

covers older Finder views and macOS 15.

Done when

tools/make_icon.sh

succeeds, the contact sheet shows a clear glyph in all four looks and at 16 pt, the icon uses no SF Symbol, and the Dock shows the new icon.

app-icon

NPX Install

SKILL.md Content

App icon

The file

What makes it look like Apple made it

Steps

Gotchas