Icons and indicators

Find sizes and best practices for icons and indicators.

Icons and indicators are pictorial representations of objects. They can visually identify your application and also convey meaning to users quickly.

To find the meaning of a specific icon, see the Icon Guide that matches your version of BlackBerry Device Software.

Best practice: Designing icons and indicators

  • Use application icons and simple graphics that clearly represent the application, action, or component.
  • Use imagery that users are likely to recognize. For example, for an email message icon, users are more likely to recognize a postage stamp than a rural mailbox. Be aware that graphics can have different meanings in different cultures.
  • Use a similar perspective to existing application icons. Align your application icon with other application icons.
  • Limit the number of colors in your color palette.
  • Use colors consistently.
  • Avoid text and numbers in icons and graphics because they require localization.

Dimensions for application icons on BlackBerry devices

BlackBerry device model

Application icon size

BlackBerry 9620 smartphone

68 x 68 pixels

BlackBerry Bold 9790 smartphone

68 x 68 pixels

BlackBerry Bold 9900 smartphone

BlackBerry Bold 9930 smartphone

92 x 92 pixels

BlackBerry Curve 9220 smartphone

BlackBerry Curve 9310 smartphone

BlackBerry Curve 9320 smartphone

46 x 46 pixels

BlackBerry Curve 9350 smartphone

BlackBerry Curve 9360 smartphone

BlackBerry Curve 9380 smartphone

68 x 68 pixels

BlackBerry Torch 9810 smartphone

BlackBerry Torch 9850 smartphone

BlackBerry Torch 9860 smartphone

92 x 92 pixels

To see the dimensions for application icons in other versions of BlackBerry Device Software, go to Designing and developing for different BlackBerry devices and software versions.

Dimensions for indicators on BlackBerry devices

The banner appears at the top of the Home screen. Title bars appear at the top of most application screens.

BlackBerry device model

Banner indicator size

Title bar indicator size

Allow two pixels of padding on the top, left, and right side of the indicator.

BlackBerry 9620 smartphone

25 x 22 pixels

19 x 19 pixels

BlackBerry Bold 9790 smartphone

25 x 22 pixels

19 x 19 pixels

BlackBerry Bold 9900 smartphone

BlackBerry Bold 9930 smartphone

33 x 29 pixels

25 x 25 pixels

BlackBerry Curve 9220 smartphone

BlackBerry Curve 9310 smartphone

BlackBerry Curve 9320 smartphone

17 x 15 pixels

13 x 13 pixels

BlackBerry Curve 9350 smartphone

BlackBerry Curve 9360 smartphone

BlackBerry Curve 9380 smartphone

25 x 22 pixels

19 x 19 pixels

BlackBerry Torch 9810 smartphone

BlackBerry Torch 9850 smartphone

BlackBerry Torch 9860 smartphone

33 x 29 pixels

25 x 25 pixels

BlackBerry 7 theme icons and indicators

The BlackBerry 7 theme icons use a simple line form that maintains a 2-D orthographic view. In BlackBerry 7, the icons retain the silhouette of the BlackBerry 6 theme icons. What's new is the beautiful, realistic lighting as well as more vibrant, eye-catching colors and a greater sense of depth to the icons.


This screens shows some of the BlackBerry 7 application icons.

Indicators are 2-D objects that appear straight on. You can include indicators in the banner, title bar, or in applications (for example, message indicators in a message list).

To find the meaning of a specific icon, see the Icon Guide that matches your version of BlackBerry Device Software.

Best practice: Designing icons and indicators for the BlackBerry 7 theme

Icons maintain the same corners, form, and weight as their counterparts in BlackBerry 6.

Consider the following guidelines:

  • Create 24-bit .png files.
  • Create icons that are consistent with the default icons in size, weight, and centering.
  • Add shadow, lighting, and texture to define your icon.
  • Apply an outer glow and a drop shadow to make sure that the icons appear clearly on any background.
  • For application icons, create an icon file that does not exceed the recommended size for each BlackBerry device model. This size includes the canvas. Keep the weight of the object inside an area that is 72% of the canvas size, although smaller elements can extend outside this area. The maximum size allowed for the object is 81% of the canvas size. If the object within the canvas exceeds this size, it could be scaled down and upset the line weights and gradients.

Materials

The icons in BlackBerry 7 draw inspiration from premium materials and create a high-quality look and feel to the icons. Use the look of one or a combination of the following materials to align with the design and aesthetics for BlackBerry 7.

Material

Example

Guidelines

Leather

This icon is an example of leather as a premium material.

  • Always add a texture to the icon.
  • If you use stitching, it should be clear and have a high contrast with the background material.
  • If you apply the color black, use the charcoal color range so that the icon is visible on a black or white screen.

Glass

This icon is an example of glass as a premium material.

  • Dark glass should have a frame.
  • If you apply color, make sure that it is smoky (not candy) to maintain the premium finish.

Metal

This icon is an example of metal as a premium material.

  • Apply a texture (for example, brushed metal) to an icon where appropriate.
  • If metal joins another material, add edges and highlights to provide depth and to make the icon look more 3-D.
  • Avoid rendering icons completely in gray. These icons can appear to be unavailable.

Paper

This icon is an example of paper as a premium material.

  • Add details such as lines or holes to make the icon more realistic, to provide a better sense of scale, and to differentiate among types of paper.
  • Make shadows sharp for folds and diffuse for curls.
  • Use color sparingly. In some cases, however, you might want to use color to represent the actual object (for example, yellow for a memo).

Light

This icon is an example of light as a premium material.

  • Use light to represent intangible elements such as sounds, data flow, or connection to a wireless network. Always combine light with another material.
  • Make sure that light is shown as curved. Allow the edges of the arcs to fade out. The edges should not look solid.
  • Make sure that objects paired with light reflect colors from the light source on their surface.
  • Be aware of the effect that color has when using light to represent sound. For example, red arcs might appear loud.

Combinations

Example

Metal and paper

This icon is an example of metal and paper used in combination.

Metal and glass

This icon is an example of metal and glass used in combination.

Metal, glass, and leather

This icon is an example of metal, glass, and leather used in combination.

Light and metal

This icon is an example of light and metal used in combination.

Glass and paper

This icon is an example of glass and paper used in combination.


Was this information helpful? Send us your comments.