Visual Editor
The Zapicon visual editor gives you precise control over how your source image fits inside the final icon canvas. Every change is rendered in real time, so you can experiment before exporting.
Editor layout
The editor is split into two areas:
- Left panel — controls for the icon, background, and shape.
- Right canvas — live preview of the icon at the selected canvas size.
Icon controls
| Control | Range | Use case |
|---|---|---|
| Size | 0% – 100% | Scale the foreground image up or down. |
| Rotation | 0° – 360° | Rotate the image for dynamic compositions. |
| Horizontal offset | -100% – +100% | Move the image left or right. |
| Vertical offset | -100% – +100% | Move the image up or down. |
Tip: Hold the canvas and drag to adjust offset visually if your build supports it. Otherwise, use the numeric inputs.
Shape controls
| Control | Effect |
|---|---|
| Corner radius | Rounds the corners of the foreground image. |
| Squircle | Replaces rounded corners with the iOS superellipse curve. |
| Padding | Adds empty space between the image and the canvas edge. |
For authentic iOS app icons, enable Squircle with moderate padding. For Android adaptive icons, keep more padding so the icon remains safe inside the mask.
Background controls
- Solid color — pick a single flat background color.
- Gradient — choose two colors and an angle for a linear gradient.
- Transparent — export with an alpha channel (supported for PNG outputs).
Canvas size
Choose the export canvas size before you start editing:
- 512 px — fast previews, good for web.
- 1024 px — balanced quality for most platforms.
- 2048 px — maximum detail, ideal for App Store marketing assets.
Note: Canvas size affects the preview resolution. Exported packages always include the exact sizes required by each platform.
Design guides
Toggle design guides to check alignment:
- Apple icon grid
- Android icon grid
- Windows Fluent icon grid
- Golden ratio spiral
- Pixel grid
These guides are for visual reference only and do not appear in the exported files.