appicons

App Icon Generator CLI — Generate icons, splash screens, and favicons for iOS, Android, Web & Apple platforms

License: MIT iOS 18 Ready Android 13+ Ready watchOS Ready tvOS Ready visionOS Ready

A CLI tool that generates 100+ app assets from a single command. Create app icons, launch screens, adaptive icons, and PWA assets for React Native, Expo, Flutter, native iOS/Android/watchOS/tvOS/visionOS, and web apps.

iOS 18 ready: Dark mode, tinted, and clear icon appearances
Android 13+ ready: Material You themed monochrome icons
Apple platforms: watchOS, tvOS (layered parallax), visionOS (3D layers)
PWA compliant: Maskable and monochrome icons with auto-generated site.webmanifest
Store listing assets: Play Store icon, feature graphic, TV banner
Auto-generated configs: Xcode Contents.json, Android ic_launcher.xml
Google Fonts: Use any font from fonts.google.com for text-based icons

Use Cases

React Native / Expo apps: Generate all icons and splash screens, copy to assets/ folder
Flutter apps: Generate Android adaptive icons and iOS app icons
Native iOS apps: Full iOS 18 icon set with dark/tinted/clear variants for Xcode
Native Android apps: Adaptive icons with monochrome layer for Material You theming
watchOS apps: Circular icons for Apple Watch (9 sizes)
tvOS apps: Layered icons with parallax effect for Apple TV
visionOS apps: 3D layered icons for Vision Pro
PWA / Web apps: Favicons, Apple touch icons, and maskable icons with manifest
App Store / Play Store: Store listing graphics (feature graphic, TV banner)
Prototypes: Quickly generate placeholder icons with text and colors
CI/CD pipelines: Automate asset generation with --format json for scripting

Interactive TUI

Launch appicons to open the interactive terminal interface:

Startup Screen (returning users)

┌──────────────────────────────────────────────────┐
│ APP ASSET GENERATOR │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ QUICK START │
│ ──────────────────────────────────────────── │
│ │
│ ▶ [N] New configuration │
│ │
│ Recent: │
│ [1] Jan 31, 19:15 - ios,android text "A" │
│ [2] Jan 30, 14:22 - web svg logo.svg │
│ [3] Jan 29, 10:00 - ios,android,web "MyApp" │
│ │
│ [H] Browse all history │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ ↑↓ Navigate │ Enter Select │ N/H/1-3 Quick │
└──────────────────────────────────────────────────┘

Config Screen

