Search code examples
iconswin-universal-appuwpwindows-10-mobile

UWP: icon size in app bar/command bar

What icon sizes should I use for the app bar/command bar?

I couldn't find something in Guidelines for tile and icon assets or in UWP App Visual Assets.

Other names: navigation bar (iOS), app bar/action bar (Android), toolbar (Xamarin.Forms)

Solution

  • Image size

    The default icon size should be 20 pixels for app bar image at 100% scaling, but you should also provide additional image assets to ensure it looks great on all screens:

    appbaricon.scale-100.png - 20 px
appbaricon.scale-125.png - 25 px
appbaricon.scale-150.png - 30 px
appbaricon.scale-200.png - 40 px
appbaricon.scale-400.png - 80 px

    Source

    I have created a simple XAML page with the CommandBar control and an AppBarButton with a sample image:

     <CommandBar>
     <AppBarButton>
         <AppBarButton.Icon>
             <BitmapIcon UriSource="/Assets/Sample.png" />
         </AppBarButton.Icon>
     </AppBarButton>
 </CommandBar>

    I have run the app with debugger attached, found the BitmapIcon in the Live Visual Tree in Visual Studio and opened its Live Property Explorer:

    enter image description here

    As you can see, the height and width of the image is set to 20 device independent pixels. For different display scaling it is the same, but rendered with the appropriate multiple on the screen.

    I have also confirmed that this size exactly matches the Segoe UI Symbol font-based icons that are built-in into the AppBarButton control.

    I recommend making the icon image without any margin so that its size matches the default image as well as possible