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 . Use --base 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](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 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](WORKFLOW.md) "Design Seed Workflow" for details.

SVG structure requirements:

  Brand Name
  
    .primary { fill: #2563eb; }
    .accent  { fill: #1e40af; }
  
  

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 ``
• ` as first child, role="img"` on root (accessibility)
• No `` 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:

  Brand Name
  
    .bg { fill: #ffffff; }
    .fg { fill: #1a1a2e; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #1a1a2e; }
      .fg { fill: #e0e0ff; }
    }
  
  
  

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 `, gradients, and filters — produce a single-color silhouette that inherits its color from CSS. Save as monochrome.svg`. See [WORKFLOW.md](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 /generate_assets.py \
  --svg  \
  --dark-svg  \
  --bg-color "" \
  --name "" \
  --framework nextjs \  # omit if not Next.js App Router
  --output-dir ./brand-assets

Replace ` 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](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](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: ` as first child with brand name, role="img" on root `
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 `, , and subtle ` effects
15. Rounded corners: Use rx/ry for approachable feel when appropriate

Output

See [WORKFLOW.md](WORKFLOW.md) for detailed workflow and [EXAMPLES.md](EXAMPLES.md) for examples. See [TROUBLESHOOTING.md](TROUBLESHOOTING.md) for common issues.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: joaquimscosta
• Source: joaquimscosta/arkhe-claude-plugins
• License: MIT

Install and usage instructions live in the source repository linked above.