Create BC App Icon

---
name: create-bc-app-icon
description: Create an app icon for a Microsoft Dynamics 365 Business Central AL extension that has none. Asks the style (flat 2D or isometric 3D), the colors, the content (image only, or a word mark with an image), and anything the icon must show or avoid, then draws an SVG - square, rounded corners, transparent background, 300 x 300 - renders it to PNG with nothing to install, shows it, and offers to accept it or make another. An accepted icon becomes the logo in app.json. Works in any AL project, including AL-Go repositories, from Claude Code or GitHub Copilot. Use when the user says "make me an app icon", "design an icon for this app", "I don't have a logo", "create a logo for my extension", or runs /create-bc-app-icon.
---

# BC app icon — create one when the app has none

Works in any folder with an `app.json`. It needs only the AL extension's project layout: no other
tools, no particular repository structure, no installs.

**The standard, non-negotiable** (`references/icon-standard.md` has the SVG skeleton and the checks):
a **square** icon, **rounded corners** (an 18 % radius: 54 px on 300), a **transparent
background** outside the rounded square, drawn to a **300 × 300** canvas, legible at 32 px (Business
Central shows it at 32 px in Extension Management and the Role Center, 48–64 px in the app list, up
to 300 px on AppSource), no text smaller than 44 px tall, nothing within 20 px of the edge. Output is
one PNG — `images/AppIcon.png` — with its SVG source beside it.

