Mobile App Icon Creation
Icons in a mobile application are not mere decoration. They are functional elements of navigation and user communication. A poorly designed tab bar icon leads to users who don't understand where to tap. An app icon with incorrect dimensions results in App Store rejection at submission.
App Icon: Technical Platform Requirements
App Store requires a single 1024×1024px image in PNG without alpha channel. Xcode generates remaining sizes through Asset Catalog — AppIcon.appiconset. In practice, before iOS 14 you needed 20+ sizes, now Xcode 15+ accepts Single Size and performs scaling automatically. We still verify the result on physical devices though: the scaling algorithm sometimes produces blurry edges at small sizes.
Google Play: 512×512px PNG for the app page plus adaptive icon for the launcher. Adaptive icon is two layers: foreground (108×108dp, content zone 72×72dp) and background. Android 13+ supports monochromatic icon (third layer). Without an adaptive icon on Android 8+, the launcher may crop the icon into a circle or square, and the logo ends up clipped.
Interface Icons: SF Symbols vs Custom
On iOS in 2024, SF Symbols became the default — a system library of 5000+ icons supporting all font weights (ultralight → black), multicolor, and animation (iOS 17+). If the design is built on SF Symbols, development gets it for free: scaling, theming, accessibility. Custom icons are needed only where SF Symbols doesn't cover.
On Android, the equivalent is Material Symbols (formerly Material Icons). Same principles: variable font, weight and fill as parameters, not separate files.
When custom is necessary: branded icons, domain-specific ones (finance, medicine, e-commerce with non-standard categories), icons with unique style that diverges from the system.
Export Formats for Developers
- iOS/SwiftUI: PDF vector in Asset Catalog with
Scales: Single Scale,Render As: Template Imagefor monochrome icons orOriginalfor colored ones - Android: Vector Drawable XML (converted from SVG via Android Studio
File → New → Vector Asset) - React Native: SVG via
react-native-svg+ transformation via SVGR into components - Flutter: SVG via
flutter_svg2.x package, or conversion to flutterIconviaFlutterIcon.com
SVG should be "clean": no extra groups, no transforms on root element, no embedded bitmap. We verify in Figma before export: Outline Stroke on all strokes, Flatten on complex boolean operations.
Icon Set for Application
Typical set for average complexity application: 30–80 icons. Tab bar (4–5 pieces), toolbar actions (8–15), content type/category icons (10–30), system icons (close, back, share, edit, delete).
All icons are drawn in one grid (24×24 or 28×28pt) with equal visual weight — optical alignment, not mathematical. A circular icon should be slightly larger than a square one of the same size to look equal.
Timeline: 2–3 days for a complete icon set for an average application. Cost is calculated individually.







