IconFly for Mac Complete Operation Guide

Source: 爱上MAC  |  Software download link: IconFly for Mac

IconFly for Mac is a professional icon generation and adaptation tool designed to help developers and designers quickly generate full sets of multi-size icons that comply with platform specifications for various applications (such as iOS, Android, macOS, and Windows apps) as well as websites. Through its clean interface, it greatly simplifies the complex icon export workflow.

I. Detailed Explanation of the Core Interface and Workspace

After launching IconFly, the main interface is mainly divided into four clearly defined functional areas.

• 1. Top Menu Bar and Toolbar: Contains global control options such as file operations (new, open, save), canvas zoom, and preview mode switching.
• 2. Left Project and Layers Panel:
  • Project List: Displays all currently open icon projects for quick switching.
  • Layer Management: Displays all constituent elements of the current icon (such as the background layer, foreground vector graphics, and masks), and supports show/hide, lock, and order adjustment.
• 3. Central Canvas and Preview Area:
  • Main Canvas: Displays the icon design effect in real time, supports dragging directly to adjust element positions, and double-clicking a layer to edit it.
  • Multi-device preview panes: Usually located around the canvas or in a separate panel, displaying real-time previews of the icon’s appearance on device models such as iPhone, iPad, and Apple Watch.
• 4. Right-side Properties & Export Panel:
  • Inspector: Select any element on the canvas or in the Layers panel, and its detailed properties (such as size, position, color, corner radius, and opacity) will be displayed here, allowing for precise adjustments.
  • Export Configuration Panel: This is the core functional area of the software. Categorized by platform (iOS, Android, macOS) or format (PNG, ICO, ICNS, PDF), it lists dozens of preset icon sizes and configurations. Each configuration item has a checkbox in front of it for selecting the targets to be exported.

II. Complete Workflow: From Creation to Export

1. Create or Open a Project

Step 1: Launch a Project

• Create a New Project: After launching the software, click the menu bar File → New or use the shortcut Command + N. In the dialog that appears, set the base canvas size (typically choose the largest required size, such as 1024×1024).
• Open an Existing Project: Click the menu bar File → Open or use the shortcut Command + O, and select a previously saved IconFly project file (usually in .iconfly format).

2. Design and Adjust the Icon

Step 2: Edit the icon content

• Add/Edit layers: Double-click the default layer on the canvas, or use the menu bar Layer → Add New Shape Layer to create vector shapes (rectangles, circles, etc.). Drag new image files from Finder to add them as image layers.
• Adjust properties: Select any layer and adjust its color, size, position, etc. in the “Properties Inspector” on the right. For example, to change the background color, select the background layer and click the “Fill” color well in the properties panel to pick a new color.
• Apply platform-specific styles: For iOS or macOS icons, a consistent corner radius is usually required. Select the entire canvas or background layer, find “Corner Radius” in the properties inspector, and set it to an appropriate value (for example, iOS corner rounding is usually generated automatically by the system; here it can be set to 0 or a preview value).

3. Configure Export Parameters

Step 3: Select output targets

• In the “Export Configuration Panel” on the right, check the icon platforms and sizes you need to generate according to your project requirements. For example:
  • Developing an iOS App: Check all or the required sizes under “iOS” for iPhone, iPad, App Store, etc.
  • Create a website Favicon: Check the ICO format configuration under “Web”, which usually includes multiple sizes such as 16×16, 32×32, etc. in a single .ico file.
• Click the detail arrow to the right of each platform or format to further configure specific options, such as “Remove transparent areas” for iOS, “Adaptive icon background color” for Android, etc.

4. Preview and Final Export

Step 4: Generate icon files

• Preview: In the multi-device preview window grid in the central canvas area, confirm whether the icons display clearly and without jagged edges at various sizes.
• Execute export: Click the prominently displayed “Export All” button in the lower right corner of the interface or on the toolbar (or use the shortcut Command + E).
• Choose output directory: In the system save dialog that pops up, select a folder as the output directory.Important note: IconFly will automatically create subfolders named after each platform (such as “iOS”, “Android”) within this folder and place the icons of corresponding sizes into them.
• Click “Export” and the software will begin batch-generating all checked icon files. After the export is complete, there is usually a sound or notification.

III. Advanced Tips for Common Features

• Batch modify color themes: If your icon has multiple color variants (such as light/dark mode), do not manually create multiple projects. You can use “Layer Styles” or duplicate the project, then batch-select multiple related layers in the Attributes Inspector and uniformly modify their fill colors.
• Use vector source files: Use SVG format as the base layer whenever possible. When exporting from large-size icons to extremely small sizes (such as 16×16), vector graphics can keep edges sharp, while bitmaps may become blurry.
• Quick switching and comparison: In the project list on the left, you can open multiple icon projects at the same time. Use Command + ` (the key above Tab) to quickly switch between different project windows, making it convenient to compare designs.
• Custom export presets: If the export size combination for a project (such as a specific client’s WeChat Mini Program icon set) is fixed, after configuring all the checkboxes, you can use the menu bar File → Save as Preset. The next time you create a new project, you can load this preset directly without repeating the selections.

IV. Common Problems and Solutions

• Problem 1: The exported icons look blurry on devices or have jagged edges.
  • Solution: Make sure your source image size is large enough (at least 1-2 times the largest export size). Prefer vector graphics (SVG). Check whether “2x”, “3x”, and other high-resolution versions are checked in the export configuration. For small-size icons, you can try slightly adding a bit of “sharpening” effect to the layer in the attributes inspector.
• Issue 2: iOS icons are automatically rounded on the device, which does not match the design.
  • Solution: This is a characteristic of the iOS system. Make sure your icon background completely fills the canvas, with transparent corners. The system will automatically apply the standard superellipse rounded corners. In IconFly, you do not need to (and should not) draw the rounded corners yourself; simply provide a square PNG with a transparent background.
• Issue 3: When exporting Android adaptive icons, the background shape is incorrect.
  • Solution: Android adaptive icons consist of a foreground layer and a background layer. In IconFly’s layers panel, clearly distinguish between foreground and background elements. In the Android export configuration on the right, carefully set the background shape (circle, rounded square, square) and background color for the “adaptive icon” so that it matches the settings of the device launcher.
• Issue 4: The software becomes unresponsive or lags when exporting a large number of icons.
  • Solution: This is normal behavior, especially when processing complex vector graphics. Please wait patiently and do not force quit. You can try selecting only some platforms first to export in batches, reducing the processing load at one time. Also, make sure your Mac has enough available memory and storage space.

V. IconFly for Mac Keyboard Shortcuts Summary

Tip: The shortcuts above are general IconFly operations and may vary slightly between versions. The most accurate way is to check the shortcut settings for your current version via the menu bar.