App Icon Generation Skill

Use this skill when generating, resizing, or managing app icons and image assets for iOS/watchOS apps from SVG or PNG sources.

When to activate this skill

• User asks to add or update app icons
• User provides new logo/icon assets (SVG or PNG)
• User wants to add images to the asset catalog
• User asks about icon sizes or requirements

Required tools

Check for these tools before proceeding:

# Prefer Inkscape for SVG → PNG (high quality)
which inkscape

# sips is built into macOS for resizing PNGs
which sips

If Inkscape is not installed:

brew install --cask inkscape

Icon size requirements

iOS App Icon (AppIcon.appiconset)

watchOS App Icon (AppIcon.appiconset)

Image Assets (*.imageset)

Standard @1x, @2x, @3x scales. Base sizes depend on usage:

• Small icons: 24–32px @1x
• Medium icons: 48–64px @1x
• Logos: 128–256px @1x

Workflow: Generate app icons from SVG

Step 1: Create 1024px source from SVG

inkscape icon/source.svg \
  --export-type=png \
  --export-filename=icon/source-1024.png \
  --export-width=1024 \
  --export-height=1024

Step 2: Generate all iOS sizes

SOURCE="icon/source-1024.png"
DEST="Apps/iOS/BetterFitApp/Assets.xcassets/AppIcon.appiconset"

for size in 20 29 40 58 60 76 80 87 120 152 167 180 1024; do
  sips -z $size $size "$SOURCE" --out "$DEST/AppIcon-$size.png"
done

Step 3: Generate all watchOS sizes

SOURCE="icon/source-1024.png"
DEST="Apps/iOS/BetterFitWatchApp/Assets.xcassets/AppIcon.appiconset"

for size in 80 88 92 100 102 108 1024; do
  sips -z $size $size "$SOURCE" --out "$DEST/AppIcon-watch-$size.png"
done

Workflow: Create image asset (imageset)

Step 1: Create directory and generate PNGs

ASSETS="Apps/iOS/BetterFitApp/Assets.xcassets"
NAME="MyImage"

mkdir -p "$ASSETS/$NAME.imageset"

# From SVG (adjust base width as needed)
inkscape source.svg --export-type=png --export-filename="$ASSETS/$NAME.imageset/$NAME.png" --export-width=128
inkscape source.svg --export-type=png --export-filename="$ASSETS/$NAME.imageset/$NAME@2x.png" --export-width=256
inkscape source.svg --export-type=png --export-filename="$ASSETS/$NAME.imageset/$NAME@3x.png" --export-width=384

Step 2: Create Contents.json

{
  "images" : [
    {
      "filename" : "MyImage.png",
      "idiom" : "universal",
      "scale" : "1x"
    },
    {
      "filename" : "MyImage@2x.png",
      "idiom" : "universal",
      "scale" : "2x"
    },
    {
      "filename" : "MyImage@3x.png",
      "idiom" : "universal",
      "scale" : "3x"
    }
  ],
  "info" : {
    "author" : "xcode",
    "version" : 1
  }
}

Project asset locations

Naming convention for source files

Follow this structure when exporting from Figma:

icon/
  combo/
    primary.svg
    primary.png
  lettermark/
    primary.svg
    primary.png
logo/
  lockup/
    primary.svg
  stacked/
    light.svg
    dark.svg

Usage in SwiftUI

// App icon is automatic (set via asset catalog)

// Image assets
Image("Logo")
    .resizable()
    .scaledToFit()
    .frame(height: 60)

// Adapt to color scheme
Image(colorScheme == .dark ? "LogoStacked" : "LogoStackedDark")

Troubleshooting

Inkscape command not found

# Use full path if installed via Homebrew Cask
/opt/homebrew/bin/inkscape --version

# Or add to PATH
export PATH="/opt/homebrew/bin:$PATH"

sips produces blurry icons

• Always start from a 1024px source
• sips uses simple interpolation; for better quality, generate each size directly from SVG:

inkscape source.svg --export-type=png --export-filename=out.png --export-width=180

Asset catalog not picking up new icons

1. Clean build folder: Cmd+Shift+K in Xcode
2. Delete derived data: rm -rf ~/Library/Developer/Xcode/DerivedData
3. Verify Contents.json has correct filenames

Checklist

Before finishing icon generation:

• 1024px source PNG created from SVG
• All iOS sizes generated (13 files)
• All watchOS sizes generated (7 files)
• Contents.json matches generated filenames
• Verify with mise run ios:build:dev