In-app icons

The design of your app's icons is especially important because they are the main ways that your user triggers your app's most essential features. Check out the types of icons that you can create, how to build and style your icons, and tips and tricks for getting the most from the icons in your application.

If you want your app to have a look that’s consistent with BlackBerry 10, we've made it simple for you. You can download the BlackBerry icons that we designed for an action menu or action bar:

BlackBerry 10 Icons

Themes

Some BlackBerry devices feature an OLED display that uses a dark version of the standard BlackBerry 10 theme. Here are examples of in-app icons used in the light and dark themes:

Light theme

In-app icons in the light theme.

Dark theme

In-app icons in the dark theme.

Creating icons

The process below describes the main steps you can follow to create your icons.

Step 1

Find an appropriate metaphor for the function or physical object that the icon should represent. Try out different variations and pick the one that's easiest to recognize.

Step 2

Create the icon shapes using the information in Metaphors. Use a vector application (such as Adobe Illustrator) and apply the information from Building blocks.

Note where your icon appears in the UI and set up the artboard in your design application accordingly. Use pixel units and make sure you use pixel snapping.

Step 3

Import the shape to a pixel application (such as Adobe Photoshop) and keep it as a shape layer. Use snapping and make sure that straight edges are sharp and aligned. If you don't use snapping, nudge the shape points to avoid blurry edges.

Make sure that you set the canvas to the correct width and height.

Apply the treatment rules from the Building blocks topic and save the image as PNG-24 with transparency.

Step 4

Test the icon with other icons, comparing the weight and style.

Put the icon on a BlackBerry device and test it in context.



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus