iconos de macOS
 por elías

Editor de iconos

Todo lo que puede hacer el editor

Un editor vectorial hecho solo para iconos: materiales, efectos, herramientas vectoriales, ayuda con IA y exportación en un clic. Todas las funciones, en un solo lugar.

110 funciones en 17 áreas

Abrir el editorKit de iconos

Canvas & Document

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.

Cómo funciona

Cómo hacerlo

  1. Create a new document from the workspace (macOS app icon, iOS app icon or Folder icon).
  2. Design freely — the canvas is always icon-shaped and 1024x1024.
  3. Export; every size and platform ladder is generated from it.

Consejos

  • Positions are measured from the center: 0/0 is the middle of the icon.

Preguntas

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.

Icon mode & Folder mode

Two masks, one document.

Switch a document between an app icon and a macOS folder icon. Layers, materials and exports follow the mode, so one design ships as both.

Cómo funciona

Cómo hacerlo

  1. Open Document settings in the inspector.
  2. Choose 'Icon' (app icon) or 'Folder' (macOS folder).
  3. Folder mode unlocks folder tint, front blur and folder grain.

Preguntas

Can I make a folder icon and an app icon from the same design?
Yes — switch Document mode between Icon and Folder. The mask, tint and export shape follow automatically.

Icon mask (squircle, iOS, watchOS, none)

The exact silhouette of every Apple platform.

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.

Cómo funciona

Cómo hacerlo

  1. Open Document settings → Icon mask.
  2. Pick macOS squircle, iOS, watchOS or None.
  3. 'Inner Icon' layers clip to this silhouette; 'Other Layers' can reach the edge.

Consejos

  • Use the keyline grid to design safely inside the mask.
  • The same mask is available programmatically via the Icon API.

Preguntas

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.

Canvas background (solid, gradient, blob mesh)

Mesh-gradient backgrounds in one click.

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
Cómo funciona

Cómo hacerlo

  1. Document settings → Background.
  2. Choose Solid, Gradient (linear/radial) or Blob.
  3. For Blob: add blobs, pick colors, drag them on the canvas to move, drag the dashed ring to resize.
  4. Start faster from a preset (vibrant, sunrise, ocean, aurora, candy, monochrome).

Consejos

  • Try 'Suggest from icon' to derive colors from your artwork.
  • Blobs are additive — overlaps brighten.

Preguntas

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.

Background presets

Designed backgrounds, ready to drop.

Curated gradient and solid presets — Ocean, Sunset, Grape, Mint, Midnight, Fire, Aurora, Rose Gold, Sky, Lime, Cotton Candy, plus Snow/Graphite/Ink/Blue/Rose/Emerald solids.

Cómo funciona

Cómo hacerlo

  1. Document settings → Background → Presets.
  2. Click a swatch to apply.
  3. Keep editing stops or blobs afterwards — presets are fully editable.

Preguntas

Are the background presets editable?
Yes — a preset just sets up the gradient or solid. Every stop, angle and blob stays editable.

Suggest from icon (auto palette)

Background colors pulled from your artwork.

Analyzes your layers and offers background color suggestions derived from the artwork as one-click swatches like 'Use #A8C5FF as the background'.

Cómo funciona

Cómo hacerlo

  1. Document settings → Background.
  2. Click 'Suggest from icon'.
  3. Click a suggestion swatch to apply it.

Preguntas

How do I pick a background that matches my icon?
Use 'Suggest from icon' in the Background section — it extracts colors from your artwork and offers matching swatches.

On-canvas blob editing

Shape mesh gradients by hand.

In Blob background mode each blob is a canvas handle: drag to move, drag its dashed ring to resize. No numeric guesswork.

Cómo funciona

Cómo hacerlo

  1. Set Background → Blob and enable edit mode.
  2. Drag a blob to move it.
  3. Drag its dashed ring to resize it.

Preguntas

Can I move the blobs in a mesh gradient directly?
Yes — in Blob edit mode, drag each blob to move it and its dashed ring to resize.

Icon border

A crisp ring around the silhouette.

Add a colored border of adjustable width around the icon silhouette — great for stickers, badges and light-on-light designs.

Cómo funciona

Cómo hacerlo

  1. Document settings → Border.
  2. Enable and pick a color.
  3. Set the width in pixels.

Preguntas

How do I add a border around my icon?
Document settings → Border: enable, choose color and width. The border follows the active icon mask.

Procedural reflection (global liquid-glass gloss)

One gloss across the whole icon.

A global specular and refraction pass — bezel highlight, bottom highlight (linkable), highlight width and refraction 'sheen' — that makes the whole icon read like liquid glass, the way macOS does.

Cómo funciona

Cómo hacerlo

  1. Document settings → Reflection.
  2. Enable and set the light angle (0-360).
  3. Adjust Highlight, Bottom highlight (linkable), Highlight width and Refraction.

Consejos

  • Link Highlight and Bottom highlight to move both together.
  • Combine with the Glass material for extra depth.

Preguntas

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.

Folder tint, front blur & folder grain

Real macOS folder materials.

In Folder mode: tint the folder body with a solid or gradient, blur the front flap, and add configurable folder grain (intensity, size, seed).

Cómo funciona

Cómo hacerlo

  1. Set Document mode to Folder.
  2. Document settings → Folder tint for a solid or gradient tint.
  3. Adjust Front blur and Grain (intensity / size / seed).

Consejos

  • Match the grain seed across a folder set for consistency.

Preguntas

How do I recolor a macOS folder icon?
Switch the document to Folder mode, then Document settings → Folder tint. Front blur and grain sell the material.

Document grain

Film grain over everything.

A global film-grain pass over the whole icon with intensity and scale/seed control — subtle texture that stops flat gradients from banding.

Cómo funciona

Cómo hacerlo

  1. Document settings → Grain.
  2. Enable and set intensity.
  3. Adjust scale and seed to taste.

Consejos

  • Keep intensity low (0.05-0.15) for print-like texture.

Preguntas

How do I stop my gradient from banding?
Add a touch of Document grain (Document settings → Grain) — it dithers the surface and adds filmic texture.

Click selects group

Group-aware selection.

A canvas interaction toggle: click selects the parent group, double-click selects the inner layer — the Figma-style nesting rhythm.

Cómo funciona

Cómo hacerlo

  1. Enable 'Click selects group' in Document settings.
  2. Click to select the parent group.
  3. Double-click to drill into the inner layer.

Preguntas

How do I select a whole group instead of one layer?
Turn on 'Click selects group' in Document settings — click grabs the group, double-click drills into the layer.

Layers & Organization

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.

Cómo funciona

Cómo hacerlo

  1. Use the layers panel sections 'Inner Icon' and 'Other Layers'.
  2. Drag a layer between sections to flip its boundary mode.
  3. Inner Icon layers clip to the mask; Other Layers render to the edge.

Consejos

  • Put glows and full-bleed backgrounds in 'Other Layers'.

Preguntas

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.

10 layer types

Images, vectors, text, glass — all editable.

Image, Solid Fill, Gradient, Shape, Path, Icon (Heroicons & Lucide glyphs), SVG, Text, Liquid Glass Template and Bool compound layers. Everything stays live and editable — no flattened mystery bitmaps.

Cómo funciona

