Icon Generator (VS Code Extension)

Generate icons via simple SVG or Gemini (Nano Banana). Applies shape masking (rectangle, square, hexagon, triangle, disc), 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.
• 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_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"

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!

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