It’s often easy to generalise about aesthetics. We’ve spoken about app icon trends in the past in terms of there being three-dimensional, flat, and almost-flat icons, but this doesn’t really tell the whole story. There are many, many other ways to play with perspective and dimension using a simple design—like an app icon—and obtain some… Read more »
Flat icons and what we’ve termed “almost flat” icons are currently carrying a certain level of vogue with them in the world of software. However, that’s not to say that 3D-style icons aren’t as effective or innovative. In fact, in the current climate, if 3D icons are designed well enough, they can go above and… Read more »
Despite the recent trend towards Flat Icon design, 3D icons are here to stay and a jolly good thing too. I am all for a bit of variety, but the thought of Flat Icon design being the only way to go did concern me for a while. I am very happy to see the evolution… Read more »
Icon design is ever evolving. As new platforms embrace the use of icons, new terms and references are dreamt up and older terms fall out of favour. This glossary is an ongoing project to document the icon design lexicon. Contributions are very welcome. 16×16 Pixel Icons This icon size has its own entry here because… Read more »
The use of 3D icons is an ideal way to give your application, program or website a fresh look. Whether you are starting something new, or wanting to inject new life into an existing set of icons by sprucing them up, three-dimensionality could be the way to go whatever your theme, be it business, technology,… Read more »
creative freedomtrusted by
Quick guide to Windows Phone 8 Icons
Windows Phone pioneered the ‘Metro’ design language, the popular, iconic user interface paradigm used by thousands of apps to give end users a common basis from which to interact with their devices.
The Windows Phone design philosophy is exemplified by clean, uncluttered app screens that operate quickly, minimize typing, and surface new info automatically. Interactions happen directly with content, and visual elements have great fit and finish. You have the opportunity to use the phone for what it’s best suited for — apps for the mobile lifestyle.
Information delivery is the primary goal, not the wrapper around it. Adopting the infographic approach will help you optimize the user experience on Windows Phone.
Speak without words. Great visuals define not only how your app looks, but how it feels and comes alive through animation and motion. Your choice of color palette, icon, and artwork are just a few examples of this visual language.
All apps have their own unique identity, so explore the visual directions you can take with your app. Let the content guide the look and feel; don’t let the look dictate your content.
Standard Windows 8 Icon Sizes
Download these Icon templates for Windows Phone 8 to create pixel-perfect layouts for Windows Phone. These templates showcase many controls that are a part of the Windows Phone SDK. These additional templates are included to help designers and developers maintain a consistent look and feel across apps for system controls that developers want to mimic.
In App Assets
App Bar Buttons AppBar.psd
WVGA: 48x48px circle with 26x26px icon
Applies to: Windows Phone 8 | Windows Phone OS 7.1
The default app bar is a row of icon buttons and an ellipsis along the bottom of the phone’s screen. Use icon buttons for the primary, most common actions in your app. Some actions are difficult to convey clearly with an icon. If this is the case, consider using a menu item instead.
The following illustration shows an example of an app bar icons.
Icon button best practices:
Icon images should be 48×48 pixels in size. The foreground graphic for the button should fit in a 26×26 area in the center of the image so that it does not overlap the circle.
The circle displayed on each button is drawn by the app bar and should not be included in the source image.
Icon images should use a white foreground on a transparent background using an alpha channel. Windows Phone automatically colors the icon according to the theme selection (light or dark), and colored icons can cause this effect to display unpredictably.
Do not create a button that navigates backward in the page stack. All Windows Phones have a dedicated hardware Back button that should be used for backward navigation.
Keep Icon Button labels as short as possible. If the language of the device is English, labels appear on only one line, and are truncated if necessary.
Choose icons that have clear meanings when the phone is rotated. When the phone is in landscape orientation, the app bar appears on the side of the screen vertically. The icon buttons are rotated so that they appear upright to the user. It is possible for icon meanings to be confused when this occurs, particularly if two of the icons are mirror images of each other such as << and >>.
Want a new Windows 8 or 10 tile icon?
We can bring your software up to date with clean, contemporary Windows tile icons
Application Icon ApplicationIcon.psdUsed for all resolutions: 99x99px | 14px padding
The following illustration shows an example of application icons.
Applies to: Windows Phone 8 only
The iconic template displays a small image in the center of the Tile, and incorporates Windows Phone design principles.
The following image describes sizing information for the iconic Tile template.
To ensure proper scalability across resolutions, keep these points in mind:
The Iconic Tile template requires that you supply two images; they are used as follows:
This image is used when the tile is resized to small, or when the tile is wide and has some content strings on it.
The maximum size of this image is 110 pixels by 110 pixels, but the recommended “best fit” dimensions are 70 pixels by 110 pixels.
This image is used when the tile is resized to medium, or when the tile is wide and has no content strings on it and may or may not have a count.
The maximum size of this image is 202 pixels by 202 pixels, but the recommended “best fit” dimensions are 130 pixels by 202 pixels.
Always pad vertically with a transparent buffer to the full size of the asset you’re creating. If the white pixels in your medium or large image are only 130 pixels high, pad the top and bottom of the icon out to 202 pixels high with a transparent buffer. Remember to keep the image centered.
Always crop tight on the horizontal plane – that is, if your image is 130 pixels wide, crop it there and don’t pad the horizontal plane with a transparent buffer. Doing so will push the count too far away from the image.
Lay out your large icon image first and, if possible, scale it down for the small icon image. For example, if you have a Tile that’s 130 pixels wide by 202 pixels tall, set the small aspect ratio to 110 pixels tall and approximately 70 pixels wide.
The flip Tile template flips from front to back. Because the Tile flips at a random interval, we recommend you put your most important info on the front and lighter info on the back.
The cycle Tile template cycles through between one and nine images.
Small Flip/Cycle Tile FlipCycleTileSmall.psd
Used for all resolutions: 159x159px | 43px padding
Medium Flip/Cycle Tile FlipCycleTileMedium.psd
Used for all resolutions: 336x336px | 101px padding
Large Flip/Cycle Tile FlipCycleTileWide.psd
Used for all resolutions: 691×336 | 279x101px padding
Lock Icon LockIcon.psd
Used for all resolutions: 38x38px
Create a 38 x 38 pixel PNG image that will identify your app on the lock screen. The image must contain only white pixels plus some level of transparency.
The lock screen’s app icon, count, and text are pulled directly from the app’s default Tile.
WVGA: 173x173px Lens.Screen-WVGA.psd
720p: 259x259px Lens.Screen-720p.psd
WXGA: 277x277px Lens.Screen-WXGA.psd
Applies to: Windows Phone 8 only
In Windows Phone 8, you can create a camera app called a lens. A lens opens from the built-in camera app and launches right into a viewfinder experience to help the user capture the moment. But not all lenses stop at capturing photos. Some lenses, called rich media lenses, provide a unique experience for viewing or editing photography. Other lenses use the camera as a gateway to a different experience. For example, a bar code reader lens might use the camera to scan a bar code and then display related data from the local folder.
The Lens button opens the lens picker, in which a user can choose a lens for the camera. The lens picker displays a list of apps in the Windows Phone Store that support lenses. The following figure shows the lens picker, with some example lenses.