Cómo hacerlo

  1. Add layers from the toolbar (shape, text, icon, image, path…).
  2. Edit each type in its dedicated inspector section.
  3. Convert between types when needed (e.g. Shape → Path for point editing).

Consejos

  • Icon layers tap a 200k+ searchable vector glyph library.

Preguntas

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.

Layers panel with drag reordering

Stack, sort and nest — by dragging.

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.

Cómo funciona

Cómo hacerlo

  1. Open the Layers tab in the panel.
  2. Drag rows to restack or nest into folders (hover a collapsed folder to expand it).
  3. Toggle the eye to hide, the lock to freeze a layer.

Consejos

  • Boolean compound folders don't accept drops — drill into them instead.

Preguntas

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.

Folders

Tidy layer trees.

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.

Cómo funciona

Cómo hacerlo

  1. Create a folder from the layer panel or context menu.
  2. Drag layers into or out of it.
  3. Rename inline; duplicate to clone the whole subtree.

Preguntas

What happens if I delete a folder?
Its layers are kept and re-parented one level up — only the folder is removed.

Groups

Move many layers as one.

Group selected layers to transform, style and reorder them as a unit. Ungroup any time.

Cómo funciona

Cómo hacerlo

  1. Select multiple layers (shift-click or marquee).
  2. Choose Group from the toolbar or context menu.
  3. Ungroup to get the children back.

Preguntas

How do I move several layers together?
Select them and Group (context menu). Transforms and styles then apply to the whole group.

Morph groups

Shapes that transform as one identity.

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.

Cómo funciona

Cómo hacerlo

  1. Select layers and choose 'Group as Morph' from the toolbar.
  2. Transform the morph group as a unit.
  3. Ungroup the morph group, or dissolve it to select the children.

Preguntas

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.

Relacionado

Boolean operations (Union, Subtract, Intersect, Exclude)

Non-destructive shape math.

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
Cómo funciona

Cómo hacerlo

  1. Select two or more shape/path/SVG layers.
  2. Pick Union, Subtract, Intersect or Exclude from the toolbar's boolean menu.
  3. Drill into the Bool group to edit contours; Escape pops out one level.

Consejos

  • Each contour's operation can be changed later.

Preguntas

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.

Group Liquid Glass

One glass surface over many layers.

Combine a group's layers into a single liquid-glass surface — one silhouette, one refraction, instead of glass on each piece separately.

Cómo funciona

Cómo hacerlo

  1. Group the layers you want fused.
  2. Choose 'Group Liquid Glass' from the layer context menu.
  3. Tune the glass material on the group.

Preguntas

How do I make several shapes look like one glass object?
Group them and apply 'Group Liquid Glass' — it merges them into one glass surface over the combined silhouette.

Shape Join

Weld shapes into one.

Join multiple shapes into a single shape layer for simpler outlines and cleaner exports.

Cómo funciona

Cómo hacerlo

  1. Select the shapes to join.
  2. Choose Join from the context menu or toolbar.
  3. Convert to Path for point-level control of the merged outline.

Preguntas

How do I merge two shapes into one outline?
Select both and use Shape Join. Convert the result to a path for point-level editing.

Copy / Paste, Smart duplicate & Style transfer

Duplicate that remembers where you were going.

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').

Cómo funciona

Cómo hacerlo

  1. Copy/cut/paste layers from the context menu — works across browser tabs.
  2. Move or drag a layer, then Smart duplicate: each duplicate repeats the same offset.
  3. Right-click → Copy Style, then Paste Style on another layer — or copy a single inspector section's properties.

Consejos

  • Smart duplicate is the classic transform-duplicate pattern from pro design tools.

Preguntas

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.

Cross-tab & system clipboard

Paste layers anywhere, from anywhere.

Layers copied in one browser tab paste into another, and SVG copied from outside the app (Figma, a website, a file) pastes in as a layer.

Cómo funciona

Cómo hacerlo

  1. Copy layers in one tab; paste in another editor tab.
  2. Copy SVG markup externally and paste onto the canvas to create a layer.

Preguntas

Can I paste from Figma?
Copy the SVG and paste it onto the canvas — it becomes an editable SVG layer.

Transform & Geometry

Move, resize, rotate, align, corners and distortion.

Transform (position, size, scale, rotation)

Pixel-exact placement.

Numeric Offset X/Y (±2048), Width/Height, Scale % and Rotation (±180°) with reset targets, plus aspect-ratio locking so images resize uniformly.

  • ArrowsNudge 1px (Shift = 10px)
  • Cmd + ArrowsResize width/height 1px (Shift = 10px)
Cómo funciona

Cómo hacerlo

  1. Select a layer and open the Selection section in the inspector.
  2. Enter exact values, or drag a number field's label to scrub.
  3. Toggle 'Lock aspect ratio' for uniform scaling.

Consejos

  • Click a field's reset target to snap back to its default.

Preguntas

How do I set an exact size or position?
Use the Selection inspector: Offset X/Y, Width/Height, Scale % and Rotation take exact numbers. Drag the field labels to scrub values.

Corner radii & Squircle corners

Apple's continuous-curvature corners.

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).

Cómo funciona

Cómo hacerlo

  1. Select a shape and open Corners in the inspector.
  2. Use 'Set each corner' for per-corner radii; 'Link all corners' for one value.
  3. Enable Squircle for continuous curvature and set corner sides (sharpness 2-12).

Consejos

  • Squircle matches Apple's shape language better than a plain large radius.

Preguntas

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.

Flip & Reflect

Mirror anything, instantly.

Flip a layer horizontally or vertically, or reflect a selection across the canvas — great for symmetric icon construction.

Cómo funciona

Cómo hacerlo

  1. Select a layer or layers.
  2. Use Flip X / Flip Y in the inspector, or Reflect Horizontally / Vertically in the toolbar.

Preguntas

How do I mirror a shape?
Flip X / Flip Y in the Selection inspector. For a full-canvas mirror of a selection, use Reflect in the toolbar.

On-canvas transform handles

Grab, drag, rotate.

Corner and edge handles for freehand resizing, plus rotate handles outside the corners — with keyboard nudging for the last pixel.

  • Arrows / Shift+ArrowsNudge 1px / 10px
Cómo funciona

Cómo hacerlo

  1. Select a layer to reveal its handles.
  2. Drag corners/edges to resize; drag just outside a corner to rotate.
  3. Arrow keys nudge 1px (Shift = 10px).

Preguntas

How do I rotate a layer?
Drag just outside a corner handle of the selection box, or type an exact angle in the Selection inspector.

Align & Distribute

Perfect spacing without guides.

Align left/center/right/top/middle/bottom within a selection or relative to the canvas, and distribute layers evenly vertically or horizontally.

Cómo funciona

Cómo hacerlo

  1. Select two or more layers (or one layer to align to canvas).
  2. Use the align buttons in the toolbar.
  3. Use Distribute Vertically / Horizontally for even spacing.

Consejos

  • Snapping also hints at equal spacing while dragging.

Preguntas

How do I center a layer on the icon?
Select the layer and use Align Center + Align Middle — a single selection aligns to the canvas.

Perspective distort

Warp any layer like it's on a surface.

Free corner-warp a layer with per-corner distortion offsets — for perspective mockups, decals and dynamic angles. Reset any time.

  • DPerspective Distort tool
Cómo funciona

Cómo hacerlo

  1. Select a layer and choose the Distort tool (D).
  2. Drag the four corners to warp the layer.
  3. Use 'Reset Distortion' to return to a flat plane.

Preguntas

How do I put my icon on a slanted surface?
Use the Distort tool (D) and drag the corners to match the surface perspective. 'Reset Distortion' undoes it.

Vector & Path Tools

Pen, line, path point editing, convert-to-path and Weave.

Vector tools (Select, Pen, Line, Edit Path, Distort)

Draw icons like a pro design tool.

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
Cómo funciona

Cómo hacerlo

  1. Pick a tool from the toolbar (or press V / L / A / D).
  2. Pen: click-drag to place bezier points; Shift snaps; Enter commits; Escape cancels.
  3. Line: drag to draw; Shift constrains the angle.
  4. Edit Path: edit anchors and handles; Distort: drag the four corners to warp.

Consejos

  • Convert text or SVG to a path first for point-level editing.
  • Marquee-select points to move them together.

Preguntas

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.

Path point editing

Anchor-level control, Figma-style.

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
Cómo funciona

Cómo hacerlo

  1. Press Enter on a path (or choose Edit Path) to enter point editing.
  2. Drag anchors/handles; switch handle mode between linear, mirrored and split.
  3. Option-click a point to remove it; Shift-click an edge to add one.
  4. Cmd+J joins selected endpoints; Shift+Delete breaks continuity, Delete deletes cleanly.
  5. Select points and use 'Expand Corner Radius' for rounded corners on curves.

Consejos

  • Mirrored handles keep smooth curves; split handles make sharp cusps.
  • Anchor snap aligns points to nearby geometry.

Preguntas

How do I add or remove points on a path?
In Edit Path mode, Shift-click an edge to add a point, Option-click a point to remove it.
How do I break a path open?
Select the point(s) and press Shift+Delete to break continuity. Plain Delete removes the point while keeping the path continuous.
How do I round the corner between two curves?
Select the anchor and use 'Expand Corner Radius' in the Path section.

Convert to Path

Text, shapes and SVG become editable outlines.

Convert Shapes, SVG layers and Text to editable bezier paths ('Edit points'). Text is traced to polylines so letterforms become fully malleable.

  • EnterToggle path edit (Edit points) on shape/path/SVG
Cómo funciona

Cómo hacerlo

  1. Select a shape, SVG or text layer.
  2. Choose 'Convert to Path' (or 'Edit points') in the Path section.
  3. Confirm the Shape-to-Path popover when prompted, then edit anchors freely.

Consejos

  • Keep an un-converted copy if you still want to change the wording later.

Preguntas

How do I edit the outline of my text?
Select the text layer and Convert to Path — the letters become editable outlines you can reshape point by point.

Weave (interlaced paths)

Over-and-under woven outlines.

Turn overlapping paths into interlaced woven strands. Flip which strand is on top at each crossing, or remove the weave to return to plain paths.

Cómo funciona

Cómo hacerlo

  1. Select the overlapping paths and choose Weave.
  2. Click a crossing to flip which strand passes on top.
  3. Remove the weave to restore the original paths.

Consejos

  • Great for monogram and knot-style marks.

Preguntas

How do I make woven/interlaced line art?
Select overlapping paths and apply Weave. Each crossing becomes a toggle — click it to decide which strand is on top.

Fill & Stroke

Colors, gradients, strokes and image fill overlays.

Shape presets

Rounded rects, circles, pills and more.

One-click shape layers: rounded rectangle, circle, pill, triangle, diamond and hexagon — each fully editable afterwards.

Cómo funciona

Cómo hacerlo

  1. Open the shape menu in the toolbar.
  2. Click a preset to add it as a shape layer.
  3. Edit radius, fill, stroke and material in the inspector.

Preguntas

How do I add a circle or pill shape?
Use the shape menu in the toolbar — rounded rect, circle, pill, triangle, diamond and hexagon are all one click.

Fill (solid & multi-gradient)

Stacked gradients on one layer.

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
Cómo funciona

Cómo hacerlo

  1. Open the Fill section in the inspector.
  2. Choose Solid or Gradient; add multiple gradients to stack them.
  3. Edit stops on the gradient bar or with on-canvas gradient handles.

Consejos

  • On-canvas handles let you drag linear and radial gradient geometry directly.

Preguntas

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.

Gradient controls (linear/radial, oklab/oklch)

Vivid blends without muddy midtones.

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.

Cómo funciona

Cómo hacerlo

  1. Select a gradient fill or stroke.
  2. Edit stops in the stops editor; drag on-canvas handles for geometry.
  3. Set interpolation to oklab or oklch for more vivid mid-blends.

Consejos

  • Radial gradients expose center X/Y and radius as numbers and handles.

Preguntas

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.

Stroke (position, caps, gradients, blur)

Inner, outer or centered — with gradients.

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.

Cómo funciona

Cómo hacerlo

  1. Open the Stroke section and enable it.
  2. Set width, color (solid or gradient) and position (inner/outer/center).
  3. Pick caps (rounded/square) and enable stroke background blur for a frosted-glass ring.

Consejos

  • Stroke background blur makes the ring look frosted over whatever is behind it.

Preguntas

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.

Image fill overlay

Recolor bitmaps non-destructively.

Paint a solid or gradient over an image layer's opaque pixels only — recolor artwork without editing the bitmap.

Cómo funciona

Cómo hacerlo

  1. Select an image layer.
  2. Set Fill kind and pick an overlay color or gradient.
  3. Only opaque pixels are tinted; transparency is preserved.

Preguntas

How do I recolor a PNG without Photoshop?
Select the image layer and use the fill overlay — it tints the opaque pixels with a solid or gradient and keeps transparency intact.

Materials & Lighting

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) — the signature look of the editor, rendered live with WebGL.

Cómo funciona

Cómo hacerlo

  1. Select a shape, path, text or SVG layer.
  2. Open the Material section and pick Flat, Clay, Glass or Emboss.
  3. Tune the material's sliders (see the Glass/Clay/Emboss features).

Consejos

  • Combine with Document → Reflection for a whole-icon gloss.
  • Basic mode exposes Glassiness / Puffiness / Shadow macros.

Preguntas

How do I make a glassy or 3D-looking icon?
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 — put glass over clay layers. Use Group Liquid Glass to fuse several layers into one glass surface.

Liquid Glass material

Refraction, frost and twin Apple highlights.

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.

Cómo funciona

Cómo hacerlo

  1. Set a layer's Material to Glass.
  2. Adjust Bezel, Thickness and Curvature for the body of the glass.
  3. Add Frost for milkiness and Chroma for color-fringing refraction.
  4. Enable Opposite specular + width for the twin highlight look.
  5. Use Tint color/strength for colored glass; link the light angle to the canvas light to keep layers consistent.

Consejos

  • A depth map gives refraction a proper 3D silhouette.
  • 'Material on Stroke' paints the material just on the outline.

Preguntas

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.

Clay material

Pillowy plasticine depth.

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.

Cómo funciona

Cómo hacerlo

  1. Set a layer's Material to Clay.
  2. Adjust Bezel, Thickness and Curvature for the puffiness.
  3. Use Softness and Edge darkening to shape the shadowing.
  4. Set Body/Rim refraction for translucent clay looks.

