What are the correct AppBarButton icon sizes to include with UWP apps?

Question

Note: This question is only about AppBarButton icons.

In writing a UWP app that runs on all form factors, I'd like to include all necessary variations of AppBarButton icons.

From what I've read so far, it seems that I need 24x24 icons in each of the five scale factors, 100%, 125%, 150%, 200%, and 400%. In other words, 24x24, 30x30, 36x36, 48x48, 96x96.

Is this correct?

Also, how should these be named so that the system correctly picks the right variant given the base name?

Edit: I've read elsewhere that only one size is needed, and that Windows UWP renders the icon in device-independent units (i.e. scales it appropriately.)

By comparison, iOS allows multiple images to be included with the @2x and @3x suffixes, and Android allows images to be placed in special subdirectories, e.g dir-hdpi, dir-mdpi, where dir is the base directory name. So it seems that UWP does not have such a system, and only a single icon is necessary. Is this revised understanding correct?

Answer 1

You are right: UWP apps render the size of the icon depending on the device. But you can use the icons using Segoe MDL2 in your appbar buttons. There are many icons prepared to be scaled automatically. I use this technique in all my UWP apps without problems.

https://msdn.microsoft.com/en-us/library/windows/apps/jj841126.aspx

If you are using a png image for your icon, I recommend you to set the size of this image to 48x48 pixels, which is the default size for appbar image icons. The UWP system will then automatically scale your icons without rendering problems.