One Button: Pick a starting point, then set background, image, text and shape. Download the PNG and drop it into a button's image box in Companion.
Library: Click "Open Library" for the picker. Click a button to add it, or "Add Set" for a whole row. Your own saved designs sit at the top under My Presets, marked (user) - double-click a name to rename, x to delete, and adding one brings its name back so you can edit it and save over it. "Start Fresh" clears everything back to a blank button.
Save, back up and share: Type a name and "Save to My Presets" keeps the design in this browser. "Back Up" writes all your presets to a file and "Restore" loads one back - worth doing, because clearing your browser data wipes saved presets. "Copy Design Link" copies a web link that reopens this exact design and set on any machine, with no file to send; designs with a large uploaded image are too big for a link, so use Back Up for those.
Make a set: Add buttons from the picker, or use "Make a numbered set" in the Sets tab to fill a set with a numbered range (PC 1, PC 2... or cue numbers like 1.1 to 1.5). The set shows under the preview.
Duplicate: Click the + tile under the preview to copy your button into a set, or drag any button in a set onto the + tile to duplicate it. The picker also adds buttons from any preset into your set.
Edit one, some or all: With a set, changes apply to every button by default. Click one to style it alone, Cmd-click or Shift-click to grab a few. Click empty space, or "Edit All", to go back to editing everything.
Reorder and reuse: Drag a button onto another to reorder, or onto the big preview to make it your single button.
Half-point sizes: The Size boxes for text and image take half points - type a value like 32.5 for finer control at larger sizes. The sliders still move a point at a time.
PNG size: 72 px is the exact size of a Companion or Stream Deck key, so it is the smallest file. 144 px suits high-res decks and retina screens. 288 px is sharpest and scales down cleanly to any key, which is why it is the default.
App icons: Pick 1024 px for a full-size app icon, and tick Squircle in the Border/Shape card to clip the button to an Apple-style rounded shape with transparent corners. The preview shows the exact shape that exports.
File names: a PNG is named after its text, or its icon name if there is no text, otherwise button-1. To name an icon-only button, type the name and drop its text opacity to zero - invisible on the button, used as the file name.
Export for REAPER: In the Download card, click "REAPER Icons" to get toolbar icon strips (normal, hover and active in one PNG) as a ZIP that mirrors REAPER's toolbar_icons folder, with the 150 and 200 hi-DPI copies. Linked on states become a matching name_on strip, so you assign the base icon and REAPER finds the on state. Unzip it there, restart REAPER, and assign each icon in the toolbar editor.
On states: In the Sets tab, under "On state", the presets make a button's on or active look. Pick Tint, Highlight, Invert, Dot or Colour and it adds a real, editable on state button to your set, linked to its button - then edit it with the cards on the left. Highlight lifts dark buttons brighter and deepens light ones, so it reads as active on any colour. REAPER export pairs it as name_on, no renaming. Each design card also has its own Invert tick next to its colour, to flip just that part. The swatch under those presets sets the colour used by Tint, Dot and Colour; Highlight and Invert have no colour of their own, so it greys out for them. Tint and Highlight change solid and gradient backgrounds; Invert, Dot and Colour work on any background, including images.
Shortcuts: Double-click a slider to reset it. Cmd-Z undoes and Cmd-Shift-Z redoes, up to 50 steps back. In a set, Cmd-A selects every button.