Consejos

  • Link the specular pair for a single highlight; unlink for dual-source lighting.

Preguntas

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.

Emboss material

Carved into the surface behind.

An emboss/deboss material with Depth (0-1), Bevel (1-80px) and Softness (0-1) — the shape reads as pressed into the layer beneath it.

Cómo funciona

Cómo hacerlo

  1. Set a layer's Material to Emboss.
  2. Adjust Depth for how carved it looks.
  3. Use Bevel width and Softness to control the edge shading.

Preguntas

How do I make a debossed/engraved icon?
Material → Emboss. The shape appears carved into whatever is behind it; Depth and Bevel control the carve.

Global & per-layer lighting

One light for the whole icon.

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.

Cómo funciona

Cómo hacerlo

  1. Set the light angle in Document settings or the Material section.
  2. Toggle 'use canvas light' on a layer to follow the global angle, or give it its own.
  3. Enable 'Confine to mask' to clip highlights to the icon shape.

Consejos

  • A 315° (top-left) light matches macOS icon lighting conventions.

Preguntas

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.

Depth map for glass

Refraction with a real silhouette.

Generate a depth map for a glass layer's silhouette and tune Depth and Smooth — so refraction bends like a real 3D body instead of a flat lens.

Cómo funciona

Cómo hacerlo

  1. Select a Glass material layer.
  2. Open Depth map and click Generate.
  3. Adjust Depth and Smooth to shape the thickness field.

Preguntas

My glass looks flat — how do I fix it?
Generate a depth map for the glass layer (Material → Depth map). It gives the refraction a rounded 3D silhouette; Depth and Smooth control the effect.

Background blur (backdrop blur)

Frosted glass over real content.

A backdrop blur behind a layer's silhouette (0-5 multiplier) so whatever sits behind it frosts through — true glassmorphism, not a painted fake.

Cómo funciona

Cómo hacerlo

  1. Select a shape layer.
  2. Set Background blur in the material/effects area.
  3. Place the layer over a colorful background to see the frost.

Preguntas

How do I make frosted glass that blurs the background?
Raise Background blur on the layer — it blurs whatever is behind the silhouette (0-5), like macOS's frosted materials.

Basic-mode macro sliders (Glassiness, Puffiness, Shadow)

Three sliders, pro results.

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.

Cómo funciona

Cómo hacerlo

  1. Switch the inspector to Basic mode.
  2. Drag Glassiness, Puffiness or Shadow.
  3. Open Advanced at any time — every underlying value is intact.

Preguntas

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.

Material style presets

glossy3d to chrome in one click.

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.

Cómo funciona

Cómo hacerlo

  1. Select one or more layers.
  2. Open the style presets menu.
  3. Click a preset (e.g. frostedGlass) and keep refining the material sliders.

Consejos

  • The AI assistant can apply presets too: 'Make it frosted glass'.

Preguntas

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.

Liquid Glass template layers

Named effect stacks, ready made.

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.

Cómo funciona

Cómo hacerlo

  1. Add a Liquid Glass Template layer.
  2. Pick a template: liquidGlass, frostedMetal, deepShadow, sideGlow or custom.
  3. Toggle effect variants and set their intensities.

Consejos

  • Start from a template and swap in your own artwork underneath.

Preguntas

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.

Designed starting templates

Start from a designed icon, not a blank canvas.

Six designed document templates: glass-tile, clay-button, glass-on-clay, monogram, glass-disc and mono-clay — full editable setups, not flattened images.

Cómo funciona

Cómo hacerlo

  1. Create a new document and choose a template.
  2. Swap the artwork/glyph for your own.
  3. Keep the materials as-is or retune them.

Preguntas

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.

Effects & Shaders

Blur, glow, shadows, grain, sticker FX and custom GLSL shaders.

Layer blur & Glow

Soften and shine.

Gaussian layer blur (0-128px) and a Glow effect with radius, intensity, threshold, optional tint and glow color.

Cómo funciona

Cómo hacerlo

  1. Select a layer → Effects.
  2. Set Layer blur to soften, or enable Glow.
  3. Tune Glow radius, intensity and threshold; tint it or use the layer's own colors.

Consejos

  • Put a blurred copy in 'Other Layers' for a custom outer bloom.

Preguntas

How do I add a glow behind my icon shape?
Effects → Glow. Raise radius and intensity; lower the threshold so more of the shape contributes. Use a tint color for neon looks.

Multiple outer & inner shadows

Stacked shadows, real depth.

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.

Cómo funciona

Cómo hacerlo

  1. Select a layer → Shadows.
  2. Add shadows and set type (outer/inner), color, blur, spread and offset.
  3. Use 'use layer color' or 'use surrounding color' for automatic shading; the first outer shadow drives the glass drop shadow.

Consejos

  • Stack two shadows (tight + wide) for convincing contact depth.

Preguntas

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.

Per-layer grain & output dither

Texture and clean gradients.

Per-layer film grain (intensity 0-0.5, scale 0.1-16, seed) plus an output dither pass to kill gradient banding in exports.

Cómo funciona

Cómo hacerlo

  1. Select a layer → Effects → Grain.
  2. Set intensity, scale and seed.
  3. Enable output dither for clean exported gradients.

Preguntas

How do I add texture to a flat color?
Effects → Grain on that layer — intensity, scale and seed are all adjustable.

Lens flare

A starburst highlight.

A starburst lens-flare highlight with intensity control and a light source that can follow the canvas light or use its own angle.

Cómo funciona

Cómo hacerlo

  1. Select a layer → Effects → Lens Flare.
  2. Set intensity.
  3. Choose 'use canvas light' or set a custom angle.

Preguntas

How do I add a sparkle/flare to my icon?
Effects → Lens Flare. Set the intensity and let it follow the canvas light, or give it its own angle.

Sticker effects (border, holo, curved shadow, peel)

Die-cut sticker looks.

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).

Cómo funciona

Cómo hacerlo

  1. Select a layer → Effects → Sticker.
  2. Set border width and color.
  3. Add Holo (with angle/scale), Curved shadow and Peel (angle/curl) to taste.

Preguntas

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.

Custom GLSL shader stack

Figma-style shaders, real GLSL.

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.

Cómo funciona

Cómo hacerlo

  1. Open the Shaders section (per layer, or canvas/background level).
  2. Add passes from the Shader Library, or write GLSL in the Code modal.
  3. Expose parameters as uniforms to get sliders and color pickers automatically.
  4. Use 'Generate with AI' to describe an effect and get a shader.

Consejos

  • uBackdrop gives shaders access to what's behind the layer.
  • Shaders stack — order matters.

Preguntas

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

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
Cómo funciona

Cómo hacerlo

  1. Add a Text layer from the toolbar.
  2. Double-click it on canvas (or press Enter) to type.
  3. Set font (Google Fonts picker), size, weight, spacing and alignment in the Text section.
  4. Set a text box width to wrap; choose word or character wrapping.

Consejos

  • Google Fonts loads on demand so you can browse the full library.

Preguntas

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) — the letters become editable outlines.

Image Tools

Bitmap import, background removal, vectorize, masks and cropping.

Built-in icon libraries (Heroicons & Lucide)

