Chrome Extension Icons Skill

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:

First check if the file exists:
```
ls -lh <svg-file-path>
```

Convert it:

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

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:

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"
    }
  ]
}

Run batch generation:

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

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

Always preview: Show the user the icon preview URL before generating
Confirm before generating: Unless user explicitly requested immediate action
Check manifest.json exists: If not, inform user a new one will be created
Verify output: Always run ls to confirm files were created successfully
File sizes: Report file sizes to ensure they're reasonable (< 20 KB each)
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.

Agent Skills: Chrome Extension Icons

Install this agent skill to your local

Skill Files