Iconic Tile template design guidelines for Windows Phone

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

In this topic, we’ll cover the iconic Tile template in greater detail.

This topic contains the following sections.

• Iconic Tile design guidelines
• Scaling guidelines for iconic Tiles
• Iconic Tile character count info
• Creating and updating an iconic Tile

Iconic Tile design guidelines

The following image describes sizing information for the iconic Tile template.

For more design resources, see Icon templates for Windows Phone 8.

Scaling guidelines for iconic Tiles

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:

  • SmallIconImage:

    • 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.

  • IconImage:

    • 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.

Iconic Tile character count info

All character counts are approximations because Segoe WP isn’t a fixed-width font. No lines wrap on their own; you’ll have to program your own line breaks. However, it’s important to note that we encourage character truncation as it reflects the modern style of Windows Phone.

If you’re creating a wide iconic Tile, consider having different content for each line. For instance, let’s say your Tile is for an email app. WideContent1 should convey who the email is from. WideContent2 should probably be the subject of the email. WideContent3 is probably the first line of the email message and will most likely run off the Tile.

For more info about making great looking Tiles, see Tile design guidelines for Windows Phone.

Creating and updating an iconic Tile

For more info about creating and updating iconic Tiles, see Iconic Tile template for Windows Phone 8.