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

Windows 8 App Bar Icons (from Segoe UI)

Saturday, August 18, 2012 11:04 PM 6

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

Comments

  • gravatar vincent

    THANK YOU

    Sep 2012

  • gravatar bz

    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.

    Nov 2012

  • gravatar Jeremy Foster

    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.

    Nov 2012

  • gravatar bz

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

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

    Nov 2012

  • gravatar Jeremy Foster

    Perfecto.

    Nov 2012

  • gravatar jeremy simmons

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

    Dec 2012

Write a comment