Windows Phone 7 PIN Icon

Question

I've been looking everywhere for the pin icon to use when adding secondary tile functionality to the application bar.

All demos I have seen, seem to use a common pin icon in the application bar to represent creating a secondary tile on the start screen.

I thought the icon would be available in C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons but I cannot find it here or anywhere else.

Does anybody know where I can find this icon?

Answer 1

MetroStation and the icons at CESPage are great and mostly answer this question (provide a source of the "pushpin" icon), but there are a couple of small issues to sort out before you can use them in your Windows Phone app, at least if you want to follow the SDK standards...

1) The application bar icon size is a 48x48 PNG but the MetroStation PNG folder has icons with dimensions of 256x256. So goto the ICO folder, open it in an icon editor then export the 48x48x256 sized/coloured icon from within (it's a group/multi-sized icon file).

2) The application bar standard (assuming we follow the 7.5 SDK "way") is to NOT have the base circle included in the icon. The SDK documentation tells us that the system draws the circle around it when used on the app bar, and they provide the appbar.basecircle.rest.png which you can overlay whenever you want to use the same core icons outside the app bar. So it's best to leave out the circle for flexibility and to "go with the flow". Also there could also be some overlay issues when the system attempts to draw another circle on top of the one already in your icon.

Here are a set of "pushpin" icons ready to use (light and dark) in SDK format:

Dark theme (white) "icon" (PNG) is here --> Light theme (black) "icon" (PNG) is here -->

Hope that saves a bit of time for people. Thanks to MetroStation for the source icons!

2012.10.03 - UPDATE: I just found this fantastic and royalty free icon pack: http://modernuiicons.com/ Not only do they have probably all the icons you ever need, but they are in the correct format without any base circle, the filenames follow the SDK convention and the Expression Design files are there too!

Here are their versions, most useful is the complement to the "pin to start", the "unpin from start"...

dark.appbar.pin.png -->

dark.appbar.pin.remove.png -->

dark.appbar.base.png -->

light.appbar.pin.png -->

light.appbar.pin.remove.png -->

light.appbar.base.png -->

Now that should be everything you need regarding pin icons :-)

Answer 2

You can download the Pin icon from here http://cespage.com/silverlight/appbar.html if you want (full disclosure: this is my website) is the official one from the Metro design document. But the MetroStation one has a lot in there so you'll find more useful icons than I have!

Answer 3

There is a collection of free Metro themed icons available at http://yankoa.deviantart.com/art/MetroStation-183210118. You will find a Pin icon under the Others folder. The icons are available as PNG and ICO file formats or you can download the full PSD file as well.