What is the recommended ActionBar icon size in Material Design (Android API 21+)?

Question

First of all, this question is related: How big should Action Bar(Toolbar) icons be in the new Android Material design?

In the related question it is clear that the touch target size of the action bar icons should be 48dp. I would like to get a couple of things clarified regarding these icon sizes in Material Design:

1. On this page: Material Design Keylines - Touch Target Size there is two icons, the search icon is tiny (24dp) and the profile icon is much bigger (40dp). Is there any recommendation on how big the icon should be, within the 48dp touch target? It looks like the action bar icons that you can download from the Material Design site is 40dp (i.e. as the profile button in the linked site).

2. I assume that the old Iconography instructions are out of date for Material Design, is that correct? This page says that the icons should be 32dp with a 24dp icon: Iconography.

3. I also noticed that Android Asset Studio and Android Asset Studio for Material Design generate xxhdpi action bar icons with 96x96 pixels but I assumed they should be 144x144 pixels. I assume this since the xxhdpi 48dp action bar icons in the icons from the Material Design site is 144x144 pixels. Is it correct that Material Design ActionBar icons should be 144x144 pixels for xxhdpi?

Solution

1. There are recommendation for most features. Toolbar icons should always be 24dp, while as you say circular features (including images and floating buttons) should be 40dp. You might find different values for different views, in the page you linked or in the "Components" side menu.

   I downloaded material icons some time ago, from here or here. In both cases icons are provided in different sizes, 18dp, 24dp, 36dp and 48dp. It's up to you to choose the best size and to set an appropriate padding on the view, to ensure a 48dp clickable area. In most cases if you chose an AppCompat or Material theme it will handle sizing and padding for you.

   Apart from that, e.g. when sizing a button, I would choose Buttons from the "Components" menu, and get size info there.

2. Yes.

3. You are probably right, 48dp icons for xxhdpi should be 144x144 pixels.

Comments

[mikeesouth]

This sounds correct but the 24dp action bar icons have padding within each icon file so the effective area will be smaller than 24dp. Also, a 24dp image should be 72x72 pixels in xxhdpi. The Android Asset Studio tool and also Android Studio 1.0.2 generates 96x96 pixels for action bar icons and xxhdpi. 96x96 pixels should equal to 32dp if my math is correct. Maybe that is the 24dp image including 8 dp of padding around it.

[natario]

I see your point. This tool tells the same. Anyway, even considering padding inside official icons, Asset Studio icons seem downscaled. Material icons, xxhdpi, 48dp are globally 144x144 and the icon is, more or less, 108x108. That is yet more than 96x96 from Asset Studio.

[mikeesouth]

Yes. I guess the tools aren't updated for Material Design yet, I'm hoping for an Android Studio update soon. Until then I'll do it manually but I'm still not sure on which action bar icon to pick. If I understand it correctly I should probably pick the 36dp or 24dp but keep the touch target 48dp. If I pick the 48dp action bar icon from the icon pack, the icon itself will be larger than 24dp. If I pick the 24dp image file, the icon itself will be smaller than 24dp. This is confusing :)

[natario]

I use 24dp icons and they look good (by which I mean consistent with all other apps, with Material screenshots, and so on). It's the right size. Don't care so much about the touch target, it should be automatically handled by your style.

[Jacob Ras]

@miav same here, the 24dp icons seem to match perfectly with other material design apps.

[Christian García]

According to the official documentation, Floating Action Buttons should also have 24dp icons