┌──────────────────────────────────────────────────┐
│ APP ASSET GENERATOR │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ ▶ App Name [MyApp ] │
│ Background Type ●くろまる Color ○しろまる Gradient ○しろまる Image │
│ Background Color [#FFFFFF ] │██│ │
│ Foreground Type ●くろまる Text ○しろまる SVG ○しろまる Image │
│ Text [A ] │
│ Font Family [Inter ] │
│ Text Color [#000000 ] │██│ │
│ Icon Scale [━━━━━━━━━●くろまる─────────] 70% │
│ Splash Scale [━━━━━●くろまる─────────────] 25% │
│ Output Path [ ] │
│ │
│ 💡 Appears in app stores and device screens │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ ↑↓ Navigate │ ←→ Options │ Enter Generate │
└──────────────────────────────────────────────────┘

History Browser

┌──────────────────────────────────────────────────┐
│ APP ASSET GENERATOR │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ HISTORY (12 entries) [Esc] │
│ ──────────────────────────────────────────── │
│ │
│ ▶ Jan 31, 19:15 ios,android text "A" │
│ Jan 30, 14:22 web svg │
│ Jan 29, 10:00 all text "M" "MyApp" │
│ Jan 28, 16:45 ios image │
│ Jan 27, 09:30 android text "X" │
│ ... showing 1-5 of 12 │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ [Enter] Load │ [n] Rename │ [d] Delete │ [Esc] │
└──────────────────────────────────────────────────┘

Preview Screen (after generation)

┌──────────────────────────────────────────────────┐
│ APP ASSET GENERATOR │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ │
│ ASSET PREVIEW ← Back [Esc] │
│ ──────────────────────────────────────────── │
│ │
│ Generated 96 assets │
│ Output: ./assets/generated_2024年01月31日_19-15-30 │
│ │
│ IOS (32 assets) │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ +26 more │
│ │ A │ │ A │ │ A │ │ A │ │ A │ │
│ └────┘ └────┘ └────┘ └────┘ └────┘ │
│ 1024 512 180 120 60 │
│ │
│ ANDROID (28 assets) │
│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ ┌────┐ +22 more │
│ │ A │ │ A │ │ A │ │ A │ │ A │ │
│ └────┘ └────┘ └────┘ └────┘ └────┘ │
│ │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ Esc Back │ Ctrl+C Exit │
└──────────────────────────────────────────────────┘

Examples

Three example outputs are included in assets/ showcasing different foreground types:

Text SVG Icon Image

Text example SVG example Image example

example_text/ example_svg/ example_image/

Text + Solid Color

appicons generate --fg-text "N" --fg-color "#FFFFFF" --bg-color "#FF6B6B"

Unicode Characters

# Japanese text with Noto Sans JP font
appicons generate --fg-text "日" --fg-font "Noto Sans JP" --bg-color "#E6D9C2"
# Curly quote (U+201C) with custom local font
appicons generate --fg-text """ --fg-font-source custom --fg-font-path ./MyFont.ttf

SVG Icon + Gradient

appicons generate --fg-type svg --fg-svg ./icon.svg \
 --bg-type gradient --bg-gradient-colors "#667eea,#764ba2"

Image + Gradient

appicons generate --fg-type image --fg-image ./logo.png \
 --bg-type gradient --bg-gradient-colors "#E0E7FF,#C7D2FE"

Features

Complete Asset Coverage: Generate 100+ assets for all platforms
- iOS: App icons (20px - 1024px), Splash screens (iPhone, iPad)
- Android: Icons, Adaptive icons (foreground + background), Splash screens
- Web: Favicons, Apple touch icons, PWA icons
- watchOS: Circular icons for Apple Watch (9 sizes from 48pt to 234pt)
- tvOS: Layered icons with parallax effect, top shelf banners
- visionOS: 3D layered icons for Vision Pro
iOS 18+ Icon Appearances: All 5 icon variants generated automatically
- Default: Standard light appearance
- Dark: Dark mode variant
- Tinted: Monochrome icons with system wallpaper tint
- Clear Light: Translucent background for light mode
- Clear Dark: Translucent background for dark mode
Android 13+ Themed Icons: Material You support
- Monochrome icons for dynamic theming
- Proper 66dp safe zone compliance
- Auto-generated for all density buckets
Apple Platform Icons:
- watchOS: 9 circular icon sizes for Apple Watch
- tvOS: Layered back/front icons for parallax effect, top shelf images
- visionOS: 3D layered icons with back/front layers for depth
Store Listing Assets:
- Play Store icon (×ばつ512)
- Feature graphic (×ばつ500)
- TV banner (×ばつ720)
- App Store icon (×ばつ1024)
Auto-Generated Config Files:
- iOS: Xcode Contents.json with all icon entries and appearances
- Android: ic_launcher.xml and ic_launcher_round.xml for adaptive icons
- Android: colors.xml for solid color backgrounds
PWA & Web Manifest (W3C Standard):
- Standard icons (purpose: "any")
- Maskable icons with 80% safe zone (purpose: "maskable")
- Monochrome icons for themed display (purpose: "monochrome")
- Auto-generated site.webmanifest with all icon entries
Flexible Backgrounds:
- Solid colors (hex)
- Linear gradients (with angle control)
- Radial gradients
- Custom images
Flexible Foregrounds:
- Text/Characters with Google Fonts (any font from fonts.google.com)
- Unicode support: CJK characters, symbols, quotation marks (e.g., U+201C ")
- Custom local fonts via --fg-font-path
- System fonts (Arial, Times New Roman, etc.)
- SVG icons with color override
- PNG/JPG images
Safe Zone Validation: Warns when scale exceeds platform-specific safe zones
- Android adaptive: 66dp of 108dp canvas (61%)
- Web maskable: 80% safe zone
- Circular icons (watchOS/visionOS): 80% diameter
Interactive TUI: OpenTUI-based terminal interface with image preview and font autocomplete
CLI Mode: Command-line interface for automation and AI agents with shell completion and dry-run preview
JSON Output: Machine-readable output for programmatic usage
Smart Validation: Typo detection with suggestions for Google Font names
Settings History: Auto-saves generation configs for easy reuse (up to 50 entries)

Comparison

Feature	appicons	app-icon	pwa-asset-generator
iOS 18 dark/tinted icons	Yes	No	No
Android 13+ monochrome	Yes	No	No
PWA maskable icons	Yes	No	Yes
Google Fonts support	Yes	No	No
Interactive TUI	Yes	No	No
Single binary install	Yes	No	No

Getting Started

# Install
curl -fsSL https://raw.githubusercontent.com/guillempuche/appicons/main/scripts/install.sh | bash
# Generate icons with letter "A" on indigo background
appicons generate --fg-text "A" --fg-color "#FFFFFF" --bg-color "#6366F1"
# Or launch interactive mode
appicons

Installation

curl -fsSL https://raw.githubusercontent.com/guillempuche/appicons/main/scripts/install.sh | bash

This installs:

Bun runtime (if not already installed)
appicons binary to ~/.appicons
Symlink to /usr/local/bin/appicons

Uninstall

curl -fsSL https://raw.githubusercontent.com/guillempuche/appicons/main/scripts/uninstall.sh | bash

Interactive Mode (Recommended)

appicons

See Interactive TUI above for screen mockups. Features:

Settings History: Configs auto-save after generation for easy reuse
Live Preview: Real-time icon preview as you configure
Font Autocomplete: Search 1,500+ Google Fonts as you type
Rename entries: Press n in history browser to name configs (e.g., "My App v2")

Command-Line Mode

Available Commands

appicons [command] [options]
Commands:
 (no command) Launch interactive OpenTUI interface (default)
 generate Generate assets from command-line options
 history Manage settings history (list, show, rename, delete)
 validate Validate configuration without generating
 list-fonts List available Google Fonts
 list-platforms Show platform specifications
 instructions Show integration instructions
 completion Output shell completion script

Generate Command

Option	Default	Description
`--name`	`MyApp`	App name for manifest
`--platforms`	`ios,android,web`	Target platforms: `ios`, `android`, `web`, `watchos`, `tvos`, `visionos`
`--types`	`icon,splash,adaptive,favicon`	Asset types: `icon`, `splash`, `adaptive`, `favicon`, `store`
`--bg-type`	`color`	Background type: `color`, `gradient`, `image`
`--bg-color`	`#FFFFFF`	Background color (hex)
`--bg-gradient-type`	`linear`	Gradient type: `linear`, `radial`
`--bg-gradient-colors`	—	Gradient colors (comma-separated hex)
`--bg-gradient-angle`	`180`	Gradient angle in degrees
`--bg-image`	—	Path to background image
`--fg-type`	`text`	Foreground type: `text`, `svg`, `image`
`--fg-text`	`"`	Text character(s) - supports unicode
`--fg-color`	`#1A1A1A`	Text/SVG color (hex)
`--fg-font`	`Playfair Display`	Font family name
`--fg-font-source`	`google`	Font source: `google`, `system`, `custom`
`--fg-font-path`	—	Path to custom font file (when source is `custom`)
`--fg-font-size`	auto	Font size in pixels (auto-calculated if omitted)
`--fg-svg`	—	Path to SVG file
`--fg-svg-color`	—	Override SVG fill color
`--fg-image`	—	Path to foreground image
`--icon-scale`	`0.7`	Icon foreground scale (0.1-1.5)
`--splash-scale`	`0.25`	Splash foreground scale (0.05-1.0)
`--favicon-scale`	`0.85`	Favicon foreground scale (0.5-1.0)
`--store-scale`	`0.5`	Store listing foreground scale (0.3-0.8)
`-o, --output`	auto	Output directory path
`--format`	`text`	Output format: `text`, `json`
`--dry-run`	`false`	Show planned files without generating
`--quiet`	`false`	Suppress output messages
`--from-history`	—	Load config from history entry ID

# Simple generation with defaults
appicons generate
# Customize text and color
appicons generate \
 --fg-text "X" \
 --fg-color "#004C6E" \
 --bg-color "#FFFFFF"
# Full configuration with Google Font
appicons generate \
 --name "MyApp" \
 --fg-text "M" \
 --fg-font "Inter" \
 --fg-font-source google \
 --fg-color "#000000" \
 --bg-color "#FFFFFF" \
 --platforms "ios,android,web"
# Gradient background
appicons generate \
 --bg-type gradient \
 --bg-gradient-colors "#667eea,#764ba2" \
 --bg-gradient-angle 135 \
 --fg-text "o" \
 --fg-color "#FFFFFF"
# SVG icon
appicons generate \
 --bg-color "#FFFFFF" \
 --fg-type svg \
 --fg-svg ./logo.svg \
 --fg-svg-color "#000000"
# Dry-run (shows config and planned files without generating)
appicons generate --dry-run
# Output: config + list of all files that would be generated
# JSON output for AI agents (works with --dry-run too)
appicons generate --format json
appicons generate --dry-run --format json
# Generate from a saved history entry
appicons generate --from-history <entry-id>
# Override specific options from history
appicons generate --from-history <entry-id> --platforms ios

History Command

Settings are automatically saved after each successful generation. View and manage your history:

# List recent history entries
appicons history
appicons history --limit 20
# Show details of a specific entry
appicons history show --id <entry-id>
# Rename an entry for easy identification
appicons history rename --id <entry-id> --name "My App v2"
# Delete an entry
appicons history delete --id <entry-id>

History is stored at ~/.appicons/history.json (max 50 entries, newest first).

Other Commands

# List available Google Fonts
appicons list-fonts
# Show platform specifications
appicons list-platforms
# Validate configuration
appicons validate --fg-font "Inter" --fg-font-source google
# Show integration instructions
appicons instructions --platforms ios,android
# Generate shell completion script
appicons completion >> ~/.bashrc # bash
appicons completion >> ~/.zshrc # zsh

Output Structure

Each generation creates 100+ assets across all platforms:

×ばつ512 │ │ ├── feature-graphic.png # ×ばつ500 │ │ └── tv-banner.png # ×ばつ720 │ └── ios/ │ └── app-store-icon.png # ×ばつ1024 └── README.md # Config & integration guide">

assets/<output-folder>/
├── ios/
│ ├── AppIcon.appiconset/
│ │ └── Contents.json # Xcode asset catalog
│ ├── icon-{20,29,40,60,76,83.5,1024}{,@2x,@3x}.png
│ ├── dark/icon-*.png # iOS 18 dark mode
│ ├── tinted/icon-*.png # iOS 18 tinted (monochrome)
│ ├── clear-light/icon-*.png # iOS 18 clear (light bg)
│ ├── clear-dark/icon-*.png # iOS 18 clear (dark bg)
│ └── splash-*.png # 13 splash screen sizes
├── android/
│ ├── mipmap-anydpi-v26/
│ │ ├── ic_launcher.xml # Adaptive icon config
│ │ └── ic_launcher_round.xml # Round icon config
│ ├── mipmap-{mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi}/
│ │ ├── ic_launcher.png
│ │ ├── ic_launcher_foreground.png
│ │ ├── ic_launcher_background.png
│ │ └── ic_launcher_monochrome.png # Android 13+ themed
│ ├── values/
│ │ └── colors.xml # Background color (if solid)
│ ├── drawable-{mdpi→xxxhdpi}/splash.png
│ └── drawable-night-{mdpi→xxxhdpi}/splash.png
├── web/
│ ├── favicon-{16,32,48}x{16,32,48}.png
│ ├── apple-touch-icon-*.png # 9 sizes (57-180px)
│ ├── icon-{192,512}x{192,512}.png # PWA (any)
│ ├── icon-maskable-*.png # PWA maskable
│ ├── icon-monochrome-*.png # PWA monochrome
│ └── site.webmanifest # W3C Web App Manifest
├── watchos/ # Apple Watch
│ ├── icon-1024.png # App Store
│ └── icon-{48,80,88,92,172,196,216,234}@2x.png
├── tvos/ # Apple TV
│ ├── icon-back.png # Background layer @1x
│ ├── icon-back@2x.png # Background layer @2x
│ ├── icon-front.png # Foreground layer @1x
│ ├── icon-front@2x.png # Foreground layer @2x
│ ├── top-shelf.png # Top shelf banner @1x
│ └── top-shelf@2x.png # Top shelf banner @2x
├── visionos/ # Vision Pro
│ ├── icon-1024.png # Main icon
│ ├── icon-back.png # Background layer
│ └── icon-front.png # Foreground layer
├── store/ # Store listing assets
│ ├── android/
│ │ ├── play-store-icon.png # ×ばつ512
│ │ ├── feature-graphic.png # ×ばつ500
│ │ └── tv-banner.png # ×ばつ720
│ └── ios/
│ └── app-store-icon.png # ×ばつ1024
└── README.md # Config & integration guide

Platform Specifications

iOS

Icons: 13 sizes from 20px to 1024px (including @2x, @3x variants)
iOS 18 Appearances: All 5 icon variants
- Default, Dark, Tinted, Clear Light, Clear Dark
- Ready for Xcode asset catalog configuration
Splash Screens: 13 sizes covering all iPhone and iPad models
Format: PNG (no transparency for default app icons)

Android

Icons: 5 density buckets (mdpi through xxxhdpi)
Adaptive Icons: Separate foreground and background layers
- Foreground: Transparent PNG with icon centered in safe zone
- Background: Color or image covering full canvas
- Monochrome: White-on-transparent for Android 13+ themed icons
Splash Screens: 5 density buckets (light and dark variants)
Format: PNG

Web

Favicons: Standard sizes (16x16, 32x32, 48x48)
Apple Touch Icons: iOS home screen icons (57px - 180px)
PWA Icons: Full W3C manifest support
- Standard icons (any): 192x192, 512x512
- Maskable icons: Safe zone aware for adaptive display
- Monochrome icons: For themed/tinted display
Web Manifest: Auto-generated site.webmanifest with all icon purposes
Format: PNG

watchOS

Icons: 9 sizes from 48pt to 234pt (all @2x) plus 1024px for App Store
Shape: Circular (system applies mask automatically)
Safe Zone: 80% diameter — keep content within inner circle
Format: PNG

tvOS

Layered Icons: Back + front layers for parallax effect
- Background layer: ×ばつ240 @1x, ×ばつ480 @2x
- Foreground layer: ×ばつ240 @1x, ×ばつ480 @2x
Top Shelf: Banner images for featured content
- Standard: ×ばつ720 @1x, ×ばつ1440 @2x
Safe Zone: Inner 80% of canvas
Parallax: System animates layers for depth effect based on remote input
Format: PNG

visionOS

Main Icon: ×ばつ1024 circular icon
Layered Icons: Back + front layers for 3D depth effect
- Background layer: ×ばつ1024
- Foreground layer: ×ばつ1024
Shape: Circular (system applies mask)
Safe Zone: 80% diameter
Format: PNG

Store Listing

Play Store Icon: ×ばつ512 (required for Google Play)
Feature Graphic: ×ばつ500 (displayed on Play Store listing)
TV Banner: ×ばつ720 (for Android TV apps)
App Store Icon: ×ばつ1024 (same as iOS icon, convenience copy)

Tips

Icon Design: Keep your foreground simple and centered. Test at small sizes (20px) to ensure visibility.
Adaptive Icons: Android crops icons to various shapes (circle, square, rounded square). The safe zone is the inner 66x66 dp (about 60% of canvas).
Splash Screens: The foreground is automatically sized to 25% of screen width/height for visibility.
Color Contrast: Ensure sufficient contrast between foreground and background (WCAG AA minimum: 4.5:1).
Font Selection:
- Serif fonts (Playfair Display, Merriweather, Lora): Editorial style
- Sans-serif fonts (Roboto, Montserrat, Inter): Modern, clean
- Display fonts (Bebas Neue, Anton, Oswald): Bold, attention-grabbing
Google Fonts: All fonts are loaded from Google Fonts API. Any font from fonts.google.com can be used.

Contributing

See CONTRIBUTING.md for development setup and guidelines.

License

MIT

Name		Name	Last commit message	Last commit date
.claude		.claude
.github/workflows		.github/workflows
assets		assets
scripts		scripts
src		src
.gitignore		.gitignore
.mcp.json		.mcp.json
.release-it.json		.release-it.json
AGENTS.md		AGENTS.md
CONTRIBUTING.md		CONTRIBUTING.md
README.md		README.md
TODO.md		TODO.md
biome.json		biome.json
bun.lock		bun.lock
completions.sh		completions.sh
flake.lock		flake.lock
flake.nix		flake.nix
lefthook.yml		lefthook.yml
package.json		package.json
syncpack.config.js		syncpack.config.js
tsconfig.json		tsconfig.json
vitest.config.ts		vitest.config.ts

Latest commit

History

Folders and files

Repository files navigation

appicons

Use Cases

Interactive TUI

Startup Screen (returning users)

Config Screen

History Browser

Preview Screen (after generation)

Examples

Text + Solid Color

Unicode Characters

SVG Icon + Gradient

Image + Gradient

Features

Comparison

Getting Started

Installation

Uninstall

Interactive Mode (Recommended)

Command-Line Mode

Available Commands

Generate Command

History Command

Other Commands

Output Structure

Platform Specifications

iOS

Android

Web

watchOS

tvOS

visionOS

Store Listing

Tips

Contributing

Related

License

About

Topics

Resources

Contributing

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages