Icon design follows platform guidelines
Why it matters
An icon that violates platform visual rules isn't just aesthetically off — it signals to App Store and Play Store reviewers that the app is unpolished and may trigger manual scrutiny. On iOS, pre-rounding corners before export causes a double-rounding artifact: the OS clips the icon again with its squircle mask, creating visible banding on every home screen. On Android, icons with excessive fine detail or thin strokes become unrecognizable at mdpi (48×48), the density shipped on entry-level devices that still make up a significant share of installs in growth markets. Apple's Human Interface Guidelines (apple-hig-app-icons) explicitly call out these failure modes as grounds for rejection. A visually degraded icon undercuts store conversion rates before users open the listing.
Severity rationale
High because a non-compliant icon design causes double-rounding artifacts on iOS and illegibility on low-density Android displays, directly harming store conversion and triggering reviewer flags.
Remediation
Fix iOS icons by removing any pre-applied corner rounding from the source file — export a sharp-cornered square and let iOS apply its squircle mask. For Android, verify the icon reads clearly at 48×48 by exporting a test thumbnail.
// app.json — reference a clean, non-pre-rounded source
{
"expo": {
"icon": "./assets/icon.png"
}
}
Design rules: keep the focal element within 80% of the canvas (iOS safe area), use solid fills or bold shapes with stroke weights ≥4px at 1024×1024 scale, and verify the icon at 48×48 and 64×64 test sizes before exporting. Use Figma or Sketch's export preset to confirm no rounding is baked in.
Detection
- ID:
icon-design-compliant - Severity:
high - What to look for: If you can inspect the icon image, check for compliance. Count all icon file references found in the project configuration. iOS icons should not have rounded corners (iOS applies them automatically), should use solid colors or simple shapes, and be opaque (no transparency issues). Android icons should be solid and recognizable at small sizes. Look for oversized gradients, very thin lines, or complex details that may not render at thumbnail size.
- Pass criteria: Icon design appears appropriate for mobile platforms — no obvious design issues, at least 80% of the icon canvas uses solid or high-contrast elements, and the design is visible at small sizes (48x48 minimum). Before evaluating, extract and quote the icon file path found in
app.jsonto confirm it exists. - Fail criteria: Icon has design issues: iOS icon has pre-rounded corners (will show double rounding), icon is too complex to be recognizable at 48x48, very thin lines unlikely to survive scaling, or insufficient contrast. Do NOT pass when the icon file cannot be located at the referenced path.
- Skip (N/A) when: Icon file cannot be inspected or analyzed.
- Detail on fail:
"iOS icon appears to have pre-rounded corners — iOS will apply rounding automatically, resulting in double-rounded appearance"or"Icon is too complex with thin lines that won't render well at small densities (mdpi 48x48)" - Remediation: Mobile app icons must remain recognizable at thumbnail sizes (48x48 for Android, 29x29 for iOS app switcher). Design guidelines:
- iOS: Never pre-round corners. Keep the design within safe area (80% of canvas). Use solid colors or simple, bold shapes.
- Android: Design within a safe circle (60% of canvas) so icons remain recognizable if rounded by manufacturer. Avoid very thin lines.
- Test your icon at 48x48 and 64x64 sizes to ensure it's still recognizable
- In app.json, reference a properly designed icon:
"icon": "./assets/icon.png"
External references
- external · apple-hig-app-icons — Apple Human Interface Guidelines — App Icons
- external · google-play-icon-specs — Google Play — App icon design specifications
Taxons
History
- 2026-04-18·v1.0.0·Initial import from mobile-store-readiness·automated