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"

1. •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