How to pick colors for your app icon

Color is the first thing people notice about an app icon. Before they read the name or recognize the shape, the color registers. Here's how to pick colors that work.

Start with contrast

The most common mistake is low contrast between the letter and the background. A dark blue letter on a medium blue background might look fine on your monitor at 1024px, but at 48px on a phone screen it becomes a blurry mess.

Aim for a contrast ratio of at least 4.5:1 between your text and background. White text on a dark background or dark text on a bright background both work well. Middle-of-the-road combinations usually don't.

Look at what's already on the home screen

Open your phone and look at the first page of apps. You'll notice most icons cluster around blue, red, and white. Standing out means either going with an uncommon color (yellow, orange, teal, green) or going very bold with a common one.

This doesn't mean you should pick neon green just to be different. The color still needs to fit your app. But if you're choosing between two options and one is less common in the app store, that's worth considering.

Solid vs gradient backgrounds

Solid color backgrounds are simpler to get right and tend to look cleaner at small sizes. Gradients can add depth and make the icon feel more polished, but they also introduce more complexity.

If you use a gradient, keep it subtle. A shift of 20-30 degrees in hue or 10-20% in brightness is usually enough. Extreme gradients (like purple to yellow) tend to look dated and make text harder to read against the shifting background.

Linear gradients from top-left to bottom-right mimic natural light direction and usually look more natural than other angles. Radial gradients centered on the icon work well for creating a sense of depth.

Dark backgrounds

Dark backgrounds with light text are popular right now. They look good in both light and dark mode on iOS and Android, and they give the icon a premium feel. Black, dark navy, and charcoal all work well.

One thing to watch: on iOS, the home screen can have a dark wallpaper, and how your app icon looks on different devices varies more than you'd expect. A very dark icon can disappear against it. iOS adds a thin border around icons automatically in some contexts, but it's subtle. Consider using a dark color that's not quite black, like #1a1a2e or #0f172a.

Brand colors

If your app already has brand colors, use them. Consistency between the icon and the app's UI helps users recognize the connection. But check whether your brand colors actually work at icon sizes. Some brand palettes include pastels or low-contrast combinations that work in marketing materials but not in a 48px square.

It's fine to use a saturated or adjusted version of your brand color for the icon. Slack does this: their app icon colors are more saturated than their website palette.

Colors to be careful with

• Pure white backgrounds can blend into the iOS home screen in light mode. Add a very subtle gray tint or border.
• Pure black backgrounds can disappear on dark wallpapers and OLED screens.
• Neon or highly saturated colors can cause OLED color fringing and look harsh on high-brightness screens.
• Multiple colors for a single letter add complexity without clarity at small sizes. Stick to one text color.

Testing your colors

The best test is putting your icon on an actual home screen. Take a screenshot of your phone, paste your icon over an existing one in any image editor, and see how it looks in context. Does it stand out? Can you find it quickly in a grid of 24 other icons?

In the AppIcons.dev editor, you can try different background colors and gradients in real time. The color picker supports solid colors, linear gradients, and radial gradients. The favicon generator lets you see how the same design works at favicon sizes.