Skip to content
Skillpedia
PT
Images & icons280k · #216

ios-icon-gen

Lets your agent generate icons for iOS apps. It uses Apple symbols or icons from other sources to create the correct files.

What it does

This tool creates icons for mobile apps (iOS) using two different image sources. It generates files in the correct format for Xcode, which is the program used to develop apps for iPhone and iPad.

When to use it

  • ✓When you need to create icons for a new iOS app.
  • ✓When searching for a specific icon in a large online collection.
  • ✓To ensure your app's icons match the style of iOS system icons.

Example of what to ask your AI

“Generate a gear icon for settings, in blue color, for my iOS app.”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/affaan-m/ECC/blob/main/skills/ios-icon-gen/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/affaan-m/ECC/blob/main/skills/ios-icon-gen/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
View on GitHub ↗Raw file
How it works

You choose between using icons that come with Apple's system (SF Symbols) or a giant online collection (Iconify). The tool then creates image files in the correct sizes (1x, 2x, 3x) that Xcode needs.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add affaan-m/ECC --skill ios-icon-gen

Or download just the file:

curl -L https://raw.githubusercontent.com/affaan-m/ECC/main/skills/ios-icon-gen/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

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:

Source Icons Requires Best for
Iconify API 275,000+ from 200+ collections Internet Wide selection, specific styles, open source icons
SF Symbols 5,000+ Apple symbols macOS only Apple-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 Case Symbol Name
Document doc.text, doc.fill
Receipt doc.text.below.ecg, receipt
Person person.crop.rectangle, person.text.rectangle
Camera camera, camera.fill
Scan doc.viewfinder, qrcode.viewfinder
Settings gearshape, 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

Prefix Name Count Style
mdi Material Design Icons 7400+ Filled + outline variants
ph Phosphor 9000+ 6 weights per icon
solar Solar 7400+ Bold, linear, outline
tabler Tabler Icons 6000+ Consistent stroke width
lucide Lucide 1700+ Clean, minimal
ri Remix Icon 3100+ Filled + line variants
carbon Carbon 2400+ IBM design language
heroicons HeroIcons 1200+ Tailwind CSS companion

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

Scripts Reference

Script Source Path
iconify_gen.sh Iconify API (275k+ icons) $SKILL_DIR/scripts/iconify_gen.sh
generate_icons.swift SF Symbols (5k+ icons) $SKILL_DIR/scripts/generate_icons.swift

Best Practices

…

FAQ

What's the difference between SF Symbols and Iconify?

SF Symbols are icons created by Apple, which perfectly match the iOS look and can be used offline. Iconify is a much larger collection of open-source icons with more style variety, but it requires an internet connection.

Can I choose the icon's color and size?

Yes, you can specify the color and size of the generated icons to match your project.

Where are the icons saved?

By default, icons are saved in a temporary folder, but you can specify to save them directly into your Xcode project's asset folder.

Details

Original description by the author

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.

repo: affaan-m/ECC

Popularity

GitHub stars
280k
Ranking position
#216
License
MIT
Updated
10/15/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Interfaces (UI/UX)280k

accessibility

Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.

affaan-m/ECC

Agents280k

agent-architecture-audit

Makes your agent check if everything is working correctly. It finds and fixes problems in AI systems, ensuring they perform as expected.

affaan-m/ECC

Agents280k

agent-eval

Helps your agent compare different AI coding tools. It measures which one is faster, cheaper, and more reliable for specific tasks.

affaan-m/ECC

Agents280k

agent-harness-construction

Makes your agent better understand how to perform tasks. It optimizes the tools and instructions the agent uses to increase its chances of success.

affaan-m/ECC

Similar skills

Images & icons181k

algorithmic-art

Helps your agent create art using code, generating unique images. It's useful when you want original computer-generated art.

anthropics/skills

Images & icons181k

canvas-design

Helps your agent create beautiful visual art in files. It's useful when you ask for a poster, art, or any static design.

anthropics/skills

Images & icons101k

image-poster

Lets your agent generate unique images for posters, key art, and illustrations. It can use different image tools to create the output.

nexu-io/open-design