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 :-)