chrome-extension-icons

name	chrome-extension-icons
description	Search and generate icons for Chrome browser extensions. Automatically downloads SVG icons from Iconify (275,000+ free icons), converts them to required PNG sizes (16x16, 32x32, 48x48, 128x128), and updates manifest.json configuration. Use when the user mentions "extension icon", "browser extension icon", "chrome icon", "add icon to extension", "generate icon for extension", or when working with Chrome extension manifest.json icon setup. Supports color customization, local SVG conversion, and batch generation for multiple projects.
allowed-tools	Bash, Read, Write, Edit, Grep, Glob
version	1.0.0

Chrome Extension Icons

Generate professional icons for Chrome browser extensions in seconds using Iconify's vast library of 275,000+ free open-source icons.

Quick Start Workflow

When the user requests an extension icon, follow these steps:

1. Understand the Request

Extract key information:

• Icon theme/keyword: What type of icon? (e.g., "calendar", "music", "settings", "bookmark")
• Target directory: Where to save icons (default: ./icons)
• Manifest location: Path to manifest.json (default: ./manifest.json)
• Color preference: Any specific color requirement (optional)
• Context: Is manifest.json already present? Is this a new project?

2. Search for Icons Automatically

Run the search command with the extracted keyword:

node ~/.claude/skills/chrome-extension-icons/scripts/generate-icons.js search "<keyword>"

Expected output:

• List of matching icons with preview URLs
• Best match automatically identified
• Top 5 results displayed (best match + 4 alternatives)

Present to user:

• Show the best matching icon with its ID and preview link
• Briefly mention that 4 alternative options are also available if they want to choose differently
• Provide the preview URL so they can see what the icon looks like

Example presentation:

I found a great calendar icon for your extension:

Best match: mdi:calendar
Preview: https://icon-sets.iconify.design/mdi/icons/calendar.html

I'll generate this icon in 4 sizes (16x16, 32x32, 48x48, 128x128) for your Chrome extension.
If you'd prefer a different style, I also have 4 alternatives saved that you can choose from.

Shall I proceed with this icon?

3. Generate Icons

Once confirmed (or auto-proceed if user said "yes" to any icon), run:

node ~/.claude/skills/chrome-extension-icons/scripts/generate-icons.js generate \
  --icon "<icon-id>" \
  --output "./icons" \
  --manifest "./manifest.json"

With custom color (if user specified a color):

node ~/.claude/skills/chrome-extension-icons/scripts/generate-icons.js generate \
  --icon "<icon-id>" \
  --output "./icons" \
  --manifest "./manifest.json" \
  --color "#ba3329"

4. Verify Results

After generation, check the output:

ls -lh ./icons/

Verify 4 PNG files are created:

• icon16.png
• icon32.png
• icon48.png
• icon128.png

Check manifest.json was updated:

cat ./manifest.json | grep -A 6 '"icons"'

5. Report to User

Provide a summary:

✅ Icon generation complete!

Generated files:
- icons/icon16.png (1.2 KB)
- icons/icon32.png (2.4 KB)
- icons/icon48.png (3.8 KB)
- icons/icon128.png (9.5 KB)

