Icon Generation

Icon Generation Skill

Concise, reusable skill for generating app icons (SVG / PNG) and launcher icons for Android Flutter apps. Designed to work with LLMs (Copilot Chat) and image generation models (DALL·E, etc.).

When to Use This Skill

• Creating consistent, accessible, and platform-ready icons
• Producing SVG markup or PNG assets
• Generating image-generation prompts for app icons
• Setting up launcher icons with flutter_launcher_icons

Important Constraints (Project-Specific)

• Prefer vector first (SVG) whenever possible
• Keep icons simple and legible at small sizes (24x24, 48x48)
• Provide transparent backgrounds for app icons when requested
• Use the project's color palette or provide color recommendations with hex codes

Flutter Icon Locations

App Icons (Launcher)

• Android: android/app/src/main/res/mipmap-*/ (ic_launcher.png)

UI Icons

• Place in assets/icons/ and register in pubspec.yaml
• Use Flutter's built-in Icons class when possible
• For custom icons, consider using flutter_svg package

Icon Sizing

Android Launcher (mipmap)

• mdpi: 48×48 px
• hdpi: 72×72 px
• xhdpi: 96×96 px
• xxhdpi: 144×144 px
• xxxhdpi: 192×192 px

Master Icon

• 1024×1024 px for Play Store and source

Example Prompts

1) Generate a small UI icon (SVG)

"Create a simple, single-color search icon for app UI (24x24). Provide:

• a clean SVG with viewBox 0 0 24 24 and a compact single-path
• recommended filename assets/icons/ic_search.svg
• one-line alt text for accessibility Constraints: single color (use #1F2937 or suggest a high-contrast color)."

2) Generate app launcher icon

"Design an app launcher icon for a Notes app — style: flat, minimal, rounded corners, primary accent color #0057D9. Provide:

• a 1024×1024 source image
• export-ready PNG files for all Android mipmap sizes
• alt text and recommended filenames Constraints: simple silhouette, good contrast at small sizes."

3) Image-generation prompt

"Create a clean, flat-style app icon. Requirements:

• Transparent or solid background (specify preference)
• Simple two-tone palette: primary #0EA5E9, secondary #0F172A
• Minimalist symbol, centered, no text
• Provide outputs: PNG 1024x1024 (source), then resize for Android mipmap sizes Negative prompts: avoid photorealism, gradients, text, heavy shadows."

Using flutter_launcher_icons

For automated icon generation, use the flutter_launcher_icons package:

1. Add to pubspec.yaml:

dev_dependencies:
  flutter_launcher_icons: ^0.13.1

flutter_launcher_icons:
  android: true
  image_path: "assets/icon/app_icon.png"

2. Run: flutter pub run flutter_launcher_icons

Tips

• Always include primary color hex code and alternate suggestions
• For UI icons, keep viewBox within 24x24 or 48x48
• Test icons at small sizes to ensure legibility
• Consider dark/light mode variations