b-open-io/generate-icon
skills/generate-icon/SKILL.md
This skill should be used when the user asks to "generate an icon", "create a favicon", "make an app icon", "create iOS icon", "create Android icon", "generate PWA icons", "make desktop app icon", "create Windows icon", "create macOS icon", "app store icon", "Play Store icon", "App Store icon", or needs AI-generated icons with platform-specific sizing.
$ install --global
skillsauthnpx skillsauth add b-open-io/gemskills generate-iconInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 3, 2026, 8:35 PM17.3s6 files scanned
SKILL.md
- name:
- generate-icon
- description:
- This skill should be used when the user asks to "generate an icon", "create a favicon", "make an app icon", "create iOS icon", "create Android icon", "generate PWA icons", "make desktop app icon", "create Windows icon", "create macOS icon", "app store icon", "Play Store icon", "App Store icon", or needs AI-generated icons with platform-specific sizing.
Generate Icon Skill
Generate professional icons for any platform using Gemini AI with automatic background removal, cropping, and multi-size export.
Quick Start
# Favicon for website
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "modern tech startup logo letter S" --preset favicon --output ./icons/favicon
# iOS App Store icons
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "meditation app lotus flower" --preset apple-app-icon --output ./icons/ios
# Android Play Store + adaptive icons
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "fitness tracker flame icon" --preset android-app-icon --output ./icons/android
# PWA manifest icons
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "productivity app checkmark" --preset pwa --output ./icons/pwa
# macOS desktop app
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "code editor brackets symbol" --preset macos-icns --output ./icons/macos
# Windows desktop app
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "music player note icon" --preset windows-ico --output ./icons/windows
# General UI icons
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "settings gear" --preset ui-icons --output ./icons/ui
Presets
| Preset | Description | Sizes | Bundle |
|--------|-------------|-------|--------|
| apple-app-icon | iOS/iPadOS App Store | 18 sizes (1024-20px) | No |
| android-app-icon | Google Play + adaptive layers | 11 sizes + foreground | No |
| favicon | Browser tab icons | 8 sizes + ICO | Yes (.ico) |
| pwa | Progressive Web App | 11 sizes + maskable | No |
| macos-icns | macOS desktop | 10 sizes | Yes (.icns) |
| windows-ico | Windows desktop | 7 sizes | Yes (.ico) |
| ui-icons | In-app icons | 9 sizes (512-16px) | No |
Pipeline
- Generate - Creates master icon at high resolution via Gemini
- Remove Background - Uses Replicate rembg for clean edges
- Crop & Center - Trims whitespace, centers on square canvas with 5% padding
- Resize - Exports all preset sizes with lanczos3 interpolation
- Bundle - Creates ICO/ICNS bundles where needed
Options
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "prompt" --preset <name> --output <dir> [options]
Required:
--preset <name> Platform preset (see table above)
--output <dir> Output directory
Optional:
--input <image> Reference image for style guidance
--master-image <path> Use existing master instead of generating
--skip-generate Skip AI generation (requires --master-image)
--skip-remove-bg Skip background removal
--bg-color <hex> Background color for non-transparent presets
Examples
Using a reference image
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "clean app icon version" --preset pwa --input ./existing-logo.png --output ./icons
Using an existing master
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "" --preset ui-icons --master-image ./my-icon.png --skip-generate --output ./icons
iOS with custom background color
bun run --cwd ${CLAUDE_PLUGIN_ROOT} ${CLAUDE_PLUGIN_ROOT}/skills/generate-icon/scripts/generate.ts "weather app sun" --preset apple-app-icon --bg-color "#0066CC" --output ./icons/ios
Icon Design Tips
DO:
- Simple, bold, recognizable silhouette
- Single focal point
- High contrast
- Clean edges
- Works at 16x16px
DON'T:
- Fine details that disappear at small sizes
- Text (unreadable at icon sizes)
- Complex gradients (banding issues)
- Multiple competing elements
- Photos or realistic images
Environment Variables
| Variable | Required | Description |
|----------|----------|-------------|
| GEMINI_API_KEY | Yes | Google AI Studio API key |
| REPLICATE_API_TOKEN | Yes | Replicate API token for background removal |
Output Structure
output/
├── master-raw.png # Original generated image
├── master-nobg.png # Background removed
├── master-cropped.png # Cropped and centered
├── master-final.png # With background (iOS only)
├── favicon.ico # ICO bundle (favicon preset)
├── AppIcon.icns # ICNS bundle (macos preset)
├── icon-512.png # Size variants...
├── icon-256.png
└── ...
Context Discipline
Do not read generated icon images back into context. The script outputs file paths for all generated sizes. Ask the user to visually inspect the results. Icon sets produce many files across multiple sizes - reading them back would quickly exhaust the context window.
Troubleshooting
| Issue | Solution |
|-------|----------|
| "GEMINI_API_KEY not set" | Export your API key: export GEMINI_API_KEY=your-key |
| "REPLICATE_API_TOKEN not set" | Export your token: export REPLICATE_API_TOKEN=your-token |
| ICO not generated | Install ImageMagick: brew install imagemagick |
| ICNS not generated | Only works on macOS (requires iconutil) |
| Background not removed cleanly | Try a simpler prompt with solid background |
| Icon too complex | Simplify prompt, avoid "detailed" or "realistic" |
Related Skills
b-open-io/visual-planner
development
VerifiedTrustedCommunity
This skill should be used when the user asks to "plan a workflow", "diagram an agent system", "visualize an architecture", "map out a pipeline", "create a flow diagram", "draw agent connections", "design a multi-agent system", "show how agents interact", "make a system diagram", "visualize a data pipeline", "map out a process", "diagram my workflow", "create an architecture diagram", "plan agent orchestration", "brainstorm a system design", "show the flow between components", "interactive workflow diagram", "workflow canvas", "visual-planner", "open in tldraw", or "plan this project visually". Produces tldraw .tldr diagrams natively — the standard infinite canvas format. Includes a thin playground wrapper with planning-specific UI (phase controls, agent assignment, KPI bar, agent callback bridge) and an "Open in tldraw" button for standalone editing.
3SKILL.mdUpdated Apr 3, 2026
b-open-io/upscale-image
data-ai
VerifiedTrustedCommunity
This skill should be used when the user asks to "upscale an image", "increase image resolution", "make image bigger", "enlarge image", or "enhance image resolution". Requires Vertex AI credentials.
3SKILL.mdUpdated Apr 3, 2026
b-open-io/team-group-photo
data-ai
VerifiedTrustedCommunity
This skill should be used when the user asks to "create team photo", "generate group portrait", "make team banner", "team image in any style", "group shot with multiple people", or needs a composite image featuring multiple team members arranged together in any art style.
3SKILL.mdUpdated Apr 3, 2026
b-open-io/style-creator
development
VerifiedTrustedCommunity
This skill should be used when the user asks to "add a new style", "create a style", "add an art style", "new aesthetic", "custom style", "make a style for", or needs to add a new art style to the gemskills style library. Guides the complete workflow from defining the style to generating and optimizing the reference tile.
3SKILL.mdUpdated Apr 3, 2026