codefoster | Windows 8 App Bar Icons (from Segoe UI)
Jeremy Foster
@codefoster

Windows 8 App Bar Icons (from Segoe UI)

by Jeremy Foster 18. August 2012 23:04

UPDATE: since writing this I've found this MSDN article that I think has more information than my post. Hope that's helpful.

This is a reference post. Come back when you, like me, forget which icons are available to use on your application bar in your Windows 8 app. A larger version is attached here: AppBarIcons.jpg (223.22 kb).

If you define your app bar imperatively (in JavaScript), then you would simply pass the name of the icon from this graphic in as the icon option like so…

new WinJS.UI.AppBarCommand({..., icon:'bookmarks', ...})

Here’s the chart for those with young eyes :)

AppBarIcons

Tags: , , , , , , , , , , , , , , , , , , , , , , ,

Windows 8

Comments (6) -

vincent
vincent New Zealand
9/18/2012 8:13:48 PM #

THANK YOU

Reply

bz
bz United States
11/21/2012 6:23:02 AM #

Curious if you know why there is no "down" icon?  e.g. I want to let user prioritize items I would want to use "up" and "down" arrow icons. There is "left", "up" and "right".

P.S. Love the blog, thanks for all your work.

Reply

Jeremy Foster
Jeremy Foster United States
11/21/2012 8:36:23 AM #

I don't know why there's not a down icon. I suppose it was either prioritized out or never considered in the first place. There's a very thorough article at aka.ms/customicons that includes instructions on creating a custom icon. I haven't actually tried it yet, but it looks simple enough.

Reply

bz
bz United States
11/25/2012 10:17:48 AM #

Thanks Jeremy, after thinking about it for a bit, I ended up using a css transform to rotate the up arrow image to create a down image Smile

.mypage .rotate180 .win-commandimage {
  transform: rotate(180deg);
}

Seems to work pretty well and no need to create an image w/ my elite paint.net skills (which is to say, I don't have any...)

Reply

Jeremy Foster
Jeremy Foster United States
11/30/2012 2:26:07 PM #

Perfecto.

Reply

jeremy simmons
jeremy simmons United States
12/11/2012 11:09:34 AM #

the official list of names is here: Segoe UI Symbol icon list (Windows) - msdn.microsoft.com/.../jj841126.aspx

Reply

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Feed Subscribe