PluginBench
Skill
Pass
Audit score 90

ios-icon-gen

affaan-m/ecc

Generate iOS app icons from SF Symbols or 275k+ Iconify icons for Xcode asset catalogs.

What is ios-icon-gen?

Creates PNG imagesets (1x, 2x, 3x) compatible with Xcode asset catalogs from either Apple's 5000+ SF Symbols or Iconify's 275k+ open-source icons across 200+ collections. Use this when building iOS/macOS projects and need production-quality icons that match your project's existing style.

  • Generate Xcode-compatible PNG imagesets with 1x, 2x, and 3x variants from SF Symbols or Iconify API
  • Search across 275k+ icons from 200+ open-source collections or use Apple's native SF Symbols
  • Customize icon color, size, weight, and output location before generation
  • Preview icons before generating to verify style and appearance
  • Output directly to Xcode asset catalogs or temporary directories for manual integration

How to install ios-icon-gen

npx skills add null --skill ios-icon-gen
Prerequisites
  • macOS (required for SF Symbols generation via Swift)
  • Internet connection (required for Iconify API; SF Symbols work offline)
  • Xcode project with Assets.xcassets folder
Claude Code
Cursor
Windsurf
Cline

How to use ios-icon-gen

  1. 1.Check your project's existing icons for size, color, and weight consistency using sips or Xcode
  2. 2.Search for icons using iconify_gen.sh search or browse SF Symbols app for the style you need
  3. 3.Optionally preview the icon with iconify_gen.sh preview to verify appearance
  4. 4.Generate the icon with custom color and output path using either iconify_gen.sh (Iconify) or generate_icons.swift (SF Symbols)
  5. 5.Verify the generated @2x PNG visually, then copy the .imageset folder to your Assets.xcassets directory and rebuild

Use cases

Good for
  • Generating app icons for a new iOS project with a specific design style from Iconify collections
  • Replacing placeholder icons with production assets matching your project's color palette
  • Finding receipt, document, or person icons that match existing icon weights and styles
  • Creating icon sets for navigation tabs, buttons, or settings screens in Xcode
  • Generating SF Symbols icons offline for Apple-native UI consistency
Who it's for
  • iOS/macOS app developers using Xcode
  • Developers building projects with existing icon systems who need style-matched additions
  • Teams needing consistent icon assets across multiple screen densities
  • Developers preferring open-source icons or Apple's native symbol library

ios-icon-gen FAQ

When should I use Iconify vs SF Symbols?

Use Iconify API for wide selection across 200+ collections and specific design styles; use SF Symbols for Apple-native consistency and offline generation on macOS.

What output sizes are generated?

Three PNG files at 1x (68px default), 2x (136px default), and 3x (204px default), configurable via --size option.

Can I customize the icon color?

Yes, use the --color option with a hex value (e.g., --color 007AFF). Default is 8E8E93 (Apple gray).

Do I need internet for SF Symbols?

No, SF Symbols generation via generate_icons.swift runs offline on macOS. Iconify API requires internet to search and preview.

How do I integrate generated icons into my Xcode project?

Either use --output ./Assets.xcassets/icons to generate directly there, or manually copy the .imageset folder to your asset catalog and rebuild.

Full instructions (SKILL.md)

Source of truth, from affaan-m/ecc.


name: ios-icon-gen description: Generate iOS app icons as PNG imagesets for Xcode asset catalogs from SF Symbols (5000+ Apple-native) or Iconify API (275k+ open source icons from 200+ collections). Use when generating icons, creating icon assets, adding icons to asset catalog, or searching for icons for iOS projects. metadata: origin: community

iOS Icon Generator

Generate PNG icon imagesets for Xcode asset catalogs from two sources.

When to Activate

  • Generating icon assets for an iOS/macOS Xcode project
  • Searching for icons across open source collections
  • Creating PNG imagesets (1x, 2x, 3x) for asset catalogs
  • Replacing placeholder icons with production-quality assets
  • Matching existing icon styles in an Xcode project

Core Principles

1. Two Sources, One Output Format

Both sources produce identical Xcode-compatible imagesets. Choose based on need:

