Icon Forge Skill | Agent Skills

Icon Forge

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

Quick Start

Follow these 5 phases in order. Skip to Phase 4 if user provides --svg <path>.

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: Minimal, playful, corporate, bold, elegant, techy

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 design principles below. Present concepts, let user choose, iterate.

SVG structure requirements:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- No width/height attributes -->
  <!-- Colors as CSS classes for dark mode adaptability -->
  <style>
    .primary { fill: #2563eb; }
    .accent  { fill: #1e40af; }
  </style>
  <path class="primary" d="..."/>
</svg>

Validation checklist:

viewBox is 0 0 100 100 (square, clean coordinates)
No width/height attributes on root <svg>
No <text> elements (text does not scale to 16px)
No strokes thinner than 2 units
Maximum 3 distinct colors
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">
  <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 4: Generate Platform Assets

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

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

If next.config.(js|mjs|ts) exists AND app/layout.(tsx|jsx|js) exists → add --framework nextjs
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:

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

SVG Icon Design Principles

Canvas: viewBox="0 0 100 100", no width/height attributes
Scalability: Must be recognizable at 16px (favicon) through 1024px (app store)
Geometric simplicity: Prefer circles, rectangles, clean bezier curves
Stroke minimum: No strokes thinner than 2 units at 100x100 scale
Color restraint: 1-3 brand colors maximum
No text: Logomark only — text does not survive 16px rendering
No fine detail: Avoid thin lines, small gaps, intricate patterns
Visual weight: Center of mass should feel balanced in the square canvas
Negative space: Use intentionally for clever dual-meaning designs
currentColor: Support monochrome use via fill="currentColor" variant
Flat design: Avoid gradients unless central to brand concept
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.

Agent Skills: Icon Forge

Install this agent skill to your local

Skill Files