The 1024x1024 icon canvas, masks, backgrounds and document-level settings.
1024x1024 icon canvas
A vector editor that only does icons.
Every document is a 1024x1024 icon canvas with center-origin coordinates, so what you design is exactly what macOS and iOS expect. No artboards to configure, no export math to guess.
Steps
Create a new document from the workspace (macOS app icon, iOS app icon or Folder icon).
Design freely: the canvas is always icon-shaped and 1024x1024.
Export; every size and platform ladder is generated from it.
Tips
Positions are measured from the center: 0/0 is the middle of the icon.
Questions
What size is the editor canvas?
A fixed 1024x1024 icon canvas with center-origin coordinates. All exports scale from it, from 16px up to 4096px.
Do I need to set up artboards?
No, the document is the icon. Use Boards if you want several icons side by side in one session.
Clip the canvas to the macOS squircle, the iOS rounded square, the watchOS circle, or no mask at all. What you see inside the mask is what ships.
Steps
Open Document settings → Icon mask.
Pick macOS squircle, iOS, watchOS or None.
'Inner Icon' layers clip to this silhouette; 'Other Layers' can reach the edge.
Tips
Use the keyline grid to design safely inside the mask.
The same mask is available programmatically via the Icon API.
Questions
What does the macOS icon mask do?
It clips your design to the platform's official icon silhouette (squircle for macOS, rounded square for iOS, circle for watchOS) so the system never awkwardly crops your icon.
Why does my icon get cut off at the corners?
Your artwork is outside the icon mask. Move the layer to 'Inner Icon' in the layers panel, or set the mask to 'None' for a raw square export.
Set the icon background to a solid, a linear/radial gradient, or a Blob 'mesh gradient' of up to 12 additive color blobs over a base color. Always clipped to the icon mask.
CEyedropper: sample a color into fill/stroke/background
Steps
Document settings → Background.
Choose Solid, Gradient (linear/radial) or Blob.
For Blob: add blobs, pick colors, drag them on the canvas to move, drag the dashed ring to resize.
Start faster from a preset (vibrant, sunrise, ocean, aurora, candy, monochrome).
Tips
Try 'Suggest from icon' to derive colors from your artwork.
Blobs are additive, so overlaps brighten.
Questions
How do I make a mesh gradient background?
Document settings → Background → Blob. It layers up to 12 soft color blobs over a base color; drag them on the canvas to reshape the gradient.
How do I change the background color of my icon?
Document settings → Background → Solid, or press C to sample any color with the eyedropper.
A global specular and refraction pass with bezel highlight, bottom highlight (linkable), highlight width and refraction 'sheen'. It makes the whole icon read like liquid glass, the way macOS does.
Steps
Document settings → Reflection.
Enable and set the light angle (0-360).
Adjust Highlight, Bottom highlight (linkable), Highlight width and Refraction.
Tips
Link Highlight and Bottom highlight to move both together.
Combine with the Glass material for extra depth.
Questions
How do I get the Apple liquid-glass sheen on my icon?
Enable Document → Reflection. It adds a global bezel highlight and refraction across the icon; link the top and bottom highlights for a symmetric look.
Layer types, stacking, folders, groups and boolean compounds.
Inner Icon & Other Layers sections
Safe shape in, full bleed out.
Layers live in two sections: 'Inner Icon' clips to the icon's safe shape, 'Other Layers' can extend to the canvas edge. The layer panel mirrors the boundary so you always know what gets masked.
Steps
Use the layers panel sections 'Inner Icon' and 'Other Layers'.
Drag a layer between sections to flip its boundary mode.
Inner Icon layers clip to the mask; Other Layers render to the edge.
Tips
Put glows and full-bleed backgrounds in 'Other Layers'.
Questions
Why is my layer getting clipped by the icon shape?
It's in the 'Inner Icon' section, which clips to the icon mask. Drag it to 'Other Layers' to let it reach the canvas edge.
Image, Solid Fill, Gradient, Shape, Path, Icon (Heroicons & Lucide glyphs), SVG, Text, Liquid Glass Template and Bool compound layers. Everything stays live and editable, with no flattened mystery bitmaps.
Steps
Add layers from the toolbar (shape, text, icon, image, path…).
Edit each type in its dedicated inspector section.
Convert between types when needed (e.g. Shape → Path for point editing).
Tips
Icon layers tap a 200k+ searchable vector glyph library.
Questions
What kinds of layers can I add?
Ten: Image, Solid Fill, Gradient, Shape, Path, Icon (Heroicons/Lucide), SVG, Text, Liquid Glass Template and Bool compounds, each with its own inspector controls.
Can I edit an icon after placing it?
Yes, nothing is baked. Shapes, paths, text and materials stay fully editable until export.
A full layer tree with live thumbnails, visibility and lock toggles, drag-to-reorder (including into and out of folders), and drag-hover-to-expand for collapsed folders.
Steps
Open the Layers tab in the panel.
Drag rows to restack or nest into folders (hover a collapsed folder to expand it).
Toggle the eye to hide, the lock to freeze a layer.
Tips
Boolean compound folders don't accept drops, so drill into them instead.
Questions
How do I move a layer behind another?
Drag it down in the layers panel. The topmost row renders in front. Drop onto a folder row to nest it.
Group layers into named folders with drag-in/drag-out reordering. Deleting a folder keeps its children (re-parented), and folders can be renamed or duplicated.
Steps
Create a folder from the layer panel or context menu.
Drag layers into or out of it.
Rename inline; duplicate to clone the whole subtree.
Questions
What happens if I delete a folder?
Its layers are kept and re-parented one level up. Only the folder is removed.
Group layers with a shared morph identity ('Group as Morph') so they transform together as a single morphable unit, with dissolve-and-select-children when you need the pieces back.
Steps
Select layers and choose 'Group as Morph' from the toolbar.
Transform the morph group as a unit.
Ungroup the morph group, or dissolve it to select the children.
Questions
What is a morph group?
A group with a shared morph identity: the layers move and scale as one unit. Ungroup breaks the identity; dissolve selects the children.
Combine shapes with Union / Subtract / Intersect / Exclude. The result is a live Bool compound with per-contour operations. Change a source shape and the compound updates.
EscapeExit one boolean drill-in level
Steps
Select two or more shape/path/SVG layers.
Pick Union, Subtract, Intersect or Exclude from the toolbar's boolean menu.
Drill into the Bool group to edit contours; Escape pops out one level.
Tips
Each contour's operation can be changed later.
Questions
How do I cut one shape out of another?
Select both and choose Subtract (or Exclude) from the boolean menu. It stays live: edit the source shapes and the result updates.
How do I edit the shapes inside a boolean result?
Drill into the Bool group (double-click or from the layer panel). Press Escape to step back out one level.
Copy/cut/paste layers (across browser tabs and the system clipboard), Smart duplicate that repeats your last drag delta, Copy Style / Paste Style to transfer looks, and per-section property copy (e.g. 'Copy Fill properties').
Steps
Copy/cut/paste layers from the context menu, which works across browser tabs.
Move or drag a layer, then Smart duplicate: each duplicate repeats the same offset.
Right-click → Copy Style, then Paste Style on another layer, or copy a single inspector section's properties.
Tips
Smart duplicate is the classic transform-duplicate pattern from pro design tools.
Questions
How do I copy the look of one layer onto another?
Right-click the styled layer → Copy Style, then Paste Style on the target. To copy just fill, stroke or effects, use 'Copy … properties' on that inspector section.
How do I make evenly spaced duplicates?
Move or drag a layer, then Smart duplicate. Each duplicate repeats the same delta automatically.
One radius or per-corner radii (link all corners, CSS-style clamping), plus a Squircle toggle for Apple continuous-curvature corners with adjustable sharpness (2-12).
Steps
Select a shape and open Corners in the inspector.
Use 'Set each corner' for per-corner radii; 'Link all corners' for one value.
Enable Squircle for continuous curvature and set corner sides (sharpness 2-12).
Tips
Squircle matches Apple's shape language better than a plain large radius.
Questions
How do I get iOS-style squircle corners?
Select the shape and enable Squircle in the corner settings. 'Corner sides' (2-12) controls how tight the continuous curvature is.
Can I round only some corners?
Yes, enable 'Set each corner' and set TL/TR/BR/BL independently.
Five dedicated tools with single-key shortcuts: Select (V), Pen for free bezier drawing, Line (L), Edit Path (A) and Perspective Distort (D).
VSelect tool
LLine tool
AEdit Path tool
DPerspective Distort tool
EnterCommit pen draft / toggle path edit on shape, SVG or text
EscapeCancel draft or leave edit path
Shift (hold)Snap while drawing with pen/line
Steps
Pick a tool from the toolbar (or press V / L / A / D).
Pen: click-drag to place bezier points; Shift snaps; Enter commits; Escape cancels.
Line: drag to draw; Shift constrains the angle.
Edit Path: edit anchors and handles; Distort: drag the four corners to warp.
Tips
Convert text or SVG to a path first for point-level editing.
Marquee-select points to move them together.
Questions
How do I draw a custom shape?
Use the Pen tool: click (or click-drag for curves) to place points, hold Shift to snap, Enter to commit, Escape to cancel. The Line tool draws straight segments.
How do I edit the points of a shape?
Select the shape and press Enter (or choose Edit Path / A) for anchor and handle editing. Enter or Escape leaves.
Edit anchors and in/out handles with linear, mirrored or split handle modes. Marquee-select points, option-click to remove, shift-click an edge to add, join endpoints (Cmd+J), break continuity (Shift+Delete) vs delete (Delete), expand corner radius on selected points, snap anchors and distribute points.
Cmd + JJoin selected path points/endpoints
DeleteDelete points keeping continuity
Shift + DeleteBreak path at selection
Steps
Press Enter on a path (or choose Edit Path) to enter point editing.
Drag anchors/handles; switch handle mode between linear, mirrored and split.
Option-click a point to remove it; Shift-click an edge to add one.
Fill layers with a solid or gradients, including a multi-gradient stack (shapeGradients) where several ordered gradients live on one vector layer, each with its own type, angle, geometry and interpolation. Fill can be disabled for stroke-only shapes.
CEyedropper for fill/stroke/background
Steps
Open the Fill section in the inspector.
Choose Solid or Gradient; add multiple gradients to stack them.
Edit stops on the gradient bar or with on-canvas gradient handles.
Tips
On-canvas handles let you drag linear and radial gradient geometry directly.
Questions
Can I put more than one gradient on a shape?
Yes. The multi-gradient stack in the Fill section holds several gradients on one layer, each with its own type, angle and color space.
How do I make a stroke-only shape?
Disable Fill in the Fill section and style the Stroke instead.
Linear (angle, start/end) and radial (center, radius) gradients with a full stop editor, on-canvas drag handles, and interpolation color spaces (classic, oklab and oklch) for vivid, non-gray blends.
Steps
Select a gradient fill or stroke.
Edit stops in the stops editor; drag on-canvas handles for geometry.
Set interpolation to oklab or oklch for more vivid mid-blends.
Tips
Radial gradients expose center X/Y and radius as numbers and handles.
Questions
Why do my gradient colors look muddy in the middle?
Switch interpolation from classic RGB to oklab or oklch. They keep blends vivid instead of passing through gray.
How do I change a gradient's angle?
Use the angle field in the gradient controls, or drag the linear gradient handles on the canvas.
Outlines with color or gradient, width 0-128, position inner/outer/center, rounded or square caps, optional stroke background blur (frosted ring) and a 'Material on Stroke' mode, with live preview.
Steps
Open the Stroke section and enable it.
Set width, color (solid or gradient) and position (inner/outer/center).
Pick caps (rounded/square) and enable stroke background blur for a frosted-glass ring.
Tips
Stroke background blur makes the ring look frosted over whatever is behind it.
Questions
How do I add an outline inside my shape?
Enable Stroke and set Position to 'inner'. 'outer' draws outside the edge, 'center' straddles it.
Can strokes be gradients?
Yes. Switch the stroke kind to gradient and edit its stops and interpolation like any fill.
Flat, Clay, Glass and Emboss materials, lighting and depth maps.
Materials (Flat, Clay, Glass, Emboss)
The materials macOS actually uses.
Every vector layer can be Flat, Clay (pillowy plasticine), Glass (refractive liquid glass) or Emboss (carved into the surface behind). It's the signature look of the editor, rendered live with WebGL.
Steps
Select a shape, path, text or SVG layer.
Open the Material section and pick Flat, Clay, Glass or Emboss.
Tune the material's sliders (see the Glass/Clay/Emboss features).
Tips
Combine with Document → Reflection for a whole-icon gloss.
Select your layer and set Material to Glass or Clay. Glass refracts what's behind it; Clay gives a pillowy plasticine look; Emboss carves the shape into the surface behind.
Which materials can be combined?
One material per layer (Flat, Clay, Glass and Emboss are mutually exclusive), but layers stack, so you can put glass over clay layers. Use Group Liquid Glass to fuse several layers into one glass surface.
A refractive glass material with Bezel (10-140), Thickness (0-180), Curvature (-1..1), Chroma (chromatic aberration 0-18), Frost (0-32), Specular (0-1), Opposite specular with width (the twin edge reflections Apple uses), Tint color and tint strength, per-layer or canvas-linked light angle, and depth-map silhouette mode.
Steps
Set a layer's Material to Glass.
Adjust Bezel, Thickness and Curvature for the body of the glass.
Add Frost for milkiness and Chroma for color-fringing refraction.
Enable Opposite specular + width for the twin highlight look.
Use Tint color/strength for colored glass; link the light angle to the canvas light to keep layers consistent.
Tips
A depth map gives refraction a proper 3D silhouette.
'Material on Stroke' paints the material just on the outline.
Questions
How do I make a liquid glass icon?
Set Material → Glass, raise Thickness and Curvature, add a little Chroma and Frost, and enable Opposite specular for the twin Apple edge highlights. Document → Reflection adds the global gloss.
What does Chroma do in the glass material?
Chroma is chromatic aberration. It splits colors at the glass edges for a refractive, prism-like fringe.
A soft 3D clay material with Bezel, Thickness, Curvature, Body refraction, Rim refraction, Specular (linkable), Softness, Opposite specular + width, Edge darkening + width, and per-layer or canvas-linked light angle.
Steps
Set a layer's Material to Clay.
Adjust Bezel, Thickness and Curvature for the puffiness.
Use Softness and Edge darkening to shape the shadowing.
Set Body/Rim refraction for translucent clay looks.
Tips
Link the specular pair for a single highlight; unlink for dual-source lighting.
Questions
How do I make a clay / 3D puff icon?
Material → Clay. Raise Thickness and lower Softness for a tighter plasticine puff; Edge darkening adds contact shading. Basic mode's 'Puffiness' slider does the same in one control.
A global reflection light angle that all materials can follow, or per-layer glass/clay light angles for mixed lighting. 'Confine to mask' keeps highlights inside the icon silhouette.
Steps
Set the light angle in Document settings or the Material section.
Toggle 'use canvas light' on a layer to follow the global angle, or give it its own.
Enable 'Confine to mask' to clip highlights to the icon shape.
Tips
A 315° (top-left) light matches macOS icon lighting conventions.
Questions
How do I keep highlights consistent across layers?
Turn on 'use canvas light' for each material layer so they all follow the document's global light angle.
Beginner-friendly macros that drive multiple material parameters at once (Glassiness, Puffiness and Shadow, 0-100) losslessly, so you can drop into advanced controls later with nothing lost.
Steps
Switch the inspector to Basic mode.
Drag Glassiness, Puffiness or Shadow.
Open Advanced at any time. Every underlying value is intact.
Questions
I'm overwhelmed by material sliders. Where do I start?
Basic mode's three macros: Glassiness, Puffiness and Shadow. They set many parameters at once and are fully reversible.
One-click looks applied to the current selection: glossy3d, softClay, pillow, ceramic, liquidGlassLook, frostedGlass, crystal and chrome. Each preset writes full material setups you can keep tuning.
Steps
Select one or more layers.
Open the style presets menu.
Click a preset (e.g. frostedGlass) and keep refining the material sliders.
Tips
The AI assistant can apply presets too: 'Make it frosted glass'.
Questions
Is there a quick way to get a professional material look?
Apply a style preset (glossy3d, softClay, pillow, ceramic, liquidGlassLook, frostedGlass, crystal, chrome) to the selection, then fine-tune.
Preset glass effect stacks as a layer type (liquidGlass, frostedMetal, deepShadow, sideGlow or custom), plus effect variants (topSpecular, innerShadow, rimLight, sideReflection, metalSheen) with intensity controls.
Steps
Add a Liquid Glass Template layer.
Pick a template: liquidGlass, frostedMetal, deepShadow, sideGlow or custom.
Toggle effect variants and set their intensities.
Tips
Start from a template and swap in your own artwork underneath.
Questions
What are Liquid Glass template layers?
Pre-built glass effect stacks (liquidGlass, frostedMetal, deepShadow, sideGlow or custom) with toggles for top specular, inner shadow, rim light, side reflection and metal sheen.
Six designed document templates: glass-tile, clay-button, glass-on-clay, monogram, glass-disc and mono-clay. They're full editable setups, not flattened images.
Steps
Create a new document and choose a template.
Swap the artwork/glyph for your own.
Keep the materials as-is or retune them.
Questions
Do you have icon templates I can start from?
Yes: glass-tile, clay-button, glass-on-clay, monogram, glass-disc and mono-clay. They're fully editable documents with materials already set up.
An unlimited shadow list per layer with outer and inner shadows: color, opacity, blur, spread, offset and visibility. Smart options: use the layer's own color, sample the surrounding color beneath, darkness control, and show-behind-transparent-areas so glass shadows bleed correctly.
Steps
Select a layer → Shadows.
Add shadows and set type (outer/inner), color, blur, spread and offset.
Use 'use layer color' or 'use surrounding color' for automatic shading; the first outer shadow drives the glass drop shadow.
Tips
Stack two shadows (tight + wide) for convincing contact depth.
Questions
How do I add a soft drop shadow?
Effects → Shadows → add an outer shadow. Raise blur and lower opacity for softness; 'use surrounding color' shades from what's beneath the layer.
Why doesn't my shadow show through my glass?
Enable 'show behind transparent areas' so the shadow bleeds through the transparent parts. That's how glass casts a real shadow.
Turn a layer into a sticker: white (or any) border width/color, holographic foil with holo angle/scale, curved drop shadow (blur/opacity) and a peel effect (angle/curl).
Steps
Select a layer → Effects → Sticker.
Set border width and color.
Add Holo (with angle/scale), Curved shadow and Peel (angle/curl) to taste.
Questions
How do I make my icon look like a die-cut sticker?
Effects → Sticker: add a border, then layer on the holo foil, curved shadow and peel effects.
Stack custom GLSL ES 3.00 fragment shader passes on a layer, the background or the whole canvas. Parameters auto-wire to uniforms (float sliders, color pickers); a Shader Library of presets (halftone, pixelate, chromatic aberration, wave, duotone, CRT…), a code modal to view/edit GLSL, and 'Generate with AI' to author new shaders. Backdrop-aware via uBackdrop.
Steps
Open the Shaders section (per layer, or canvas/background level).
Add passes from the Shader Library, or write GLSL in the Code modal.
Expose parameters as uniforms to get sliders and color pickers automatically.
Use 'Generate with AI' to describe an effect and get a shader.
Tips
uBackdrop gives shaders access to what's behind the layer.
Shaders stack, so order matters.
Questions
Can I write my own shaders?
Yes. The Shaders section takes GLSL ES 3.00 fragment passes. Uniforms you expose become sliders/color pickers. A library of presets (halftone, pixelate, CRT, duotone…) is included.
How do I add a halftone or CRT effect?
Open the Shader Library and pick halftone or CRT. They drop in as editable passes with sliders.
Text layers with fonts, spacing and in-place editing.
Text layers
Type that stays editable.
Text layers with Google Fonts, size 8-512, weight 100-900, letter spacing, line height, alignment, Figma-style text box width with word/char wrap, fill color and stroke color/width. Double-click to edit in place.
EnterEdit selected text layer in place
Steps
Add a Text layer from the toolbar.
Double-click it on canvas (or press Enter) to type.
Set font (Google Fonts picker), size, weight, spacing and alignment in the Text section.
Set a text box width to wrap; choose word or character wrapping.
Tips
Google Fonts loads on demand so you can browse the full library.
Questions
How do I add text to my icon?
Add a Text layer, then double-click it on the canvas to type. The Text section has font, size, weight, spacing, alignment and wrapping.
How do I wrap text onto multiple lines?
Set a Text box width in the Text section and choose word or character wrap.
How do I edit individual letter shapes?
Convert the text to a path first (Convert to Path) so the letters become editable outlines.
Drop SVG or PNG images, .icns icon files, or an Icon Composer .icon bundle (which opens as a whole editable document) directly onto the canvas.
Steps
Drag a file over the canvas and release.
PNG/SVG become layers; .icns unpacks into artwork.
An Icon Composer .icon opens as a full document with layers.
Tips
You can also paste SVG from the clipboard.
Questions
What files can I drop into the editor?
SVG, PNG, .icns and Icon Composer .icon bundles. Images become layers; .icon bundles open as a full editable document.
Can I open an Apple Icon Composer file?
Yes, drop the .icon bundle on the canvas. It imports the layers and warns about Clear overrides, loose layers, missing assets and nested groups it can't map 1:1.
Three masking tools: Edit mask (paint/erase a layer's alpha on canvas), Use as Mask (a non-destructive geometry mask from another layer) and Filter mask (a mask that applies to effects only, with invert).
EnterToggle mask editing on an image layer
Steps
Edit mask: select an image layer and enter mask editing; paint/erase alpha; Done to finish (or Enter).
Use as Mask: right-click a layer → Use as Mask to clip another layer by its geometry; Clear Mask to remove.
Filter mask: assign a filter mask source so effects only apply inside (or outside, with invert) it.
Tips
Filter masks are perfect for glows that should only appear behind an object.
Questions
How do I erase part of an image layer?
Enter mask editing on the layer (press Enter on it) and paint/erase the alpha. 'Edit mask' / 'Done editing mask' toggles the mode.
How do I make one shape clip another?
Right-click the clipping shape → 'Use as Mask'. It becomes a non-destructive geometry mask; 'Clear Mask' removes it.
How do I apply an effect to only part of a layer?
Use a Filter mask. Effects only render where the mask allows. Invert flips it.
Remove an image's background four ways: Auto, Colour key (pixel-exact flood-from-border with pick-colour, detect and purity), AI cutout (segmentation), Multiply (for white) and Screen (for black), all with purity control.
Steps
Select an image layer (or use the toolbar's scissors action).
Choose a technique: Auto, Colour key, AI cutout, Multiply or Screen.
For Colour key: pick the colour and adjust Purity; Detect finds it for you.
Multiply knocks out white backgrounds; Screen knocks out black.
Tips
Colour key is pixel-exact, great for logos on solid backgrounds.
Questions
How do I remove the background from a logo PNG?
Select the image and hit Remove Background. Use Colour key for flat colors (pick the color, adjust Purity), AI cutout for photos, Multiply for white, Screen for black.
Which background remover should I use?
Flat color backgrounds → Colour key. White → Multiply. Black → Screen. Busy photos → AI cutout. Auto tries the best fit.
A new SVG layer is created. Edit its points like any path.
Tips
Use the 'Black & white' preset + Polygon curve mode for crisp logo traces.
Questions
How do I turn a PNG into a vector?
Select the image and use Vectorize. 'Black & white' is great for logos, 'Poster' for flat art, 'Photo' for detailed images. The result is an editable SVG layer.
Export formats, platform kits, project files and submissions.
Export formats (.icns, .png, .icon, .json)
Account required
Every format a Mac developer needs.
Export as .icns (full 16-1024 size ladder), .png (any size), .icon (Icon Composer bundle) or .json (project file), with live preview, trim-to-mask, size/scale control in x / px / % (16-4096px), download or copy to clipboard, and a 'bake materials' toggle for .icon bundles.
Steps
Open the Export popover.
Choose .icns, .png, .icon or .json.
For PNG set the size/scale (x / px / %, 16-4096px); enable Trim to mask to crop transparent padding.
For .icon, choose Bake materials (on = matches editor render, off = flat artwork so macOS applies its own glass).
Download, or Copy to clipboard for the PNG.
Tips
Copy to clipboard is the fastest way to drop a PNG into Slack or a doc.
Save a .json project so you can re-edit later.
Questions
How do I export an .icns file?
Export → .icns. It builds the full 16-1024 size ladder automatically. No Mac or iconutil needed.
How do I export just one PNG size?
Export → PNG and set the size in x, px or % (16-4096px). Trim to mask crops transparent padding.
What is 'bake materials' on .icon export?
On: materials are rendered into the artwork so it matches the editor exactly. Off: flat artwork is exported and macOS applies its own liquid glass at runtime.
Can I export transparent PNGs?
Yes, PNG export preserves transparency. Use Trim to mask to remove empty padding around the icon.
Server-side conversions via api.macosicons.com: .ico (Windows multi-size), .appiconset (Xcode asset catalog for macOS/iOS/Universal), Windows kit (.ico + MSIX tiles, zipped), Linux kit (hicolor icon theme + .desktop, zipped), Favicons (web favicon pack) and a Release kit with every artifact in one zip.
Steps
Open Export → More Formats.
Choose .ico, .appiconset, Windows kit, Linux kit, Favicons or Release kit.
For .appiconset pick the platform (macOS / iOS / Universal).
Download the converted file or zip.
Tips
The Release kit is the 'give me everything' button for a launch.
Questions
Can I get a Windows .ico from my icon?
Yes. More Formats → .ico produces a multi-size Windows icon. The Windows kit adds MSIX tiles as a zip.
How do I get an Xcode appiconset?
More Formats → .appiconset and choose macOS, iOS or Universal. It generates the full asset catalog.
Do you have favicons?
Yes. More Formats → Favicons downloads a web favicon pack zip. The Linux kit covers hicolor themes and .desktop files.
What's the fastest way to ship everywhere?
The Release kit: one zip with .icns, .ico, .appiconset, favicons and everything else.
Open Apple Icon Composer .icon bundles as editable documents (with warnings for Clear overrides, loose layers, missing assets and nested groups) and export back to .icon, including per-appearance Default/Dark/Clear/Tinted renders.
Preview and author per-appearance looks (Default, Dark, Clear-Light, Clear-Dark, Tinted-Light, Tinted-Dark) with per-layer overrides for color, tint, specular, frost, opacity, blend, visibility and even swapped artwork.
Steps
Switch appearance in the preview/export appearance switcher.
Select a layer and set per-appearance overrides (edit scope: individual or all).
Export all appearance modes as PNGs in one ZIP.
Tips
Set edit scope to 'individual' when only one appearance should change.
Questions
How do I make a dark-mode version of my icon?
Switch to the Dark appearance and adjust layers with per-appearance overrides: color, tint, opacity, visibility, even a different image. Export all appearance modes to get every render as PNG.
What are Clear and Tinted appearances?
Clear is the translucent Icon Composer look (light/dark); Tinted monochrome-adapts the icon to the user's accent color (light/dark). Each can be authored separately per layer.
Submit your icon to the public macOSicons library with app name, category and author confirmation, optionally bundling dark-theme/Liquid Glass .icns variants and the project .json. Submissions are reviewed before publishing.
Steps
Open Export → Upload.
Enter the app name and category; confirm authorship.
Optionally attach .icns variants and the project .json.
Submit for review.
Questions
How do I share my icon on macOSicons.com?
Export → Upload → Submit to macOSicons. Add the app name and category, confirm you're the author, and it goes through review before publishing.
Size, Dock, Home Screen and in-context preview renders.
Preview Tray (Sizes, Dock, Home Screen)
See it where it will live.
A floating preview tray with three tabs: Sizes (the icon at real system pixel sizes), Dock (a macOS desktop with a Liquid Glass dock, sample apps, running indicator and dock name) and Home Screen (an iOS grid with dock).
Steps
Open the Preview Tray from the toolbar.
Sizes: check legibility at real pixel sizes.
Dock: see the icon among sample apps in a live dock.
Home Screen: preview on an iOS grid and dock.
Tips
Design at 1024 but always sanity-check in Sizes before exporting.
Questions
How do I see my icon in the macOS dock?
Open the Preview Tray → Dock tab. It renders your icon in a Liquid Glass dock next to sample apps, complete with running indicator and label.
Will my icon be readable at small sizes?
Use the Sizes tab. It shows the icon at real system pixel sizes so you catch detail that disappears when scaled down.
Full-context preview renders with Light / Dark / Both themes, wallpaper color swatches or custom color/image, Auto/Blur/Gradient/Image backdrops. Download each render, download all, or save to your Assets library.
Steps
Open Preview in context.
Choose a context: Dock, Home Screen or Desktop.
Pick theme (Light / Dark / Both) and a wallpaper or backdrop.
Download each render, Download All, or Save to Assets.
Tips
Saved renders show up in the workspace Assets tab with their variant and project.
Questions
Can I get a mockup image of my icon in the dock?
Yes. Preview in context renders your icon in Dock, Home Screen or Desktop scenes with light/dark themes and customizable wallpapers. Download the renders or save them to Assets.
Named versions (Cmd+Option+S) plus automatic snapshots while you edit. Scrub a timeline ('Scroll or press ↑ to go back in time'), then Restore, Restore as copy, or delete a version. Includes restore points taken before restores, and handles cloud/local conflicts by keeping a safety copy. A macOSicons+ feature.
Cmd + Option + HOpen version history
Cmd + Option + SSave named version
Steps
Press Cmd+Option+H to open version history.
Press Cmd+Option+S (or the Save button) to save a named version.
Scrub the timeline (scroll or ↑/↓) to preview older states.
Restore, or 'Restore as copy' to branch without losing current work.
Tips
Name a version before big experiments. Restore as copy is the ultimate safety net.
Questions
Can I go back to an earlier version of my icon?
Yes. Version history (Cmd+Option+H) keeps automatic snapshots plus versions you name (Cmd+Option+S). Scrub the timeline and Restore, or Restore as copy to branch. It's a macOSicons+ feature.
What happens when two versions conflict?
The editor keeps a safety copy in version history and tells you which version it kept ('Kept this browser's newer version' / 'Opened the newer version from the cloud'). Offline conflicts can be restored as a copy.
Prompt-to-layers assistant, image generation, decompose and AI quick actions.
AI chat assistant (prompt to layers)
Plus
Describe the icon, get editable layers.
A design-aware chat assistant with full canvas context. It streams its activity (reasoning and tool calls), edits real layers, stops mid-generation, remembers prompt history (↑/↓), takes reference-image attachments and drag-and-dropped files, and offers quick suggestions and a 'recreate a reference image as editable layers' chip.
↑ / ↓ in promptRecall prompt history
Steps
Open the AI panel and describe what you want ('a glassy Finder-style icon').
Watch the activity stream; press stop to interrupt.
Attach a reference image (paperclip or drag onto the prompt).
Press ↑/↓ in the prompt to recall past prompts.
Ask follow-ups: 'make the background softer', 'turn this into clay'.
Tips
Be specific about materials: 'glass with frost 20 and opposite specular' beats 'make it pretty'.
The assistant can critique and iterate on its own output (design lint).
Questions
What can the AI assistant do?
It designs and edits with real layers: create/update/delete layers, draw and edit paths, run boolean ops, set backgrounds and reflections, apply shaders and style presets, search the 200k+ vector library, generate images, group/align/duplicate/mask, convert to path, weave and more.
Does the AI change my whole design?
Only what you ask. You can stop generation at any time and undo anything it did, since its edits land in your normal undo stack.
Can the AI use a reference image?
Yes, attach or drag an image onto the prompt. Use the 'Recreate a reference image as editable layers' chip to rebuild it as real layers instead of a flat bitmap.
Split an image into named, editable layers ('one layer per line…'), then add each piece or all of them to the canvas, reverse-engineering flat art into a real document.
Steps
Open Decompose Image with AI and choose an image.
Wait for the split into named layers.
Add individual layers or Add all to the canvas.
Questions
I have a flat PNG. How do I edit its parts?
Use Decompose Image with AI. It splits the image into named layers you can add individually or all at once, then edit like any other layers.
A credit meter shows exactly what an AI action costs before it runs ('Generating icons', 'Decomposing this image'). If credits run short, inline billing offers make topping up instant.
Steps
Watch the cost label before each AI action.
Run the action. Credits deduct on completion.
If short on credits, pick a top-up offer in the modal.
Questions
How much does AI cost?
Every action shows its credit cost before you run it. If you're short, the editor offers credit packs right in the flow, so no surprise bills.
Share links, live co-editing and the community gallery.
Share links (view or edit)
Account required
Send a link, not a file.
Create share links with view or edit access, copy them instantly, and reset links to revoke. Viewers see a 'View only · shared by X' banner with 'Duplicate to my workspace'; editors get 'Editing together · X's document'.
Steps
Open the Share modal.
Create a link and choose view or edit access.
Copy the link and send it. Use Reset links to revoke access.
Recipients can duplicate the document into their own workspace.
Tips
Reset links before making a doc public after private collaboration.
Questions
How do I share my icon design with someone?
Use Share to create a link with view or edit access. Reset links anytime to revoke. Recipients can duplicate it into their own workspace.
Can people I share with edit my document?
Only if you pick 'edit' access. View links are read-only and show a 'View only' banner.
Community gallery (browse, like, comment, duplicate)
Learn from every icon ever shared.
A gallery of shared icon projects at /editor/docs/community. Browse posts, like and comment, and duplicate any project into your workspace to see exactly how it was built.
Steps
Open Community from the projects area.
Browse and open projects; like and comment.
Click 'Copy to my projects' to duplicate one and study its layers.
Tips
Duplicating a community project is the fastest way to learn advanced material setups.
Questions
Can I see how other people made their icons?
Yes, the community gallery has shared projects. Open any of them and hit 'Copy to my projects' to get the full editable document.
Projects manager, trash, assets library and offline sync.
Projects manager (documents & folders)
Account required
Every icon project, organized.
A workspace with Projects (documents and nested folders), search, rename, and New Document presets for macOS app icon / iOS app icon / Folder icon. Plus Trash with restore and permanent delete.
Steps
Open the projects area (/editor/docs).
Create documents (macOS / iOS / Folder icon) and folders.
Search, rename and nest to organize.
Deleted items go to Trash, where you can restore or permanently delete them.
Tips
Folders nest, so you can group by client or app.
Questions
How do I organize my icon projects?
The projects manager has folders, search and rename. Deleted items go to Trash where you can restore or permanently remove them.
Every generated or exported asset is stored automatically, grouped by variant with its credit cost and source project. Grid/list views, previews and re-download: the safety net for 'where did that file go?'.
Steps
Open the workspace → Assets tab.
Browse by variant; switch grid/list view.
Preview and download any asset again.
Tips
Renders saved from Preview in context are stored here too.
Questions
Where do my exported icons go?
Every icon you generate or export lands in the workspace Assets tab, grouped by variant with its project and credit cost. Re-download anytime.
Make documents or whole projects available offline with a storage budget picker and usage meter, sync manually, retry failures and rebuild from server if needed. An offline banner and pending-change counter keep you informed; guest scratch docs work entirely in-browser.
Steps
Open the workspace → Offline tab.
Mark documents/projects 'available offline' (or 'Keep everything offline').
Set a storage budget and watch the usage meter.
Use Sync now when back online; retry failures or rebuild from server.
Tips
Guest mode is fully local: nothing is saved to the cloud until you sign up.
Questions
Does the editor work offline?
Yes. Mark documents available offline (with a storage budget), keep editing without a connection, and sync when you're back. The editor shows 'N changes waiting to sync' and can retry or rebuild from the server if anything fails.
Anyone can open the editor and design immediately as a guest, in a scratch document in the browser with full tools. Exports and cloud saves prompt a free sign-up.
Steps
Open /editor and start designing. No signup wall.
Work in the guest scratch document (stored in the browser).
Sign up free when you want to export or save to the cloud.
Questions
Do I need an account to use the editor?
No, design freely as a guest. You need a free account to export (.icns, PNG, .icon) and to save projects to the cloud.
Zoom with Cmd +/- / Cmd+0 to reset, pan by holding Space and dragging, two-finger trackpad pan, and a canvas context menu with Zoom In/Out/Reset Zoom/Paste.
Cmd + / Cmd -Zoom in / out
Cmd + 0Reset zoom
Space (hold) + dragPan canvas
Steps
Cmd + / Cmd - to zoom; Cmd+0 to reset.
Hold Space and drag to pan (or two-finger scroll on a trackpad).
Right-click the canvas for zoom actions and Paste.
Questions
How do I pan around the canvas?
Hold Space and drag, or two-finger pan on a trackpad. Cmd +/- zooms and Cmd+0 resets the zoom.
A keyboard-first eyedropper (C, or Ctrl+C on macOS / Alt+C elsewhere) that samples a color and routes it to the right channel (fill, stroke or background) depending on your selection.
C (Ctrl+C on macOS / Alt+C elsewhere)Open color picker / eyedropper
Steps
Press C (or Ctrl+C / Alt+C) to open the eyedropper.
Click any pixel to sample it.
The color lands in fill, stroke or background depending on context.
Questions
How do I pick a color from my artwork?
Press C to open the eyedropper and click the pixel. It writes to fill, stroke or the background depending on what's selected.
A responsive layout with bottom tabs (Inspector / Layers / Projects), a mobile selection bar (Done / '{n} layers') and a 'More Tools' menu, with haptic feedback on supported devices.
Steps
Open the editor on a phone or tablet.
Switch bottom tabs between Inspector, Layers and Projects.
Use the More Tools menu for toolbar actions; haptics confirm key gestures.
Questions
Does the editor work on phones?
Yes. A mobile layout with bottom tabs (Inspector/Layers/Projects), a selection bar and a More Tools menu keeps the full editor usable on small screens.
Quality of life (auto naming, haptics, GPU-safe export)
The small things done right.
Documents auto-name themselves from their content, supported devices get haptic feedback on key gestures, and export capture is GPU-safe with a clear error toast that names the GPU if capture fails.
Steps
Let documents name themselves. Rename any time.
Feel haptics on supported touch devices.
If export capture fails on a rare GPU, the toast tells you which one.
Questions
How are my documents named?
Automatically from their content. Rename any document yourself whenever you want.
Standalone one-click tools and the public Icon API.
Icon Toolkit (standalone tools + public API)
Account required
The same tools as buttons and as an API.
The Icon Toolkit at /editor/toolkit exposes the editor's one-shot tools as standalone web tools (no Mac required), and every tool is also a public REST endpoint under /api/v1/editor/ for programmatic use.
Steps
Open /editor/toolkit.
Run any tool in the browser (icon mask, generate, convert, remove background…).
Or call the matching endpoint at /api/v1/editor/ from your own code.
Tips
Toolkit tools work without opening the full editor document.
Questions
Do I need a Mac to make an .icns?
No, the Toolkit converts and exports .icns (and every other format) right in the browser or via the API.
Is there an API for these tools?
Yes, every toolkit tool has a public endpoint under /api/v1/editor/. See the API docs on the toolkit page.
how do I make my icon look like liquid glass / Apple glass
Set the layer's Material to Glass and raise Thickness and Curvature, then add a little Chroma and Frost and enable Opposite specular for the twin edge highlights. Turn on Document → Reflection for the whole-icon gloss.
how do I change the background color / make a mesh gradient background
Document settings → Background: pick Solid, Gradient or Blob (mesh). Blob mode lets you drag up to 12 color blobs on the canvas; 'Suggest from icon' derives matching colors from your artwork.
Switch to the Dark appearance and adjust layers with per-appearance overrides (color, tint, opacity, even swapped artwork). 'Export all appearance modes' gives you every render as PNGs in a ZIP.
Select the image and use Vectorize (Default / Black & white / Poster / Photo presets). The result is an editable SVG layer you can reshape point by point.
how do I edit the points / outline of a shape or text
Press Enter on the layer to enter Edit Path mode (convert text/SVG to a path first if needed). Shift-click edges to add points, Option-click to remove, Cmd+J to join.
Effects → Shadows for stacked outer/inner shadows, Effects → Glow for bloom, and the Stroke section for inner/outer/center outlines (even gradient strokes).
Yes. The AI assistant turns prompts into editable layers, Generate Icons makes up to 8 options at once, Decompose Image splits flat art into layers, and right-click → Ask AI restyles a selection (Glass, Clay, Enhance, Harmonize, Variations).
The Preview Tray has live Sizes, Dock and Home Screen tabs. Preview in context renders downloadable mockups (Dock / Home Screen / Desktop, light and dark). The Toolkit does mockups standalone.
Design free as a guest with no account, though exporting needs a free sign-up. Documents can be made available offline with local storage budgets and sync-when-back.
Cmd+Z undoes 50 steps. Version history (Cmd+Option+H, macOSicons+) keeps automatic snapshots and named versions (Cmd+Option+S) you can restore or restore-as-copy.
Share creates view or edit links (reset anytime). Live collaboration adds presence and cursors. Share to community publishes to the gallery, where anyone can duplicate your project to learn from it.
Export → Upload → Submit to macOSicons: add the app name and category, confirm authorship, optionally attach .icns variants and the project file. It goes through review before publishing.
The projects manager has nested folders, search, rename and Trash. Every export/generate lands in the Assets tab. Boards keep several icons side by side in one session.
Yes. Every Icon Toolkit tool is also a public endpoint under /api/v1/editor/ (mask, convert, appiconset, favicons, release kit and more). See the API docs on /editor/toolkit.