SourceIconsRequiresBest for
Iconify API275,000+ from 200+ collectionsInternetWide selection, specific styles, open source icons
SF Symbols5,000+ Apple symbolsmacOS onlyApple-native style, offline use

2. Always Match Existing Style

Before generating, check the project's existing icons for size, color, and weight consistency.

3. Output Structure

Both methods produce a complete Xcode imageset:

<output-dir>/<asset-name>.imageset/
  Contents.json
  <asset-name>.png        # 1x (68px default)
  <asset-name>@2x.png     # 2x (136px default)
  <asset-name>@3x.png     # 3x (204px default)

Examples

Step 1: Assess Requirements

Determine icon needs: what the icon represents, preferred style, target color, and size.

If the project already has icons, check existing style:

# Check dimensions of existing icon
sips -g pixelWidth -g pixelHeight path/to/existing@2x.png

Step 2: Search for Icons

Iconify API (recommended for wide selection):

# Search all collections
$SKILL_DIR/scripts/iconify_gen.sh search "receipt"

# Search within a specific collection
$SKILL_DIR/scripts/iconify_gen.sh search "business card" --prefix mdi

# List available collections
$SKILL_DIR/scripts/iconify_gen.sh collections

SF Symbols (for Apple-native style): Browse the SF Symbols app or reference common names:

Use CaseSymbol Name
Documentdoc.text, doc.fill
Receiptdoc.text.below.ecg, receipt
Personperson.crop.rectangle, person.text.rectangle
Cameracamera, camera.fill
Scandoc.viewfinder, qrcode.viewfinder
Settingsgearshape, slider.horizontal.3

Step 3: Preview (Optional)

# Iconify preview
$SKILL_DIR/scripts/iconify_gen.sh preview mdi:receipt-text-outline

Step 4: Generate

Iconify API:

# Basic generation
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline editTool_expenseReport

# Custom color and output location
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline myIcon --color 007AFF --output ./Assets.xcassets/icons

Options: --size <pt> (default: 68), --color <hex> (default: 8E8E93), --output <dir> (default: /tmp/icons)

SF Symbols:

# Basic generation
swift $SKILL_DIR/scripts/generate_icons.swift doc.text.below.ecg editTool_expenseReport

# Custom color, weight, and output
swift $SKILL_DIR/scripts/generate_icons.swift person.crop.rectangle myIcon --color 007AFF --weight regular --output ./Assets.xcassets/icons

Options: --size <pt> (default: 68), --color <hex> (default: 8E8E93), --weight <name> (default: thin), --output <dir> (default: /tmp/icons)

Step 5: Verify and Integrate

  1. Read the generated @2x PNG to verify visually
  2. Copy to asset catalog if not output there directly:
    cp -r /tmp/icons/<name>.imageset path/to/Assets.xcassets/<group>/
    
  3. Build the project to verify Xcode picks up the new assets

Popular Iconify Collections

PrefixNameCountStyle
mdiMaterial Design Icons7400+Filled + outline variants
phPhosphor9000+6 weights per icon
solarSolar7400+Bold, linear, outline
tablerTabler Icons6000+Consistent stroke width
lucideLucide1700+Clean, minimal
riRemix Icon3100+Filled + line variants
carbonCarbon2400+IBM design language
heroiconsHeroIcons1200+Tailwind CSS companion

Browse all: https://icon-sets.iconify.design/

Scripts Reference

ScriptSourcePath
iconify_gen.shIconify API (275k+ icons)$SKILL_DIR/scripts/iconify_gen.sh
generate_icons.swiftSF Symbols (5k+ icons)$SKILL_DIR/scripts/generate_icons.swift

Best Practices

  • Search before generating -- browse available icons to find the best match
  • Match existing project style -- check dimensions, color, and weight of existing icons before generating new ones
  • Use Iconify for variety -- 200+ collections means you can find the exact style you need
  • Use SF Symbols for Apple consistency -- they match system UI perfectly
  • Generate directly to asset catalog -- use --output ./Assets.xcassets/icons to skip manual copying
  • Verify visually -- always preview the @2x PNG before committing

Anti-Patterns

  • Generating icons without checking existing project icon style
  • Using default colors when the project has a defined color palette
  • Generating at wrong sizes (check existing icons first)
  • Committing generated icons without visual verification