200k+ searchable glyphs.

Drop in vector glyphs from the Heroicons and Lucide libraries as fully stylable Icon layers — searchable from the toolbar and from the AI assistant.

Cómo funciona

Cómo hacerlo

  1. Add an Icon layer and search the library.
  2. Place the glyph and restyle it (fill, stroke, material).
  3. Convert to Path for point-level customization.

Preguntas

Is there a library of icons I can use?
Yes — Heroicons and Lucide are built in, with a 200k+ vector library searchable from the toolbar and the AI assistant.

Drag & drop import (PNG, SVG, .icns, .icon)

Drop a file, get a layer.

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.

Cómo funciona

Cómo hacerlo

  1. Drag a file over the canvas and release.
  2. PNG/SVG become layers; .icns unpacks into artwork.
  3. An Icon Composer .icon opens as a full document with layers.

Consejos

  • You can also paste SVG from the clipboard.

Preguntas

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.

Replace image & generated versions

Swap artwork, keep the styling.

Replace an image layer's bitmap while keeping all styling and transforms, and flip between versions of an AI-generated image.

Cómo funciona

Cómo hacerlo

  1. Select an image layer → Replace.
  2. Pick a new file (or another generated version).
  3. Styles, masks and transforms stay in place.

Preguntas

How do I swap the artwork but keep my effects?
Use Replace on the image layer — styling, masks and transforms are preserved.

Crop / mask inset

Trim bitmaps without leaving the editor.

Crop an image layer with per-side mask insets (left/right/top/bottom) on its cover-fit rectangle.

Cómo funciona

Cómo hacerlo

  1. Select an image layer.
  2. Set the mask inset values for each side.
  3. Clear the inset to restore the full bitmap.

Preguntas

How do I crop my image layer?
Use the mask inset controls on the image layer — crop each side independently. Set insets to 0 to undo.

Masks (edit mask, use as mask, filter mask)

Mask anything with anything.

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
Cómo funciona

Cómo hacerlo

  1. Edit mask: select an image layer and enter mask editing; paint/erase alpha; Done to finish (or Enter).
  2. Use as Mask: right-click a layer → Use as Mask to clip another layer by its geometry; Clear Mask to remove.
  3. Filter mask: assign a filter mask source so effects only apply inside (or outside, with invert) it.

Consejos

  • Filter masks are perfect for glows that should only appear behind an object.

Preguntas

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 background (4 techniques)

Cutouts without leaving the tab.

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.

Cómo funciona

Cómo hacerlo

  1. Select an image layer (or use the toolbar's scissors action).
  2. Choose a technique: Auto, Colour key, AI cutout, Multiply or Screen.
  3. For Colour key: pick the colour and adjust Purity; Detect finds it for you.
  4. Multiply knocks out white backgrounds; Screen knocks out black.

Consejos

  • Colour key is pixel-exact — great for logos on solid backgrounds.

Preguntas

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.

Vectorize image to SVG

Pixels in, editable vectors out.

Trace a bitmap into a new SVG layer with presets (Default, Black & white, Poster, Photo) and curve modes (Default, Pixel, Polygon, Spline).

Cómo funciona

Cómo hacerlo

  1. Select an image layer.
  2. Choose Vectorize and pick a preset (Default / Black & white / Poster / Photo).
  3. Pick a curve mode (Default / Pixel / Polygon / Spline).
  4. A new SVG layer is created — edit its points like any path.

Consejos

  • Use the 'Black & white' preset + Polygon curve mode for crisp logo traces.

Preguntas

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 & Delivery

Export formats, platform kits, project files and submissions.

Export formats (.icns, .png, .icon, .json)

Cuenta

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.

Cómo funciona

Cómo hacerlo

  1. Open the Export popover.
  2. Choose .icns, .png, .icon or .json.
  3. For PNG set the size/scale (x / px / %, 16-4096px); enable Trim to mask to crop transparent padding.
  4. For .icon, choose Bake materials (on = matches editor render, off = flat artwork so macOS applies its own glass).
  5. Download, or Copy to clipboard for the PNG.

Consejos

  • 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.

Preguntas

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.

More Formats (platform kits)

Cuenta

One icon, every platform.

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.

Cómo funciona

Cómo hacerlo

  1. Open Export → More Formats.
  2. Choose .ico, .appiconset, Windows kit, Linux kit, Favicons or Release kit.
  3. For .appiconset pick the platform (macOS / iOS / Universal).
  4. Download the converted file or zip.

Consejos

  • The Release kit is the 'give me everything' button for a launch.

Preguntas

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.

Icon Composer .icon bundles (open & export)

Cuenta

Full Icon Composer parity.

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.

Cómo funciona

Cómo hacerlo

  1. Drop a .icon bundle on the canvas to open it.
  2. Review any import warnings (Clear overrides, loose layers, missing assets, nested groups).
  3. Edit as a normal document.
  4. Export → .icon to write the bundle back out.

Consejos

  • Use 'Export all appearance modes' to get Default/Dark/Clear/Tinted PNGs for review.

Preguntas

Can I edit Apple Icon Composer files?
Yes — drop the .icon on the canvas. It opens as layers you can edit, then export back to .icon. The editor flags anything it can't map exactly.

Appearance modes (Default, Dark, Clear, Tinted)

Cuenta

Design once for every macOS appearance.

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.

Cómo funciona

Cómo hacerlo

  1. Switch appearance in the preview/export appearance switcher.
  2. Select a layer and set per-appearance overrides (edit scope: individual or all).
  3. Export all appearance modes as PNGs in one ZIP.

Consejos

  • Set edit scope to 'individual' when only one appearance should change.

Preguntas

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.

Export all appearance modes (ZIP)

Cuenta

Every appearance render in one click.

Batch-export Default, Dark, Clear and Tinted renders as PNGs in a single ZIP for review, handoff or store assets.

Cómo funciona

Cómo hacerlo

  1. Open Export.
  2. Click 'Export all appearance modes'.
  3. Download the ZIP of PNG renders.

Preguntas

How do I export all my icon variants at once?
Export → 'Export all appearance modes' downloads a ZIP with Default, Dark, Clear and Tinted PNG renders.

Submit to macOSicons

Cuenta

Publish to the icon library.

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.

Cómo funciona

Cómo hacerlo

  1. Open Export → Upload.
  2. Enter the app name and category; confirm authorship.
  3. Optionally attach .icns variants and the project .json.
  4. Submit for review.

Preguntas

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.

Project files (.json import/export)

Cuenta

Your document, saved as a file.

Export the editable document as a .json project file and re-import it later — full layers, materials and settings intact.

Cómo funciona

Cómo hacerlo

  1. Export → .json to download the project file.
  2. Use Import project .json to open it again.
  3. Continue editing from where you left off.

Consejos

  • Attach the .json to a Submit to macOSicons so others can remix it.

Preguntas

How do I save my work as a file?
Export → .json downloads the editable project. Import it later to keep working — every layer and material comes back.

Previews

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).

Cómo funciona

Cómo hacerlo

  1. Open the Preview Tray from the toolbar.
  2. Sizes: check legibility at real pixel sizes.
  3. Dock: see the icon among sample apps in a live dock.
  4. Home Screen: preview on an iOS grid and dock.

