Back to Details

ios-icon-gen

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

iOS Icon Generator

iOS 图标生成工具

Generate PNG icon imagesets for Xcode asset catalogs from two sources.
从两个来源生成适用于Xcode资源目录的PNG图标图像集。

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
  • 为iOS/macOS Xcode项目生成图标资源
  • 在开源图标集合中搜索图标
  • 为资源目录创建PNG图像集（1x、2x、3x规格）
  • 用生产级资源替换占位图标
  • 匹配Xcode项目中现有图标的风格

Core Principles

核心原则

1. Two Sources, One Output Format

1. 双来源，统一输出格式

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
两个来源均可生成完全兼容Xcode的图像集，可根据需求选择：
来源图标数量要求最佳适用场景
Iconify API200+个集合中的27.5万+款联网选择范围广、特定风格需求、开源图标
SF Symbols5000+款苹果原生图标仅支持macOS苹果原生风格、离线使用

2. Always Match Existing Style

2. 始终匹配现有风格

Before generating, check the project's existing icons for size, color, and weight consistency.
生成图标前，请检查项目中现有图标的尺寸、颜色和粗细是否一致。

3. Output Structure

3. 输出结构

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)
两种方式都会生成完整的Xcode图像集：
<output-dir>/<asset-name>.imageset/
  Contents.json
  <asset-name>.png        # 1x规格（默认68px）
  <asset-name>@2x.png     # 2x规格（默认136px）
  <asset-name>@3x.png     # 3x规格（默认204px）

Examples

使用示例

Step 1: Assess Requirements

步骤1：评估需求

Determine icon needs: what the icon represents, preferred style, target color, and size.
If the project already has icons, check existing style:
bash
undefined
确定图标需求：图标代表的含义、偏好风格、目标颜色和尺寸。
如果项目已有图标，请检查现有风格：
bash
undefined

Check dimensions of existing icon

检查现有图标的尺寸

sips -g pixelWidth -g pixelHeight path/to/existing@2x.png
undefined
sips -g pixelWidth -g pixelHeight path/to/existing@2x.png
undefined

Step 2: Search for Icons

步骤2：搜索图标

Iconify API (recommended for wide selection):
bash
undefined
Iconify API（推荐用于选择范围广的场景）：
bash
undefined

Search all collections

搜索所有图标集合

$SKILL_DIR/scripts/iconify_gen.sh search "receipt"
$SKILL_DIR/scripts/iconify_gen.sh search "receipt"

Search within a specific collection

在指定集合内搜索

$SKILL_DIR/scripts/iconify_gen.sh search "business card" --prefix mdi
$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` |
$SKILL_DIR/scripts/iconify_gen.sh collections

**SF Symbols（适用于苹果原生风格）：**
浏览SF Symbols应用或参考常见图标名称：

| 使用场景 | 图标名称 |
|----------|-------------|
| 文档 | `doc.text`, `doc.fill` |
| 收据 | `doc.text.below.ecg`, `receipt` |
| 人物 | `person.crop.rectangle`, `person.text.rectangle` |
| 相机 | `camera`, `camera.fill` |
| 扫描 | `doc.viewfinder`, `qrcode.viewfinder` |
| 设置 | `gearshape`, `slider.horizontal.3` |

Step 3: Preview (Optional)

步骤3：预览（可选）

bash
undefined
bash
undefined

Iconify preview

Iconify图标预览

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

Step 4: Generate

步骤4：生成图标

Iconify API:
bash
undefined
Iconify API：
bash
undefined

Basic generation

基础生成命令

$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline editTool_expenseReport
$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:**
```bash
$SKILL_DIR/scripts/iconify_gen.sh mdi:receipt-text-outline myIcon --color 007AFF --output ./Assets.xcassets/icons

可选参数：`--size <pt>`（默认68）、`--color <hex>`（默认8E8E93）、`--output <dir>`（默认/tmp/icons）

**SF Symbols：**
```bash

Basic generation

基础生成命令

swift $SKILL_DIR/scripts/generate_icons.swift doc.text.below.ecg editTool_expenseReport
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)
swift $SKILL_DIR/scripts/generate_icons.swift person.crop.rectangle myIcon --color 007AFF --weight regular --output ./Assets.xcassets/icons

可选参数：`--size <pt>`（默认68）、`--color <hex>`（默认8E8E93）、`--weight <name>`（默认thin）、`--output <dir>`（默认/tmp/icons）

Step 5: Verify and Integrate

步骤5：验证与集成

  1. Read the generated @2x PNG to verify visually
  2. Copy to asset catalog if not output there directly:
    bash
    cp -r /tmp/icons/<name>.imageset path/to/Assets.xcassets/<group>/
  3. Build the project to verify Xcode picks up the new assets
  1. 查看生成的@2x PNG图标进行视觉验证
  2. 如果未直接输出到资源目录，将其复制过去：
    bash
    cp -r /tmp/icons/<name>.imageset path/to/Assets.xcassets/<group>/
  3. 构建项目以验证Xcode已识别新资源

Popular Iconify Collections

热门Iconify图标集合

PrefixNameCountStyle
mdi
Material Design Icons7400+Filled + outline variants
ph
Phosphor9000+6 weights per icon
solar
Solar7400+Bold, linear, outline
tabler
Tabler Icons6000+Consistent stroke width
lucide
Lucide1700+Clean, minimal
ri
Remix Icon3100+Filled + line variants
carbon
Carbon2400+IBM design language
heroicons
HeroIcons1200+Tailwind CSS companion
Browse all: https://icon-sets.iconify.design/
前缀名称数量风格
mdi
Material Design Icons7400+填充+轮廓变体
ph
Phosphor9000+每个图标6种粗细
solar
Solar7400+粗体、线性、轮廓
tabler
Tabler Icons6000+统一描边宽度
lucide
Lucide1700+简洁极简
ri
Remix Icon3100+填充+线条变体
carbon
Carbon2400+IBM设计语言
heroicons
HeroIcons1200+Tailwind CSS配套图标
浏览全部集合：https://icon-sets.iconify.design/

Scripts Reference

脚本参考

ScriptSourcePath
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
脚本来源路径
iconify_gen.sh
Iconify API（27.5万+图标）
$SKILL_DIR/scripts/iconify_gen.sh
generate_icons.swift
SF Symbols（5000+图标）
$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
  • 先搜索再生成——浏览可用图标以找到最匹配的选项
  • 匹配项目现有风格——生成新图标前检查现有图标的尺寸、颜色和粗细
  • 用Iconify获取多样选择——200+个集合意味着你能找到完全符合需求的风格
  • 用SF Symbols保证苹果生态一致性——它们与系统UI完美匹配
  • 直接生成到资源目录——使用
    --output ./Assets.xcassets/icons
    跳过手动复制步骤
  • 视觉验证——提交前务必预览@2x PNG图标

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
  • 未检查项目现有图标风格就生成新图标
  • 项目已有定义好的调色板仍使用默认颜色
  • 生成错误尺寸的图标（先检查现有图标）
  • 未进行视觉验证就提交生成的图标