Do everything here yourself, in this conversation: ask, draw, render, show, revise. This skill runs
the same in Claude Code and GitHub Copilot, in VS Code or the terminal. Ask each question with
whatever question tool you have (`AskUserQuestion` in Claude Code, Copilot's own in Copilot), two to
four options per question, the recommended one first. With no such tool, ask the same questions as
a short numbered list and wait for the answers.

## Step 1: Find the app and know what it is

**Find the app folder.** Look for every `app.json` in the workspace, ignoring dependency and build
folders such as `.alpackages`, `node_modules`, and `.git`. The folder holding the chosen `app.json`
is the **app folder**, and **every path in this skill is relative to it**, never to the repository
root. The app may be at the root, or in a folder of its own beside a test app, as in an AL-Go
repository.

- **None:** stop and say an `app.json` is needed; offer to run again once the project exists.
- **One:** use it.
- **Several:** ask which app the icon is for, listing each by name and folder, the main app first.
  A test app rarely needs an icon. Each app gets its own icon, so a second app is a second run.

**Check for an existing icon.** If `app.json` already has a `logo` whose file exists, or `images/`
already holds an image, show it and ask: **Keep it** (stop here) / *Create a new one*.

**Read, don't ask:** `app.json` (`name`, `publisher`, `brief`, `description`), a `README.md` if there
is one, and the object names in the `.al` files. From them, write down in one line what the app is
about — the icon's subject when the user gives no description.

## Step 2: Ask, in one go (four questions)

If the question tool takes one question at a time, ask them in this order.

1. **Style?** — **Flat 2D (recommended — crisp at 32 px)** / *Isometric 3D* (a simple extruded
   shape with two shaded faces; no photorealism).
2. **Colors?** — *One color* / **Two colors (recommended)** / *A two-color gradient*. In the
   question's text, propose the colors: the publisher's brand colors if the user has named any
   (propose only what they wrote, never a color pulled from a website or an email signature), else
   a pairing suited to the app's subject (for example deep blue `#0F6CBD` with teal `#0A7C85`), each
   named with its hex value; free text takes the user's own.
3. **Content?** — **An image only (recommended — a word mark is unreadable at 32 px)** / *A word
   mark and an image* (two to four letters at most, the app's initials or a short word, set large).
4. **Anything the icon must show or avoid?** — **Use your best understanding of what the app is
   about** (say in the option's description what that understanding is, from Step 1) / *I'll
   describe it* (free text: a motif, a symbol to avoid, a reference).

## Step 3: Draw it — an SVG, to the standard

Write `images/AppIcon.svg` yourself, whole, from `references/icon-standard.md`'s skeleton: the
300 × 300 `viewBox`, the `clipPath` rounded rectangle every painted element sits inside, the
background fill (one color, two colors as two shapes, or the `linearGradient`), the motif as a
few bold geometric shapes (a document, a box, a gear, a truck, a tag, a shield, a chart —
whatever Step 1 and the answers call for) with strong contrast against the background, the
optional word mark in a bold sans-serif at 44 px or more. **Nothing outside the clip path; no
raster images; no fonts the renderer may lack beyond `Arial, Helvetica, sans-serif`; no filters
or effects a 32 px render loses.** Say in one line what you drew and why it stands for the app.

## Step 4: Render it to PNG — nothing to install — and show it

Run these from the app folder. Stop at the first that exists; every one of them produces a
300 × 300 PNG with a transparent background from the SVG:

| Where | Command | Note |
|---|---|---|
| **Any OS with Chrome or Edge** | `"<browser>" --headless=new --screenshot="<abs>/images/AppIcon.png" --window-size=300,300 --default-background-color=00000000 --hide-scrollbars --disable-gpu --user-data-dir="<temp folder>" "file://<abs>/images/AppIcon.svg"` | macOS: `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome` or `/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge`; Windows: `C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe` or Chrome under `Program Files`; Linux: `google-chrome`, `microsoft-edge`, `chromium`. The transparent default background is what keeps the corners clear; the temporary profile keeps a browser that is already open from taking over the command. Verified on Edge on macOS, November 5, 2026 |
| **ImageMagick / librsvg / Inkscape, if on `PATH`** | `magick -background none images/AppIcon.svg images/AppIcon.png` · `rsvg-convert -w 300 -h 300 images/AppIcon.svg -o images/AppIcon.png` · `inkscape images/AppIcon.svg -w 300 -h 300 -o images/AppIcon.png` | only when already installed; never install for this |
| **Python with cairosvg present** | `python3 -c "import cairosvg; cairosvg.svg2png(url='images/AppIcon.svg', write_to='images/AppIcon.png', output_width=300, output_height=300)"` | `python3 -c "import cairosvg"` must succeed first |
| **Otherwise** | write `images/icon-preview.html` from the reference file (it embeds the SVG, shows it at 300, 64, and 32 px on light and dark, and has a **Save as PNG** button that draws it on a canvas and downloads `AppIcon.png`), open it, and ask the user to click the button and save into `images/` | the one case with a manual step; say so plainly |

Don't use macOS Quick Look (`qlmanage`): it writes an RGBA file with opaque white corners.

Check the result before showing it, with the reference file's one-line check: 300 × 300, color type
6 (RGBA), **and a top-left corner pixel with alpha 0**. An RGBA header alone doesn't prove the
background is transparent. If any of the three fails, redo the render with the next option in the
table. Then **open it** with the
OS default opener (`open` / `start` / `xdg-open`) — the preview page when it was written, else the
PNG — so the user sees it at once.

## Step 5: Accept, or make another

One question: **Accept this icon** / *Make another — I'll say what to change* (free text: the motif,
the colors, bolder, simpler, add the initials) / *Make another — your call*. On a change, update
the SVG, re-render, show, ask again; keep the previous attempt as `images/AppIcon-<n>.svg/.png` so
the user can go back to it by its number. On **Accept**:

1. `images/AppIcon.png` and `images/AppIcon.svg` stay (the source, for the next change of mind);
   delete the numbered rejects unless the user wants them kept.
2. Copy the PNG to `src/logo/AppLogo.png` and write `"logo": "src/logo/AppLogo.png"` into `app.json`
   (keep every other value). Say both paths in one line.
3. Write `images/AppIcon.brief.md`: the date and the four answers, so a later change starts from
   the same brief.
4. Tell the user to commit `images/` and `src/logo/`: a build that compiles from the repository,
   such as AL-Go's, has no logo unless the file is committed. Check that `.gitignore` doesn't
   exclude them.

## What this skill never does

Never fetches an image or a color from the web, a brand site, or an email signature; never installs
a renderer; never writes anything but `images/AppIcon*.svg`, `images/AppIcon*.png`,
`images/AppIcon.brief.md`, `images/icon-preview.html`, `src/logo/AppLogo.png`, and `app.json`'s
`logo`; never sets `logo` before the user accepted.