Consejos

  • Design at 1024 but always sanity-check in Sizes before exporting.

Preguntas

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.

Preview in context (Dock / Home Screen / Desktop)

Mockups you can download.

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.

Cómo funciona

Cómo hacerlo

  1. Open Preview in context.
  2. Choose a context: Dock, Home Screen or Desktop.
  3. Pick theme (Light / Dark / Both) and a wallpaper or backdrop.
  4. Download each render, Download All, or Save to Assets.

Consejos

  • Saved renders show up in the workspace Assets tab with their variant and project.

Preguntas

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.

Preview backdrop (not exported)

Check contrast on any background.

Behind-icon preview backdrops — Auto, Blur, Color, Gradient, Image — purely for judging contrast and transparency; never included in exports.

Cómo funciona

Cómo hacerlo

  1. Open the View / backdrop menu in the toolbar.
  2. Pick Auto, Blur, Color, Gradient or Image.
  3. Design against it; exports stay transparent as configured.

Preguntas

How do I see how my transparent icon looks on a wallpaper?
Use the preview backdrop (View menu) — pick Blur, Color, Gradient or Image behind the icon. It's preview-only and won't affect exports.

History & Versioning

Undo/redo and Time Machine version history.

Undo / Redo

50 steps back, freely.

A 50-step undo stack (Cmd+Z / Cmd+Shift+Z and toolbar buttons) covering every edit — with collaborators' changes excluded from your personal stack.

  • Cmd + ZUndo
  • Cmd + Shift + ZRedo
Cómo funciona

Cómo hacerlo

  1. Press Cmd+Z to undo, Cmd+Shift+Z to redo (or use the toolbar buttons).
  2. Undo history covers edits, moves, styles and structural changes.

Consejos

  • Need more than 50 steps back? Version history snapshots go further.

Preguntas

How far back can I undo?
50 steps. Cmd+Z undoes and Cmd+Shift+Z redoes; the toolbar has buttons too.

Version history (Time Machine)

Plus

Time Machine for your icon.

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
Cómo funciona

Cómo hacerlo

  1. Press Cmd+Option+H to open version history.
  2. Press Cmd+Option+S (or the Save button) to save a named version.
  3. Scrub the timeline (scroll or ↑/↓) to preview older states.
  4. Restore, or 'Restore as copy' to branch without losing current work.

Consejos

  • Name a version before big experiments — Restore as copy is the ultimate safety net.

Preguntas

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.

AI Assistant

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
Cómo funciona

Cómo hacerlo

  1. Open the AI panel and describe what you want ('a glassy Finder-style icon').
  2. Watch the activity stream; press stop to interrupt.
  3. Attach a reference image (paperclip or drag onto the prompt).
  4. Press ↑/↓ in the prompt to recall past prompts.
  5. Ask follow-ups: 'make the background softer', 'turn this into clay'.

Consejos

  • 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).

Preguntas

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 — 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.

Generate Icons with AI (up to 8 options)

Plus

Eight icon options from one prompt.

Generate up to 8 masked icon options from a prompt, with a count picker and clear cost label. Add options individually or 'Add all' to the canvas.

Cómo funciona

Cómo hacerlo

  1. Open Generate Icons with AI.
  2. Type a prompt and pick how many options (up to 8).
  3. Review the masked options and add one or all to the canvas.

Consejos

  • Options arrive already masked to the icon silhouette.

Preguntas

How do I get several icon ideas at once?
Use Generate Icons with AI — one prompt yields up to 8 masked icon options. Add the one you like or drop them all in and compare.

Decompose Image with AI

Plus

One flat image, many editable layers.

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.

Cómo funciona

Cómo hacerlo

  1. Open Decompose Image with AI and choose an image.
  2. Wait for the split into named layers.
  3. Add individual layers or Add all to the canvas.

Preguntas

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.

AI layer actions (Enhance, Make it Glass/Clay, Harmonize, Variations)

Plus

Right-click magic.

Contextual AI actions on any layer: Enhance, Make it Glass, Make it Clay, Harmonize Colors and Make 3 Variations.

Cómo funciona

Cómo hacerlo

  1. Right-click a layer → Ask AI.
  2. Pick Enhance, Make it Glass, Make it Clay, Harmonize Colors or Make 3 Variations.

Consejos

  • 'Harmonize Colors' is great after pasting in mismatched artwork.

Preguntas

How do I quickly restyle a layer with AI?
Right-click it → Ask AI: 'Make it Glass', 'Make it Clay', 'Enhance', 'Harmonize Colors' or 'Make 3 Variations'.

AI credit meter & billing offers

Plus

Know the cost before you generate.

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.

Cómo funciona

Cómo hacerlo

  1. Watch the cost label before each AI action.
  2. Run the action — credits deduct on completion.
  3. If short on credits, pick a top-up offer in the modal.

Preguntas

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 — no surprise bills.

Sharing & Collaboration

Share links, live co-editing and the community gallery.

Live collaboration (presence & cursors)

Plus

Design together in real time.

Real-time multiplayer co-editing with presence avatars, live cursors and op-based syncing (behind the collaboration flag).

Cómo funciona

Cómo hacerlo

  1. Enable collaboration and share an edit link.
  2. See collaborators' avatars and cursors live on canvas.
  3. Edit simultaneously — changes sync in real time.

Consejos

  • Your personal undo stack excludes collaborators' edits.

Preguntas

Can two people edit at the same time?
Yes, with live collaboration enabled: share an edit link and you'll see each other's avatars and cursors while editing together in real time.

Share to community (publish / update / unpublish)

Cuenta

Publish your icon project.

Publish your document to the community gallery, update the post as the design evolves, or unpublish it anytime.

Cómo funciona

Cómo hacerlo

  1. Open the Share modal → Share to community.
  2. Publish; update later when the design changes.
  3. Unpublish to take it down.

Preguntas

How do I post my icon to the community?
Share modal → Share to community → Publish. You can update or unpublish the post at any time.

Workspace & Offline

Projects manager, trash, assets library and offline sync.

Projects manager (documents & folders)

Cuenta

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.

Cómo funciona

Cómo hacerlo

  1. Open the projects area (/editor/docs).
  2. Create documents (macOS / iOS / Folder icon) and folders.
  3. Search, rename and nest to organize.
  4. Deleted items go to Trash — restore or permanently delete there.

Consejos

  • Folders nest, so you can group by client or app.

Preguntas

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.

Assets library

Cuenta

Everything you've generated or exported.

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?'.

Cómo funciona

Cómo hacerlo

  1. Open the workspace → Assets tab.
  2. Browse by variant; switch grid/list view.
  3. Preview and download any asset again.

Consejos

  • Renders saved from Preview in context are stored here too.

Preguntas

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.

Offline editing & sync

Cuenta

Design on a plane.

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.

Cómo funciona

Cómo hacerlo

  1. Open the workspace → Offline tab.
  2. Mark documents/projects 'available offline' (or 'Keep everything offline').
  3. Set a storage budget and watch the usage meter.
  4. Use Sync now when back online; retry failures or rebuild from server.

Consejos

  • Guest mode is fully local — nothing is saved to the cloud until you sign up.

Preguntas

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.

Guest mode (no account until export)

Free. No account needed until you export.

