Icon Generator (VS Code Extension)

Generate icons via simple SVG or Gemini (Nano Banana). Applies shape masking (rectangle, square, hexagon, hexagon-vertical, triangle, disc, grasshopper, and jagged rectangles), with optional rounded borders, trims transparent edges, and resizes to multiple target resolutions.

Features

• Simple mode: set border, background, text color, short text, and optional rounded borders.
• AI mode: enter a free-form prompt, generated by Gemini (gemini-2.5-flash-image or gemini-3-pro-image-preview).
• Shape masking: outside the selected shape is transparent.
• Flexible output: specify individual output paths and sizes (numeric pixels, "svg", or "original").
• Language Model Tools: Both modes available as Copilot tools - use #generate_simple_icon or #generate_ai_icon in chat!
• Outputs: saves original to generated-icons/originals, then resized to generated-icons/icons/<size>/.

Commands

• Icon Generator: Generate Simple Icon (iconGenerator.generateSimple)
• Icon Generator: Generate AI Icon (iconGenerator.generateAI)

Language Model Tools (Copilot Integration)

This extension registers two tools that can be used by Copilot in chat:

#generate_simple_icon

Generate simple icons with solid colors, optional text, and optional rounded borders. Available in Copilot chat.

Example prompts:

• "Generate a simple square icon with blue background and white text 'DB'"
• "Create a red hexagon icon with the text 'Alert' and rounded borders"
• "Generate a grasshopper-compose icon with green background and white text 'Code'"
• "Create a triangle icon with purple background and rounded corners"

#generate_ai_icon

Generate AI-powered icons using Gemini. Available in Copilot chat.

Example prompts:

• "Generate an AI icon of a robot mascot in a circle shape"
• "Create a minimalist mountain landscape icon in a hexagon"
• "Generate an abstract tech icon using grasshopper-compose shape"
• "Create a mystical crystal icon in a hexagon-vertical shape at 4K resolution"

Supported Shapes

• Rectangle - Full rectangular shape
• Square - Perfect square shape
• Hexagon - Pointy sides left/right (flat top/bottom)
• Hexagon-Vertical - Pointy top/bottom (flat left/right sides)
• Triangle - Triangular shape
• Disc - Circular shape
• Grasshopper-Compose - Complex composite shape
• Grasshopper-Decompose - Decomposed shape variant
• Rectangle-Jagged-Left - Rectangle with jagged left edge
• Rectangle-Jagged-Right - Rectangle with jagged right edge
• Rectangle-Jagged-Both - Rectangle with jagged both edges

All shapes support optional rounded borders for a softer appearance.

Configuration

• iconGenerator.genaiApiKey: Gemini API key. If empty, falls back to GOOGLE_API_KEY env var.
• iconGenerator.defaultSizes: Default icon sizes in pixels (default: [16, 32, 64, 128, 256])
• iconGenerator.outputFolder: Base folder name for generated icons (default: "generated-icons")
• iconGenerator.aiAspectRatio: Default aspect ratio for AI images (default: "1:1")
• iconGenerator.aiResolution: Default resolution for AI images (default: "flash", supports flash/1K/2K/4K)

Usage

Via Commands

1. Run a command from the Command Palette.
2. Pick your output folder (workspace folder recommended).
3. Provide inputs (colors, text, sizes, or AI prompt).
4. Check outputs under the chosen folder in generated-icons/.

Via Copilot Chat

Simply ask Copilot to generate icons using natural language:

@workspace Generate a simple hexagon icon with green background (#00FF00), 
black border, and white text "GO" at sizes 32, 64, 128

@workspace Create an AI icon of a kawaii cat with a wizard hat in a circle shape

Copilot will automatically invoke the appropriate tool and generate your icons!

API

Input Validation

The extension uses Zod for runtime validation of all external inputs to ensure type safety and provide clear error messages.

Validated parameters include:

• Shape: Must be one of the supported shape types
• Colors: Must be valid hex colors (e.g., #FFFFFF, #000000)
• Sizes: Must be positive integers or special values ("svg", "original")
• Output paths: Cannot be empty strings
• Aspect ratios: Must be one of the supported ratios
• Resolutions: Must be one of: flash, 1K, 2K, 4K

Validation errors provide detailed messages indicating which field failed and why, making debugging easier for both users and developers.

Size Configuration

The extension uses a unified size configuration format throughout its API:

interface SizeConfig {
  outputPath: string;  // Absolute path where the icon should be saved
  size: number | "svg" | "original";
}

This interface is used by:

• Language Model Tools: Both #generate_simple_icon and #generate_ai_icon accept sizes: SizeConfig[]
• Internal APIs: generateSimpleIcon() and generateAIIcon() functions
• Extension Commands: Command handlers build these configurations from user input

Size options:

• Number (e.g., 16, 32, 64, 128, 256): Generates icon at specific pixel size
• "svg": Exports as SVG format (reserved for future implementation)
• "original": Saves the masked original image without resizing

Example usage in Copilot Chat:

@workspace Generate a simple hexagon icon with green background (#00FF00) and 
save it to these sizes:
- /path/to/icons/16/icon.png at 16px
- /path/to/icons/32/icon.png at 32px  
- /path/to/icons/original/icon.png as original

Example TypeScript usage:

const sizes: SizeConfig[] = [
  { outputPath: "/path/to/output/16/icon.png", size: 16 },
  { outputPath: "/path/to/output/32/icon.png", size: 32 },
  { outputPath: "/path/to/output/original/icon.png", size: "original" }
];

Benefits:

• Individual output paths per size for flexible directory structures
• Mixed output formats (PNG at different sizes + original)
• Consistent API across all extension interfaces
• Direct control over where each icon variant is saved

Gemini setup

• Get an API key: https://aistudio.google.com/apikey
• Set it in VS Code settings (iconGenerator.genaiApiKey) or export GOOGLE_API_KEY.

Development Manual

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Visual Studio Code

Setup

1. Clone the repository and install dependencies:

npm install

2. Compile TypeScript to JavaScript:

npm run compile

Development Workflow

1. Open the project folder in VS Code
2. Press F5 or run Debug: Start Debugging to launch Extension Development Host
3. Make changes to TypeScript files in src/
4. Run the compile task to rebuild (or use watch mode):

npm run watch  # Auto-compile on file changes

5. Reload the Extension Development Host window (Cmd+R on macOS, Ctrl+R on Windows/Linux)

Testing the Extension

In the Extension Development Host window:

• Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
• Try commands: Icon Generator: Generate Simple Icon or Icon Generator: Generate AI Icon
• Test Copilot integration: Open Copilot Chat and use #generate_simple_icon or #generate_ai_icon

Debugging

• Set breakpoints in TypeScript files
• Use Debug Console to inspect variables
• Check Output panel for extension logs

Packaging

Build a .vsix file for distribution:

npm install -g @vscode/vsce  # Install vsce globally (if needed)
npm run package

The packaged extension will be created as icon-generator-<version>.vsix