Wiki

Layout Editor

The Layout Editor lets you arrange your icons on a virtual home-screen grid before exporting them. It's the centerpiece of the composition workflow, open it once you've built an Export List and you'll see the icons laid out on a phone mock that mirrors your real iOS Home Screen page-for-page.

Opening the Layout Editor

Open Studio and tap the Edit Layout button in the top-left corner of the device-preview header. The editor opens full-screen, titled "Layout".

The same button is the canonical entry point regardless of icon background mode, see [[#Bakery mode vs. Layout mode]] below.

What you can do

• Tap an empty slot to add an icon. A picker sheet opens with two tabs:
  • Browse, search the full library (5,500+ icons).
  • Export List, pick from icons you've already queued (including text icons and Custom Icons).
• Long-press a placed icon to assign a specific background or foreground variation from your Studio palette. Same sheet you get from long-pressing in Export List. Tap Auto in that sheet to revert to the cycled choice.
• Swipe horizontally to move between pages.
• Three-dot menu (top right) has:
  • Add Missing Export List Icons, auto-fill every queued item into empty slots, creating pages as needed.
  • Add New Page, add an empty page after the current one.
  • Remove Empty Pages, clean up pages that have no placed icons (keeps at least one).
  • Clear Current Page, remove every icon placed on the page you're looking at.
  • Dock Icons (iPad), choose how many icons sit in the dock.
  • Auto Contrast, Bakery mode only, picks black or white for each glyph based on the wallpaper slice underneath.
• Auto-fill from Export List, when the layout is empty and you have items queued, a big purple button appears centered on page 1. One tap drops every queued icon into a slot.

Pages and dock

• The layout starts with one page. Add more with the + in the page navigator below the grid, or via the three-dot menu.
• The dock is shared across all pages (same as iOS). On iPad you can set the dock icon count in the three-dot menu.

How placement affects the rest of the app

The Layout Editor's placement isn't just a preview, it's a binding contract with your Export List and Studio preview. Re-applying a saved theme (My Themes) restores your styling but doesn't bring back your layout.

• Export List render order follows your layout. Icons placed in page 1 slot 1 come first; unplaced icons fall to the bottom of the list.
• Studio device preview mirrors page 1 of your layout. When page 1 has at least one icon placed, the Studio preview shows that exact layout. When page 1 is empty, the preview reverts to the default staging icons.

Bakery mode vs. Layout mode

The same editor shifts its export behavior based on your Studio icon background type:

• Layout mode, when your icon background is Solid, Gradient, Image, or Blur, each slot in the editor renders the actual icon with its full background. The Export… button at the bottom exports every icon in your Export List (in layout order) as standalone PNGs. See Applying Icons for the next steps.
• Bakery mode, when your icon background is set to Baked, the editor switches into Bakery mode. The wallpaper shows through every slot, and the export button becomes Bake & Save…, which slices the wallpaper at each icon's grid position and bakes the slice into the icon background. See Bakery for the full workflow.

The editor's title changes to match, "Layout" in Layout mode, "Bakery" in Bakery mode. Switching icon background modes preserves your placements and any manual variation assignments, so you can experiment with the look without losing your work.

What gets exported

The export button at the bottom of the editor honors the mode:

• Layout mode: exports every icon in your Export List (placed icons in layout order, then unplaced icons in insertion order). Placement determines order, never membership, to exclude an icon from export, remove it from the Export List.
• Bakery mode: exports only the icons placed in slots (empty slots are skipped) plus the wallpaper. Bakery is an all-or-nothing slice export, so partial placements aren't typical.

Related

• Bakery, the baked-in icon background workflow (Bakery mode in this editor).
• Export List, the canonical icon set the layout draws from.
• Editing Icons, Studio's icon styling controls; affects how each placed slot renders.
• Custom Icons, using your own glyphs in a layout.