Source: 爱上MAC | Software download link: IconKit for Mac
IconKit is a professional icon generation and management tool designed exclusively for macOS, aimed at helping designers and developers quickly create, manage, and export multi-size icon assets for iOS, macOS, Android, and Web projects. It simplifies the tedious process of generating a complete set of app icons from a single source image.
I. Detailed Overview of the Core Interface and Workspace
After launching IconKit, you will see a clean and efficient single-window interface, mainly divided into four core areas.
1.1 Top Toolbar
- Action Control Area (Left): Contains core action buttons such as “Add Image,” “Export All,” and “Clear Canvas.”
- Project Settings Area (Right): Provides a “Target Platform” selection dropdown menu (e.g., iOS, macOS, Android, watchOS, Custom) and a global settings entry point.
1.2 Left Preview Panel
- Displays all generated icon size variants in a list or grid format.
- Each item is clearly labeled with the platform (e.g., iPhone App), usage (e.g., Spotlight), size (e.g., 80×80), and scale (@2x, @3x).
- Click any preview image to make fine adjustments to it in the central canvas area.
1.3 Central Canvas and Editing Area
- This is the core area for visually editing icons.
- When a specific icon size is selected, the source image will be displayed here, overlaid with a reference frame representing the safe area.
- You can directly drag with the mouse to adjust the position of the source image, or use pinch gestures to zoom and rotate.
- The right side of the editing area typically provides quick adjustment buttons such as “Align,” “Scale to Fill/Fit,” and more.
1.4 Right-Side Inspector
- Size Information: Displays the specific parameters of the currently selected icon.
- Image Adjustment Controls: Provides numeric input fields for position (X, Y coordinates), scale ratio, and rotation angle for precise control.
- Canvas Settings: Allows you to modify the icon’s background color (for cases where a non-transparent background is needed).
II. Complete Workflow: From Creation to Export
Step 1: Create/Open a Project
Method: After launching IconKit, an empty project is created by default. You can directly drag source image files (such as PNG, JPG, SVG) into the central area of the application window, or click the “Add Image” button in the toolbar to select one.
Location: The center of the window or the “+” button on the left side of the top toolbar.
Shortcut: Command + O opens the file selection dialog.
Step 2: Select the Target Platform and Size Set
Method: In the dropdown menu on the right side of the top toolbar, select your target platform (e.g., “iOS App”). IconKit will automatically load all the icon sizes and scales required for that platform in the left preview panel.
Location: Top toolbar on the right, the “Target Platform” dropdown menu.
Tip: Selecting “Custom” allows you to fully manually add or manage the sizes you need.
Step 3: Adjust Icon Content and Layout
This is the key step to ensuring all size icons display perfectly.
- Global adjustment: Click the first or any icon size in the left panel, then drag, scale, or rotate the source image in the central canvas area. This adjustment is usually applied synchronously to all other sizes to ensure consistency.
- Individual fine-tuning: If a specific size needs a different composition, first select that size, then uncheck “Sync all sizes” or a similar option in the right-side inspector, and then make independent adjustments.
- Precise control: In the right-side inspector, directly enter the values for “Scale,” “X Offset,” and “Y Offset.”
Location: Central canvas area (visual operations) and the right-side inspector (numeric operations).
Step 4: Export the icon set
Method: After confirming all icon previews are correct, click the “Export All” button in the top toolbar.
- In the save dialog that appears, choose the export directory.
- Set the export format (usually PNG).
- Configure the filename rules (IconKit typically auto-generates them following the “name_size@scale.png” pattern).
- Click “Export”.
Location: Top toolbar, export button (usually a box or export arrow icon).
Shortcut: Command + E to quickly bring up the export dialog.
III. Advanced Tips for Common Features
3.1 Batch Sync and Independent Editing
- Tip: By default, adjusting one icon syncs to all sizes. For sizes that need special treatment (such as watchOS icons with different corner radii), first select that size, then find and turn off the “Apply All Changes” or “Sync” toggle in the right panel before editing.
3.2 Leveraging Vector Source Files
- Tip: If the source image is in a vector format such as SVG, IconKit will process it as a vector source. This means you can scale up infinitely without loss of quality, which works extremely well when generating very large icon sizes (such as macOS 1024×1024). Make sure to import high-quality vector sources for the best results.
3.3 Quick Preview and Inspection
- Tip: In the left preview panel, hover your mouse over preview images of different sizes to quickly check the zoomed-in effect. Use this feature to quickly inspect and ensure that icon details are clear and recognizable at every size.
3.4 Custom Size Sets
- Tip: For non-standard platforms (such as specific web projects), use the “Custom” platform. You can manually add the exact sizes you need (for example, 192×192, 512×512) and save them as presets for easy reuse in similar projects later.
IV. Common Problems and Solutions
Problem 1: The edges of exported icons are blurry or have jagged edges.
Solution:
- Check whether the source image resolution is high enough. It is recommended that the source image size be at least 2 times the largest icon size you need.
- Use vector sources (SVG) whenever possible.
- When adjusting the scale, avoid enlarging the source image beyond 150% of its original size.
Problem 2: When I adjust one icon, all the other icons change too, but I only want to change one of them.
Solution: This is caused by the synchronized editing feature being enabled. First select the specific size icon you want to adjust independently, then immediately go to the properties inspector panel on the right, find and uncheck options such as “Apply to all sizes,” “Sync All,” or similar wording, and then adjust the position or scale.
Issue 3: Cannot find the newly added icon sizes for a specific platform (e.g., a new iOS version).
Solution: IconKit’s icon size templates depend on the software version. Please make sure your IconKit has been updated to the latest version. If you are already on the latest version, you can try selecting “Custom” in “Target Platform” and then manually consult Apple’s official design guidelines to add the newly added sizes.
Issue 4: Imported SVG files show incorrect colors or styles.
Solution: Some complex SVG effects (such as filters and gradients) may not be fully supported. Try flattening the SVG in vector graphics software (such as Sketch or Illustrator), or export it as a high-resolution PNG with a transparent background and then import it into IconKit.
V. IconKit for Mac Keyboard Shortcuts Summary
| Function | Shortcut (Mac) | Description |
|---|---|---|
| New Project | Command + N |
Clear the current canvas and start a new project |
| Open Source Image | Command + O |
Open the file selection dialog to import an image |
| Export All Icons | Command + E |
Bring up the export settings and save dialog |
| Copy Selected Icon Settings | Command + C |
Copy the adjustment parameters of the current icon |
| Paste Settings to Selected Icon | Command + V |
Apply the copied parameters to the currently selected icon |
| Zoom In Canvas View | Command + + |
Zoom in the view of the central editing area |
| Zoom Out Canvas View | Command + - |
Zoom out the view of the central editing area |
| Reset Canvas View | Command + 0 |
Restore the view zoom to 100% |
| Toggle Synchronous Editing | Command + S |
(May vary by version) Quickly toggle whether the current adjustments are synchronized to all sizes |
| Show/Hide Guides | Command + L |
Toggle the display of guides for the icon safe area |
Through the detailed interface analysis, step-by-step guide, and tips summary above, you can fully master the core features of IconKit for Mac and efficiently integrate them into your icon design workflow, quickly generating professional icon assets that meet the standards of various platforms.
