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- macOS (required for SF Symbols generation via Swift)
- Internet connection (required for Iconify API; SF Symbols work offline)
- Xcode project with Assets.xcassets folder
How to use ios-icon-gen
- 1.Check your project's existing icons for size, color, and weight consistency using sips or Xcode
- 2.Search for icons using iconify_gen.sh search or browse SF Symbols app for the style you need
- 3.Optionally preview the icon with iconify_gen.sh preview to verify appearance
- 4.Generate the icon with custom color and output path using either iconify_gen.sh (Iconify) or generate_icons.swift (SF Symbols)
- 5.Verify the generated @2x PNG visually, then copy the .imageset folder to your Assets.xcassets directory and rebuild
Use cases
- 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
- 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
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.
Three PNG files at 1x (68px default), 2x (136px default), and 3x (204px default), configurable via --size option.
Yes, use the --color option with a hex value (e.g., --color 007AFF). Default is 8E8E93 (Apple gray).
No, SF Symbols generation via generate_icons.swift runs offline on macOS. Iconify API requires internet to search and preview.
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:
| 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
- Read the generated @2x PNG to verify visually
- Copy to asset catalog if not output there directly:
cp -r /tmp/icons/<name>.imageset path/to/Assets.xcassets/<group>/ - 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
- 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/iconsto 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
Related skills
More from affaan-m/ecc and the wider catalog.
iterative-retrieval
Progressively refine context retrieval in multi-agent workflows to solve the subagent context problem.
ito-basket-compare
Compare prediction-market baskets against your research, portfolio, and thesis—read-only gap analysis without trading.
ito-baskets
Agent skill from affaan-m/ecc.
ito-compute
Agent skill from affaan-m/ecc.
ito-data-atlas-agent
Design background Data Atlas agents for Itô basket research with human-in-the-loop review—architecture and workflow planning, not live trading.
ito-inference
Agent skill from affaan-m/ecc.