Icon Creation

Icon Creation for Browser Extensions

This Skill helps generate browser extension icons at the required sizes from SVG source files.

When to Use This Skill

Use this Skill when:

• Creating icons for a new browser extension
• Converting SVG designs to PNG icons at multiple sizes
• User mentions "extension icon", "icon generation", or "icon sizes"
• Need to generate 16x16, 32x32, 48x48, and 128x128 PNG icons

Quick Start

Option 1: Generate from text/emoji (fastest)

npm install canvas
node generate-icons.js "A"              # Single letter
node generate-icons.js "🎨"             # Emoji
node generate-icons.js "X" "#000" "#0f0" # Custom colors

Option 2: Create custom SVG design

1. Edit icon.svg - Modify the text element or create custom graphics
2. Generate PNGs: See README.md for conversion methods (Inkscape, ImageMagick, online tools)

Icon Size Requirements

Browser extensions require icons at these sizes:

• 16x16 - Browser toolbar (smallest)
• 32x32 - Browser toolbar (retina displays)
• 48x48 - Extension management page
• 128x128 - Chrome Web Store and extension installation

Design Tips

• Use the full 128x128 canvas - Make primary elements large and bold
• Test at 16x16 - Ensure icon is readable at smallest size
• Simple, bold shapes - Avoid thin lines that disappear when scaled down
• High contrast - Ensure icon stands out on light and dark backgrounds

Generation Methods

Method 1: Node.js Script (Recommended)

npm install canvas
node generate-icons.js

Method 2: Other Tools

For Inkscape, ImageMagick, or online tools, see README.md.

Complete Documentation

• USAGE.md - Full usage documentation and framework details
• README.md - Alternative generation methods

Example Workflows

Text/Emoji Icon

cd my-extension
npm install canvas
node path/to/generate-icons.js "📧"  # Email icon

Custom SVG Icon

1. Copy and edit icon.svg from this skill directory
2. Modify the <text> element or add custom graphics
3. Convert using Inkscape/ImageMagick (see README.md)

Reference in manifest.json

"icons": {
  "16": "icon16.png",
  "32": "icon32.png",
  "48": "icon48.png",
  "128": "icon128.png"
}

Customization Examples

Single letter icons:

• node generate-icons.js "A"
• node generate-icons.js "T"
• node generate-icons.js "𝔉" (Unicode characters)

Emoji icons:

• node generate-icons.js "🎨" (art/design)
• node generate-icons.js "📝" (notes/writing)
• node generate-icons.js "🔧" (tools/settings)

Custom colors:

• node generate-icons.js "X" "#1a1a1a" "#00ff00" (dark bg, green text)
• node generate-icons.js "!" "#ff0000" "#ffffff" (red bg, white text)