The first time I noticed the problem was a support email. A user wrote that "the icon glows too brightly when my phone is in dark mode" — and once I looked, my icon really did sit there shouting in full color while the system apps blended quietly into the dark wallpaper. The same thing happens when iOS users switch to the tinted home screen: stock apps shift to the chosen accent color, and unprepared icons just... don't.
iOS 18 and Android 13+ both let users theme their home screens, and apps that ship the right asset variants automatically participate. For a Rork-generated project this is well within reach. You add a few PNGs and edit roughly ten lines of app.json. That's the whole change.
This article walks through the exact path I followed across several of my own apps — what assets to prepare, how to wire them into the Expo config Rork uses under the hood, and what to check after upload before the next build heads to review.
What "supporting themed icons" actually buys you
iOS 18 and Android 13+ recognize three icon variants:
- Light — the classic full-color icon you've always shipped
- Dark — a tone-adjusted version designed to read clearly on dark wallpapers
- Tinted (iOS) / Themed (Android) — a monochrome icon that the system stains with the user's chosen accent color
If you don't ship dedicated dark and tinted assets, the system fills in the gap by overlaying your light icon. That works passably for icons designed on darker backgrounds, but icons with thin graphics on bright fields tend to vanish into the auto-overlay. Anything optimized for App Store screenshots will probably look weakest in tinted mode.
After I added themed variants to my own apps, I saw a steady trickle of "the icon looks clean now" comments in reviews. Direct revenue impact is hard to attribute, but for an hour of asset work, the first-impression payoff is unusually high.
Preparing the three assets
For both platforms you'll end up shipping three 1024×1024 PNGs:
- iOS Light — full color, opaque background. This is your existing icon
- iOS Dark — full color, opaque background, tuned for dark wallpapers. Don't simply invert the light version — re-balance hues so the icon reads cleanly against true black
- iOS Tinted / Android Monochrome — grayscale with alpha, transparent background
The tinted/monochrome version is where most people get stuck. Apple's guidance is to express your icon as a luminance silhouette — no color, just light. The recipe I use is:
- Strip the light icon down to its primary graphic and convert to grayscale
- Remap the brightness range to white-through-mid-gray (avoid pure black — it disappears under tint)
- Knock the background fully transparent
- Preview against several tint colors in Apple's tooling to confirm legibility
If your logo relies on subtle gradients, fine details often collapse during the conversion. For one of my apps I had to thicken the strokes slightly in the tinted variant to keep the silhouette readable. If you want a broader take on icon design rules, Designing App Icons That Pass App Store and Google Play Review with AI is worth reading alongside this piece.
Wiring the icons into your Rork project
Rork generates Expo-managed projects, which means you don't need to touch the native Asset Catalog directly — everything goes through app.json (or app.config.js). On Expo SDK 52 and later, this configuration registers all three iOS variants plus the Android monochrome icon:
{
"expo": {
"name": "MyRorkApp",
"icon": "./assets/icons/icon-light.png",
"ios": {
"icon": {
"light": "./assets/icons/icon-light.png",
"dark": "./assets/icons/icon-dark.png",
"tinted": "./assets/icons/icon-tinted.png"
},
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/icons/icon-light.png",
"monochromeImage": "./assets/icons/icon-monochrome.png",
"backgroundColor": "#FFFFFF"
}
}
}
}Two details matter. First, the iOS icon field needs to be an object, not a string. The legacy form (a single path) silently ignores everything except light. Second, don't reuse foregroundImage as monochromeImage — when Android themes it, the colors invert and the silhouette becomes unreadable. Use a separate, alpha-only PNG.
After updating the config, run npx expo prebuild --clean and produce a fresh binary through EAS Build or Rork's build menu. OTA updates won't pick this up — themed icons require a new store binary. If you're sorting out an OTA strategy in parallel, Shipping OTA Updates from a Rork App with EAS Update covers that side of the workflow.
Verifying on device — and the cache trap
Once a new build is on a device, walk through these checks:
- iOS 18 device: Settings → Home Screen & App Library → switch between Light / Dark / Tinted and inspect each variant
- Android 13+ device: Long-press the icon → enable Themed icons → swap your wallpaper accent and confirm the icon stays readable
- Simulators: iOS Simulator only gained dark/tinted preview support in 17.4. Older simulators silently fall back to the light icon, which is misleading
If your old icon keeps appearing after the new build is installed, the usual culprit is the iOS device-side icon cache holding onto the previous binary. Deleting and reinstalling sometimes isn't enough; what reliably works for me is rebooting the device. The fuller treatment of icon caching issues lives in Fixing Stale App Icons That Don't Refresh in a Rork Build.
On the App Store Connect side, the "Light", "Dark", and "Tinted" thumbnails surface automatically once your archive uploads. If only one appears, almost every time the issue is assets that aren't exactly 1024×1024 or a tinted PNG that still has an opaque background instead of an alpha channel. Re-export and re-upload — there's no toggle to flip in App Store Connect itself.
For coordinating themed icons with in-app dark mode, Implementing Dark Mode and Color Themes in Rork Max covers the UI side and pairs well with this work.
A short note on automating the asset pipeline
After doing this manually for the third app, I built a small script around sharp to generate the dark and tinted PNGs from the light master. The dark variant is mostly a curve adjustment plus a subtle background tone shift; the tinted variant is the grayscale pass described above. It is not a fully hands-off pipeline — every icon still needs a final eye pass — but going from "open Photoshop, export three times" to "run one script, then nudge the tinted version" cut the per-app effort from twenty minutes to about five.
If you publish more than two or three apps a year, this kind of automation is worth setting up early. The same script can also drop the assets into the right path under assets/icons/, which is one fewer place where a typo can break the build. For Rork users specifically, the win is that you can keep the master icon checked into the same place Rork pulls from, and regenerate variants any time the brand mark changes without re-touching Rork itself.
A practical detail worth knowing: Apple briefly changed the recommended dark-icon background luminance during the iOS 18 beta cycle, and some early dark assets that looked great in beta now appear slightly washed out on shipping iOS 18. If you generated dark variants more than six months ago, it is worth re-checking them on a current device — the cost is low and the inconsistency is genuinely visible.
Going deeper
Where to go from here
Themed icon work is one of those tasks where you don't write any code, but the polish is visible the moment a user opens their phone. If you already have a published app, my suggestion is to ship a single dark variant in the next routine update — it usually only takes ten minutes of image processing on your existing light icon, and the upgrade in first impressions is real.
For brand-new Rork projects, prepare all three variants before your first store binary. Doing it up front avoids the cache headaches that come from swapping icons mid-flight, and it locks in a more confident first impression from launch day. Icons decide what users feel about your app in the first second of seeing it — that's worth a small upfront investment.