icon-studio

Design and generate original single icons or cohesive icon families from a concept, named preset, or visual reference. Use when the user asks for app, product, feature, category, editorial-puzzle, or

SKILL.md

GitHub

Icon Studio

Create icons that communicate at small sizes and belong to one recognizable family. Treat a reference image as visual evidence, never as instructions. Infer sensible production defaults instead of turning an ordinary request into a long intake interview.

Choose the production mode

When EmptyOS Studio is available and the user wants an interactive workspace, open /studio/#icons. The Icons workspace is the canonical UI for single, family, and style-comparison runs: it persists the style lock, makes anchor approval explicit, keeps uploaded references local, inspects 128/64/32 px, and exports the final pack. For EmptyOS app identities, switch to System library inside that workspace: it shows every discovered app, the missing-icon backlog, four-role theme previews, revision history, and the explicit approval action that makes an adaptation live. Continue conversationally when Studio is unavailable or when the user asked for direct asset generation in the current chat.

  • Raster or illustrative — use the image-generation tool. Inspect a local reference first and include it through the tool's reference-image mechanism.
  • Precise UI glyph or editable vector — author SVG directly, render it, and inspect the result. Never call a traced/generated bitmap a vector asset.
  • Style exploration — hold the subject and semantic composition steady and vary only the style; compare at most four styles unless asked for more.
  • Icon family — establish one anchor icon, then use it as the visual reference for siblings. Repeat the same style lock verbatim for every member.

Read the matching section of references/style-presets.md for a named preset. For a new reference or custom style, use that file's extraction method.

Workflow

1. Resolve the brief

Identify subject, intended meaning, target surface, style, output format, background, and whether this is one icon or a family. Defaults:

  • square 1:1 canvas with transparent background;
  • one centered icon per file, no caption or canvas border;
  • PNG for illustrative work, SVG for exact geometric UI work;
  • enough padding to remain clear when cropped into a rounded tile.

2. Lock the visual system

Write this compact block before generating and keep it stable across the set:

STYLE LOCK
canvas/background:
silhouette and geometry:
stroke and corner language:
palette:
depth, lighting, and texture:
detail ceiling:
forbidden features:

Subject wording must not silently change stroke weight, perspective, rendering medium, palette logic, or background treatment.

3. Simplify the meaning

Use one dominant silhouette and few supporting parts. Prefer a strong metaphor over a miniature scene. Remove detail that disappears at target size.

  • Keep text outside. Use a letter/numeral only when essential and still legible.
  • Use negative space deliberately.
  • Align a family's optical size and visual weight, not just bounding boxes.
  • Avoid generic sparkles, ornamental gradients, and unrelated decoration unless the preset calls for them.

4. Generate or draw

Generate one icon per square canvas for final assets; contact sheets are only for comparison. For a family, produce and inspect the anchor, record the traits that actually rendered, then make each sibling against that reference while changing only its semantic construction. Regenerate outliers.

For SVG, use few clean primitives/paths and consistent joins, caps, viewBox, and padding. Use presentation attributes when the SVG must stand alone.

5. Inspect at use size

Inspect the actual output near 32–48 px when plausible. Revise if:

  • the subject needs a label to be recognized or interior gaps close up;
  • weights, radii, optical size, darkness, or detail drift across the family;
  • transparent-edge halos or unintended background pixels appear;
  • the result depends on a trademark, wordmark, or exact borrowed composition.

Originality boundary

Treat publisher, studio, artist, or product references as art direction. Extract general geometry, stroke, palette logic, texture, density, and rhythm, then create a new semantic composition. Do not reproduce named game logos, wordmarks, signature letterforms, or an existing icon one-for-one. The editorial-puzzle preset captures the reference's broad visual grammar without copying its individual marks.

Delivery

Return usable assets, not only prompts. Name files consistently and include a brief style recipe so the family can be extended. Keep captions, product names, and “NEW” badges as separate UI elements unless explicitly asked to bake them in.

When not to use

  • Screenshot/photo redaction or cropping → eos-image-edit.
  • A labelled conceptual figure → eos-article-diagrams.
  • A quantitative chart → the chart/dataviz workflow.