App Icon Design Guide

So you want to update your agency’s policyholder mobile app with a custom icon? Great! These design guidelines can help make your icon look its best.

If you are looking to create a custom app icon for your agency’s policyholder app, this simple guide based on Android & Apple’s developer guidelines can aid you in the design process.

App Icon Dimensions

Opt for simplicity.
Simple icons tend to be easier for people to understand and recognize.

Include text only when it’s an essential part of your experience or brand.
Text in icons is often too small to read easily, and text can often make an icon appear cluttered.

Avoid using the icon itself to promote your app/brand.
Do not use text or graphic elements in the icon to indicate ranking, promote deals/sales, or incentivize downloads.

Choose graphic images over photos.
Photos are full of details that don’t work well when viewed at small sizes. Instead of using a photo, create a graphic representation of the content that emphasizes features you want people to notice.

Use drop shadows and other stylistic elements sparingly.
Apple and Google will automatically add drop shadows or similar styling to the icon itself. Use of these elements within the graphic can be incongruous or redundant.

Don’t use replicas of Apple or Android hardware products.
Apple and Android products and logos are copyrighted and can’t be reproduced in your app icons.

Avoid rounding the corners of the final image to be used. Fill the space.
Don’t submit an image with rounded corners, or contained in a circle that is not a part of the original logo, or other framing techniques. On most platforms, the system automatically adjusts icon corners/framing to match the platform’s aesthetic.

Don’t force your logo to fill the asset space.
For a “contained” logo (such as a symbol-based logo), don’t force the border of the logo right to the edges of the asset**.** Centering and reducing logo size, so it is “floating in space” is often the best presentation for a contained logo.

Design your icon as a full-bleed square image.
For example, if you logo contains a white symbol on a blue circle, fill the entirety of the background with the same blue of the circle to create a “full-bleed” square graphic (the image goes to the edges of the asset).

For illustrated artwork, avoid scaling down the image.
On the flip side, illustrated artwork (such as a full color square graphic) often works well as a “full-bleed” graphic (the image goes right to the edges of the asset). For illustrated artwork, utilize the full asset space so your artwork occupies the entire icon!