When using icons, you just think of a general colorful image that you have just found on Google. It might not be easy as you think, when you want to include icon in the application bar of your windows phone 7 app. Being from Microsoft, Windows phone 7 puts its own restrictions on using icons, and no they are not limited to just size.

Heres what msdn article Application Bar Best Practices for Windows Phone puts it

The following items apply to the Icon Buttons displayed by the Application Bar

  • Icon images should use a white foreground on a transparent background using an alpha channel. The Application Bar will colorize the icon according to the current style settings and colored icons can cause this effect to display unpredictably.
  • The circle displayed on each Icon Button is drawn by the Application Bar and should not be included in the source image.
  • Icon images should be 48 x 48 pixels in size. The white foreground graphic for the button should fit in a 26 x 26 area square in the center of the image so that it does not overlap the circle.
  • Do not use an Icon Button for a Back button that navigates backwards in the page stack. All Windows Phones are required to have a dedicated hardware Back button that should always be used for backward navigation.
  • Use Icon Buttons for the primary, most-used actions in your menu. Some actions are difficult to convey clearly with an icon. If this is the case, consider using a Menu Item instead.
  • Choose icons that have clear meanings when the Application Bar is rotated. The Application Bar automatically handles changes in screen orientation. When the device is in a landscape orientation, the menu is displayed vertically on the side of the screen. The icon buttons are rotated so that they appear upright to the user, but the order of the icons in the list is not changed. It is possible for icon meanings to be confused when this occurs, particularly if two of the icons are mirror images of each other along the Y axis.

In short, you need to use icons which have the icon shape in white with a transparent background and having size of 48 x 48 pixels.

By installing Windows Phone Developer Tools, various icons are installed with it. You can find them at one of the following locations:

  • C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons\dark
  • C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons\dark

Here are some icons from that pack:

appbar.feature.camera.rest appbar.feature.email.rest appbar.feature.search.rest appbar.feature.settings.rest appbar.feature.video.rest appbar.folder.rest appbar.minus.rest appbar.new.rest appbar.next.rest appbar.questionmark.rest appbar.refresh.rest appbar.save.rest appbar.share.rest appbar.stop.rest appbar.sync.rest appbar.transport.ff.rest appbar.transport.pause.rest appbar.transport.play.rest appbar.transport.rew.rest appbar.upload.rest appbar.add.rest appbar.back.rest appbar.basecircle.rest appbar.cancel.rest appbar.check.rest appbar.close.rest appbar.delete.rest appbar.download.rest appbar.edit.rest appbar.favs.addto.rest appbar.favs.rest

Related Links


One thought on “Using Icons in Windows Phone 7 App

Share your thoughts

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s