icon-generator
Generate web UI/UX icon assets (favicon.ico, apple-touch-icon, PWA icons incl. maskable) and optionally Unreal Engine packaging icons (Windows .ico, macOS .iconset/.icns, Linux .png) from a single source SVG/PNG; use when you need correct multi-size icon files, safe-area guidance, manifests/head tags, or automation.
Generate web UI/UX icon assets (favicon.ico, apple-touch-icon, PWA icons incl. maskable) and optionally Unreal Engine packaging icons (Windows .ico, macOS .iconset/.icns, Linux .png) from a single source SVG/PNG; use when you need correct multi-size icon files, safe-area guidance, manifests/head tags, or automation.
Icon Generator
You generate icon asset bundles for web UI/UX first (favicons + PWA icons), and you can also generate Unreal Engine packaging icon assets when needed.
Fast workflow
-
Pick target(s): Web UI/UX (favicon + PWA icons) and/or Unreal Engine packaging (optional).
-
Pick the source icon: prefer a 1024x1024 PNG (square) or a clean SVG. If it's not square, choose whether to crop or pad (default: pad).
-
Generate the assets using
scripts/generate_icons.py.
Web/PWA sizes and safe-area rules: references/web-ui-ux.md
Unreal Engine formats and expectations: references/unreal-engine.md
Full size tables: references/icon-sizes.md
- Verify output quality: ensure the
.icocontains multiple sizes, and the 16/24/32 px variants are crisp.
Quality rules (what "good" looks like)
- Design for small sizes: avoid thin strokes, tiny text, and busy details.
- Prefer transparent backgrounds for desktop icons unless you intentionally "plate" the icon.
- Preview at 16px and 24px. If it becomes muddy, create a simpler variant.
Automation (recommended)
Run and customize the script:
- Script:
scripts/generate_icons.py - It supports:
- Web/PWA set:
favicon.ico,apple-touch-icon.png,icon-192.png,icon-512.png,icon-maskable-512.png - UE sets (optional): Windows
.ico, macOS.iconset, Linux.png
- Web/PWA set:
If you need HTML <head> snippets, manifest.webmanifest examples, and maskable safe-area guidance, read:
Notes
- If your input is SVG and Python SVG rasterization is unavailable on your machine, export a 1024x1024 PNG first (e.g., Inkscape), then rerun the script using the PNG.
- Keep this SKILL.md lean; detailed size tables live in the reference files.
You Might Also Like
Related Skills
songsee
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
moltbot
slack-gif-creator
Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like "make me a GIF of X doing Y for Slack."
anthropicsalgorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
anthropicsbrand-guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
anthropicstheme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
anthropicscanvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
anthropics