Anyone can open the editor and design immediately as a guest — a scratch document in the browser with full tools. Exports and cloud saves prompt a free sign-up.

Cómo funciona

Cómo hacerlo

  1. Open /editor and start designing — no signup wall.
  2. Work in the guest scratch document (stored in the browser).
  3. Sign up free when you want to export or save to the cloud.

Preguntas

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.

Interface & Shortcuts

Tour, mobile layout, focus mode, snapping and quality-of-life UI.

Boards (multiple icons in one session)

A strip of icons, side by side.

Work on several icon or folder boards in one session with a thumbnail strip — create, rename, duplicate and delete boards without leaving the canvas.

Cómo funciona

Cómo hacerlo

  1. Use the boards strip to switch between boards.
  2. Create a new icon or folder board.
  3. Rename, duplicate or delete boards from the strip.

Consejos

  • Duplicate a board to iterate on variants of the same icon.

Preguntas

Can I design several icons at once?
Yes — Boards keep multiple icon/folder documents in one session strip with thumbnails. Create, rename, duplicate or switch with one click.

Onboarding tour

Four steps to your first icon.

A skippable 4-step guided tour: Welcome → Build on the canvas → Layers & properties → Export & save. Skip Tour or jump to any step.

Cómo funciona

Cómo hacerlo

  1. The tour opens on first visit.
  2. Follow the four steps or click Go to step N.
  3. Skip Tour to dismiss it at any time.

Preguntas

Is there a tutorial for the editor?
Yes — a 4-step tour covers the canvas, layers & properties and export & save. You can skip it or reopen guidance anytime.

Hide interface (focus mode)

Canvas only, nothing else.

Collapse all editor chrome to a canvas-only view for distraction-free work or clean screenshots — bring the interface back with the same toggle.

  • Show Interface shortcut (see doc page)Toggle editor chrome
Cómo funciona

Cómo hacerlo

  1. Use the Show Interface toggle (shortcut in the doc page help).
  2. Work on the bare canvas.
  3. Toggle again to restore the full interface.

Preguntas

How do I hide all the panels for a screenshot?
Use the hide-interface toggle — it collapses everything to the canvas only. Toggle it back to restore the UI.

Zoom & pan

Move around the canvas like a native app.

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
Cómo funciona

Cómo hacerlo

  1. Cmd + / Cmd - to zoom; Cmd+0 to reset.
  2. Hold Space and drag to pan (or two-finger scroll on a trackpad).
  3. Right-click the canvas for zoom actions and Paste.

Preguntas

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.

Snapping

Guides that appear as you drag.

While dragging, layers snap to the canvas, to other layers and to equal spacing — with the same ruler-snap engine behind the keyline grid.

Cómo funciona

Cómo hacerlo

  1. Enable Snapping from the View menu.
  2. Drag a layer — snap guides appear against the canvas and other layers.
  3. Equal-spacing hints appear between three or more layers.

Consejos

  • Combine with Align & Distribute for numeric precision.

Preguntas

How do I align layers while dragging?
Turn on Snapping (View menu). Layers snap to the canvas, other layers and even equal spacing while you drag.

Keyline grid

Apple's alignment grid.

Show or hide an Apple-style keyline/alignment grid over the canvas so glyphs and shapes sit where platform guidelines expect.

Cómo funciona

Cómo hacerlo

  1. Toggle the keyline grid from the toolbar/View menu.
  2. Align artwork to the keylines.
  3. Hide it when done — it never exports.

Preguntas

What is the keyline grid for?
It's an Apple-style alignment grid over the canvas so your artwork sits within platform guidelines. It's preview-only and never exports.

Color picker / eyedropper

Sample any color, anywhere.

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
Cómo funciona

Cómo hacerlo

  1. Press C (or Ctrl+C / Alt+C) to open the eyedropper.
  2. Click any pixel to sample it.
  3. The color lands in fill, stroke or background depending on context.

Preguntas

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.

Marquee selection (layers & path points)

Rubber-band select anything.

Drag a marquee over the canvas to select multiple layers, or over an open path to marquee-select anchor points for bulk moves and deletes.

Cómo funciona

Cómo hacerlo

  1. Drag on empty canvas with the Select tool to marquee-select layers.
  2. In Edit Path mode, drag to marquee-select points.
  3. Move or delete the selection as a unit.

Preguntas

How do I select several layers or points at once?
Drag a marquee over them — on the canvas it selects layers, in Edit Path mode it selects anchor points.

Mobile & touch layout

The full editor on a phone.

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.

Cómo funciona

Cómo hacerlo

  1. Open the editor on a phone or tablet.
  2. Switch bottom tabs between Inspector, Layers and Projects.
  3. Use the More Tools menu for toolbar actions; haptics confirm key gestures.

Preguntas

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.

Cómo funciona

Cómo hacerlo

  1. Let documents name themselves — rename any time.
  2. Feel haptics on supported touch devices.
  3. If export capture fails on a rare GPU, the toast tells you which one.

Preguntas

How are my documents named?
Automatically from their content — rename any document yourself whenever you want.

Icon Toolkit

Standalone one-click tools and the public Icon API.

Icon Toolkit (standalone tools + public API)

Cuenta

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.

Cómo funciona

Cómo hacerlo

  1. Open /editor/toolkit.
  2. Run any tool in the browser (icon mask, generate, convert, remove background…).
  3. Or call the matching endpoint at /api/v1/editor/ from your own code.

Consejos

  • Toolkit tools work without opening the full editor document.

Preguntas

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.

Toolkit: Icon mask

Cuenta

Apply the macOS mask to any image.

One-click (and one API call) tool that clips any image to the macOS/iOS/watchOS icon silhouette — no design work needed.

Cómo funciona

Cómo hacerlo

  1. Toolkit → Icon mask.
  2. Upload an image and pick a platform mask.
  3. Download the masked PNG or call the API endpoint.

Preguntas

How do I put my logo into the macOS icon shape?
Toolkit → Icon mask: upload the logo, pick the macOS mask, download. Same via the /api/v1/editor/ icon-mask endpoint.

Toolkit: Generate with AI

Plus

AI icons without opening the editor.

Standalone AI icon generation from a prompt — the quick path when you want masked options without a full editing session.

Cómo funciona

Cómo hacerlo

  1. Toolkit → Generate with AI.
  2. Type a prompt.
  3. Download the options or continue in the editor.

Preguntas

Can I generate icons without using the editor?
Yes — Toolkit → Generate with AI produces masked icon options from a prompt. Credit costs are shown before you run it.

Toolkit: Convert icon

Cuenta

Any icon format, any direction.

Convert between icon formats in one step — .icns, .ico, PNG sets and more — from the browser or the API.

Cómo funciona

Cómo hacerlo

  1. Toolkit → Convert icon.
  2. Upload and choose the target format.
  3. Download the result.

Preguntas

How do I convert a PNG to .icns or .ico?
Toolkit → Convert icon: upload the PNG, choose .icns or .ico, download. No Mac tools required.

Toolkit: Icon Composer bundle

Cuenta

Build .icon bundles from artwork.

Create an Apple Icon Composer .icon bundle from your artwork as a standalone tool — or open full .icon files in the editor for deeper work.

Cómo funciona

Cómo hacerlo

  1. Toolkit → Icon Composer bundle.
  2. Upload artwork.
  3. Download the .icon bundle.