Your manifest.json has been updated:
{
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

📌 Alternative icons (if you want to try a different style):
1. mdi:calendar-month - https://icon-sets.iconify.design/mdi/icons/calendar-month.html
2. fa:calendar - https://icon-sets.iconify.design/fa/icons/calendar.html
3. heroicons:calendar - https://icon-sets.iconify.design/heroicons/icons/calendar.html
4. carbon:calendar - https://icon-sets.iconify.design/carbon/icons/calendar.html

Just let me know if you'd like to try any of these alternatives!

Advanced Features

Custom Color Icons

When user requests a specific color (e.g., "make it red", "use my brand color #ba3329"):

node ~/.claude/skills/chrome-extension-icons/scripts/generate-icons.js generate \
  --icon "mdi:home" \
  --color "#ba3329" \
  --output "./icons"

Note: Color customization works best with single-color SVG icons. Complex gradients may not render as expected.

Convert Local SVG File

When user has their own logo or SVG file:

1. First check if the file exists:

   ls -lh <svg-file-path>
   

2. Convert it:

   node ~/.claude/skills/chrome-extension-icons/scripts/generate-icons.js convert \
     --input "<svg-file-path>" \
     --output "./icons" \
     --manifest "./manifest.json"
   

3. Optionally apply color:

   node ~/.claude/skills/chrome-extension-icons/scripts/generate-icons.js convert \
     --input "./logo.svg" \
     --output "./icons" \
     --color "#ff0000"
   

Batch Generation

When user needs icons for multiple projects:

1. Create a configuration file icons-config.json:

   {
     "projects": [
       {
         "name": "Project A",
         "icon": "mdi:calendar",
         "output": "./project-a/icons",
         "manifest": "./project-a/manifest.json"
       },
       {
         "name": "Project B",
         "icon": "mdi:music",
         "output": "./project-b/icons",
         "manifest": "./project-b/manifest.json",
         "color": "#ff0000"
       },
       {
         "name": "Project C",
         "input": "./project-c/logo.svg",
         "output": "./project-c/icons",
         "manifest": "./project-c/manifest.json"
       }
     ]
   }
   

2. Run batch generation:

   node ~/.claude/skills/chrome-extension-icons/scripts/generate-icons.js batch \
     --config icons-config.json
   

3. Report summary showing success/failure for each project

Chrome Extension Icon Requirements

Always inform users about Chrome's icon requirements:

• 16x16 pixels: Favicon, toolbar icon (small displays)
• 32x32 pixels: Windows taskbar (optional but recommended)
• 48x48 pixels: Extension management page (required)
• 128x128 pixels: Chrome Web Store, installation dialog (required)

Format: PNG only (SVG is not supported in manifest.json)

Transparency: Supported and recommended for non-square logos

File size: Aim for < 100 KB total for all 4 files

Manifest.json Configuration

The script automatically creates or updates the icons field:

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

If action or browser_action exists, default_icon is also updated:

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

Error Handling

Missing Dependencies

If the script fails with Sharp installation error:

macOS:

brew install vips
cd ~/.claude/skills/chrome-extension-icons && npm install

Ubuntu/Debian:

sudo apt-get install libvips-dev
cd ~/.claude/skills/chrome-extension-icons && npm install

Windows:

npm install --global windows-build-tools
cd ~/.claude/skills/chrome-extension-icons && npm install

Inform the user of these steps if installation fails.

API Failures

The script has built-in retry logic (3 attempts with exponential backoff). If Iconify API fails:

• Suggest trying again in a moment
• Offer to use a local SVG if available
• Check internet connection

Rate Limiting

If HTTP 429 error occurs, the script automatically waits and retries. Inform user:

The icon API is experiencing high traffic. Waiting 60 seconds before retry...

Invalid Icon Selection

If an icon doesn't render well or user doesn't like it:

• Present the 4 saved alternative icons
• Offer to search for a different keyword
• Suggest using their own SVG file

Best Practices

1. Always preview: Show the user the icon preview URL before generating
2. Confirm before generating: Unless user explicitly requested immediate action
3. Check manifest.json exists: If not, inform user a new one will be created
4. Verify output: Always run ls to confirm files were created successfully
5. File sizes: Report file sizes to ensure they're reasonable (< 20 KB each)
6. Backup warning: If manifest.json exists, mention it will be updated (not replaced)

Common User Phrases That Trigger This Skill

• "I need an icon for my Chrome extension"
• "Add a calendar icon to my extension"
• "Generate extension icons"
• "Can you create icons for my browser extension?"
• "I need icons for manifest.json"
• "Convert my logo to Chrome extension format"
• "Make extension icons from this SVG"

Examples

See examples/usage.md for detailed conversation examples and edge cases.

Technical Details

• Icon source: Iconify API (https://iconify.design/)
• Total icons: 275,000+ from 200+ icon sets
• Image processing: Sharp library (high-performance Node.js)
• Supported input: SVG (from Iconify or local file)
• Output format: PNG with transparency
• Node.js requirement: >= 18.17.0

Troubleshooting Quick Reference

Issue	Solution
Sharp won't install	Install libvips: brew install vips (macOS)
API timeout	Retry after a moment, check connection
Icon looks bad	Try a different icon from alternatives
Wrong colors	Use --color flag for single-color icons
File too large	Complex SVGs may create large PNGs, try simpler icon
Manifest not updating	Check file permissions, verify path is correct

---

Remember: This skill automates a tedious process. Be helpful, present clear options, and make the experience smooth for the user. Always show preview links so users know what they're getting before generation.