icon-forge

Icon Forge

Generate brand icons as SVG and produce all required platform assets from a single source.

Quick Start

Follow these phases in order. Skip to Phase 4 if user provides --svg <path>. Use --base <path> to load an existing SVG as a design seed for Phase 2 iteration.

Phase 1: Brand Discovery

Gather brand information before designing. Ask about:

• Identity: Brand name, industry, tagline
• Concept: Visual metaphor, abstract vs literal, symbol ideas
• Colors: Primary color (hex), secondary, accent
• Style preset: Present the style menu:
  1. Geometric — clean shapes, mathematical precision
  2. Organic — flowing curves, irregular blobs, natural asymmetry
  3. Illustrative — layered scenes, color blocks, story-driven
  4. Symbolic — dual-meaning line art, negative space, conceptual merges
  5. Constellation — connected nodes, network graphs, dot clusters
• Depth: Flat (default) or with gradients/shadows?

If $ARGUMENTS contains a brand description, extract info and minimize questions.

Phase 2: Design Master SVG

Generate 2-3 concept variations as SVG. Apply the chosen style preset's SVG techniques from WORKFLOW.md (see Style-to-SVG Technique Table). Design for three progressive detail tiers: Glyph (16px, 2-4 shapes), Mark (192px, full logomark), Master (1024px, rich detail). Present concepts, let user choose, iterate.

If --base <path> was provided: Read the existing SVG, analyze its shapes/colors/structure, and use it as a starting point instead of generating from scratch. Present the original alongside 2 improved variations that apply the chosen style preset. See WORKFLOW.md "Design Seed Workflow" for details.

SVG structure requirements:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="icon-title">
  <title id="icon-title">Brand Name</title>
  <style>
    .primary { fill: #2563eb; }
    .accent  { fill: #1e40af; }
  </style>
  <path class="primary" d="..."/>
</svg>

Validation checklist:

• viewBox is square (0 0 100 100 brand icons; 0 0 24 24 for UI-style marks)
• No width/height attributes on root <svg>
• <title> as first child, role="img" on root (accessibility)
• No <text> elements (text does not scale to 16px)
• Filled shapes on integer coordinates (prevents sub-pixel blur)
• No strokes thinner than 2 units in Glyph/Mark tiers
• Color count within preset limit (1-3 most; up to 5 Illustrative/Constellation)
• xmlns attribute present

Phase 3: Create Dark-Mode Favicon SVG

Duplicate the master SVG and embed a @media (prefers-color-scheme: dark) block:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="fav-title">
  <title id="fav-title">Brand Name</title>
  <style>
    .bg { fill: #ffffff; }
    .fg { fill: #1a1a2e; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #1a1a2e; }
      .fg { fill: #e0e0ff; }
    }
  </style>
  <rect class="bg" width="100" height="100" rx="12"/>
  <path class="fg" d="..."/>
</svg>

Rules: dark foreground becomes light, light backgrounds become dark, maintain >= 4.5:1 contrast.

Phase 3b: Monochrome Variant

Duplicate the master SVG and replace all colors with currentColor. Remove <style>, gradients, and filters — produce a single-color silhouette that inherits its color from CSS. Save as monochrome.svg. See WORKFLOW.md for details.

Phase 4: Generate Platform Assets

Save master SVG and dark-mode SVG to the project.

Framework detection — before running the script, detect the target project:

1. If next.config.(js|mjs|ts) exists AND app/layout.(tsx|jsx|js) exists → add --framework nextjs
2. Otherwise → omit --framework (default generic output)

uv run <skill-scripts-dir>/generate_assets.py \
  --svg <master-svg-path> \
  --dark-svg <dark-svg-path> \
  --bg-color "<brand-bg-color>" \
  --name "<app-name>" \
  --framework nextjs \  # omit if not Next.js App Router
  --output-dir ./brand-assets

Replace <skill-scripts-dir> with the absolute path to this skill's scripts/ directory. Omit --framework for non-Next.js projects. With --framework nextjs, outputs icon.svg and apple-icon.png (Next.js App Router conventions).

Requires rsvg-convert (brew install librsvg) or magick (brew install imagemagick).

Phase 5: Integration Output

Present to the user:

1. The integration guide (_nextjs-guide.txt for Next.js, or _html-snippet.html for other frameworks)
2. Framework-specific placement guidance (Next.js app/ + public/, Vite public/, CRA public/)
3. Summary of all generated files

SVG Icon Design Principles

1. Canvas: Square viewBox — 0 0 100 100 for brand icons (default), 0 0 24 24 for UI-style marks. No width/height attributes
2. Scalability: Must be recognizable at 16px (favicon) through 1024px (app store)
3. Shape vocabulary: Match shapes to the chosen style preset. See WORKFLOW.md for style-specific SVG techniques
4. Fill vs stroke: Prefer filled paths (scale predictably); use strokes for Symbolic line art. See WORKFLOW.md for per-preset strategy
5. Stroke minimum: No strokes thinner than 2 units in Glyph/Mark tiers; Master tier may use 1.5+ for decorative detail
6. Color restraint: 1-3 brand colors for most presets; Illustrative and Constellation may use up to 5
7. No text: Logomark only — text does not survive 16px rendering
8. Progressive detail: Design for three tiers (Glyph 16px, Mark 192px, Master 1024px). Fine detail welcome in Master tier; must simplify gracefully
9. Pixel alignment: Integer coordinates for filled shapes; 0.5 offset for odd stroke widths. Limit decimals to 1-2 places
10. Accessibility: <title> as first child with brand name, role="img" on root <svg>
11. Visual weight: Center of mass should feel balanced in the square canvas
12. Negative space: Use intentionally for clever dual-meaning designs
13. currentColor: Always generate a monochrome variant with fill="currentColor" alongside the branded master
14. Depth: Flat by default. When depth is enabled, use <linearGradient>, <radialGradient>, and subtle <filter> effects
15. Rounded corners: Use rx/ry for approachable feel when appropriate

Output

See WORKFLOW.md for detailed workflow and EXAMPLES.md for examples. See TROUBLESHOOTING.md for common issues.