App Icons

Every app should have a simple, yet memorable, icon that attracts attention in both the Marketplace and the App Launch of the console. The app icon is the first opportunity to communicate, at a glance, your app’s purpose.

app icon ≠ logo They are not the same.

210210

Examples of simple app icons

A successful icon generally adheres to these guidelines:

  • Embrace simplicity: Find a single element that captures the essence of your app and express that element in a simple, unique shape. Add details cautiously. If an icon’s content or shape is overly complex, the details can be hard to discern, especially at smaller sizes.

  • Provide a single focal point: Design an icon with a single, central point that clearly identifies your app.

  • Use or design a recognizable icon: People shouldn’t have to analyze the icon to figure out what it represents. For example, a messaging app should use a chat bubble icon, which is universally associated with text-based, digital messages. Take time to find or create an icon that represents the app’s purpose.

  • Keep the background simple: Also, ensure your icon is opaque. Do not clutter the background. Give it a simple background. You also should not fill the entire icon area with content.

  • Minimal to no text: Use words only when essential (e.g. part of a logo). An app’s name appears below its icon on the app launch page.

  • No photos, screenshots, or interface elements: Photographic details can be very hard to see at small sizes. Screenshots are too complex for an app icon and don’t generally help communicate your app’s purpose. Interface elements in an icon are misleading and confusing.

  • Keep icon corners square: The platform applies CSS (or a mask) that rounds icon corners automatically.

  • See this article for further app icon design guidance.


Did this page help you?