Preguntas

How do I make an Apple .icon bundle without Icon Composer?
Toolkit → Icon Composer bundle builds one from your artwork. For layered editing of existing .icon files, drop them into the editor.

Toolkit: Xcode .appiconset

Cuenta

Drop-in Xcode asset catalogs.

Generate a complete Xcode .appiconset (macOS, iOS or Universal) from one image — Contents.json and every required size included.

Cómo funciona

Cómo hacerlo

  1. Toolkit → Xcode .appiconset.
  2. Upload your 1024px artwork and pick a platform.
  3. Drop the folder into your Xcode asset catalog.

Preguntas

How do I make an Xcode appiconset from one image?
Toolkit → Xcode .appiconset: upload a 1024px image, choose macOS/iOS/Universal, and drop the result into Xcode.

Toolkit: Extract from .icns

Cuenta

Pull every size back out.

Unpack an existing .icns file into its individual PNG sizes — useful for reverse-engineering or updating legacy icons.

Cómo funciona

Cómo hacerlo

  1. Toolkit → Extract from .icns.
  2. Upload an .icns file.
  3. Download the extracted PNG sizes.

Preguntas

How do I get the images out of an .icns file?
Toolkit → Extract from .icns unpacks every embedded size as PNGs you can download.

Toolkit: Remove background

Cuenta

Instant cutouts from a URL or upload.

Standalone background removal (including the AI cutout) for quick asset prep outside the editor.

Cómo funciona

Cómo hacerlo

  1. Toolkit → Remove background.
  2. Upload an image.
  3. Download the transparent PNG.

Preguntas

Is there a quick way to remove a background without the editor?
Yes — Toolkit → Remove background does it standalone and returns a transparent PNG.

Toolkit: Favicon pack

Cuenta

Every favicon size in one zip.

Generate a complete web favicon pack (all common sizes and manifest entries) from one icon image.

Cómo funciona

Cómo hacerlo

  1. Toolkit → Favicon pack.
  2. Upload your icon image.
  3. Download the favicon zip.

Preguntas

How do I make favicons for my website?
Toolkit → Favicon pack generates every web favicon size in one zip from a single image.

Toolkit: Release kit

Cuenta

Ship everywhere in one zip.

One zip with every shipping artifact: .icns, .ico, .appiconset, favicons, MSIX tiles and more — the 'give me everything' button for a launch.

Cómo funciona

Cómo hacerlo

  1. Toolkit → Release kit.
  2. Upload your icon artwork.
  3. Download the complete release zip.

Preguntas

What's the fastest way to get every icon format for a release?
Toolkit → Release kit — one zip with .icns, .ico, .appiconset, favicons and everything else you need to ship.

Toolkit: Extract colors (palette)

Cuenta

A palette from any icon.

Extract a color palette from any image — handy for building matching backgrounds and brand sets.

Cómo funciona

Cómo hacerlo

  1. Toolkit → Extract colors.
  2. Upload an image.
  3. Copy the extracted palette swatches.

Preguntas

How do I get the colors out of an icon?
Toolkit → Extract colors returns a palette of swatches from any image.

Toolkit: Preview in context

Cuenta

Dock mockups without the editor.

Standalone in-context mockups (Dock, Home Screen, Desktop) for quick shareable renders of any icon image.

Cómo funciona

Cómo hacerlo

  1. Toolkit → Preview in context.
  2. Upload an icon image and pick a context.
  3. Download the mockup render.

Preguntas

Can I get a dock mockup without opening the editor?
Yes — Toolkit → Preview in context renders your icon image in Dock, Home Screen or Desktop scenes and downloads the mockup.

Preguntas frecuentes

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.
Liquid Glass materialProcedural reflection (global liquid-glass gloss)
how do I make a clay / 3D puffy icon
Set Material to Clay and tune Bezel, Thickness and Softness — or just drag Basic mode's 'Puffiness' macro slider.
Clay materialBasic-mode macro sliders (Glassiness, Puffiness, Shadow)
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.
Canvas background (solid, gradient, blob mesh)Background presetsSuggest from icon (auto palette)
how do I remove the background of an image / make it transparent
Select the image and hit Remove Background. Use Colour key for flat colors, Multiply for white, Screen for black, or AI cutout for photos.
Remove background (4 techniques)
how do I export an .icns / PNG / favicon / Windows icon
Export → .icns, .png, .icon or .json. More Formats covers .ico, .appiconset, Windows kit, Linux kit, Favicons and the all-in-one Release kit.
Export formats (.icns, .png, .icon, .json)More Formats (platform kits)Toolkit: Favicon packToolkit: Convert icon
how do I make a dark mode icon
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.
Appearance modes (Default, Dark, Clear, Tinted)Export all appearance modes (ZIP)
can I edit Apple Icon Composer .icon files
Yes — drop the .icon bundle on the canvas. It opens as editable layers (with import warnings where needed) and exports back to .icon.
Icon Composer .icon bundles (open & export)Drag & drop import (PNG, SVG, .icns, .icon)
how do I turn my PNG / logo into a vector
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.
Vectorize image to SVGConvert to Path
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.
Path point editingConvert to PathVector tools (Select, Pen, Line, Edit Path, Distort)
how do I cut one shape out of another / combine shapes
Select both shapes and use Union, Subtract, Intersect or Exclude from the boolean menu. Shape Join welds shapes into one outline.
Boolean operations (Union, Subtract, Intersect, Exclude)Shape Join
how do I add text / change the font
Add a Text layer and double-click it to type. The Text section has a Google Fonts picker, size, weight, spacing, alignment and wrapping.
Text layers
how do I add a shadow / glow / outline
Effects → Shadows for stacked outer/inner shadows, Effects → Glow for bloom, and the Stroke section for inner/outer/center outlines (even gradient strokes).
Multiple outer & inner shadowsLayer blur & GlowStroke (position, caps, gradients, blur)
how do I make a sticker-style icon
Effects → Sticker: add a border, then holo foil, curved shadow and peel. Document → Border adds a ring around the whole icon.
Sticker effects (border, holo, curved shadow, peel)Icon border
can I use AI to design my icon
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).
AI chat assistant (prompt to layers)Generate Icons with AI (up to 8 options)Decompose Image with AIAI layer actions (Enhance, Make it Glass/Clay, Harmonize, Variations)
how do I see my icon in the dock / make a mockup
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.
Preview Tray (Sizes, Dock, Home Screen)Preview in context (Dock / Home Screen / Desktop)Toolkit: Preview in context
does it work offline / do I need an account
Design free as a guest with no account — exporting needs a free sign-up. Documents can be made available offline with local storage budgets and sync-when-back.
Offline editing & syncGuest mode (no account until export)
how do I undo / go back to an earlier version
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.
Undo / RedoVersion history (Time Machine)
how do I share my design / collaborate
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.
Share links (view or edit)Live collaboration (presence & cursors)Share to community (publish / update / unpublish)Community gallery (browse, like, comment, duplicate)
how do I submit my icon to macOSicons.com
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.
Submit to macOSicons
how do I organize / find my projects
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.
Projects manager (documents & folders)Assets libraryBoards (multiple icons in one session)
is there an API / can I automate icon generation
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.
Icon Toolkit (standalone tools + public API)