What is the navigation drawer icons size?

Question

I need to know the correct size (artboard and content) for Navigation Drawer icons.

It doesn't say anything on the Navigation Drawer specs: http://www.google.com.br/design/spec/patterns/navigation-drawer.html#navigation-drawer-specs

Thanks!

http://www.google.co.uk/design/spec/layout/metrics-keylines.html#metrics-keylines-keylines-spacing — Zain Zafar, Jun 16 '15 at 17:31
I can calculate the artboard size (which is 40 x 40dp), but what is the content size? Note that the navigation drawer icons are smaller than the "avatar icons". — thiagolr, Jun 16 '15 at 17:39
Is there a way to edit the default navigation drawer icon size? — Taslim Oseni, Jan 13 '18 at 07:48

score 24 · Answer 1 · edited Apr 05 '18 at 17:09

24

For:

mdpi : 24 x 24 px
hdpi : 36 x 36 px
xhdpi : 48 x 48 px
xxhdpi : 72 x 72 px
xxxhdpi : 96 x 96 px

According to their ratios:

mdpi : hdpi : xhdpi : xxhdpi : xxxhdpi= 1 : 1.5 : 2 : 3 : 4

Update:

Now google published Material icon design with more details.icons may be scaled down to 20dp with a trim area of 2dp surrounding the icon.

To learn more visit the Material Design site.

edited Apr 05 '18 at 17:09

QED

9,803
7
50
87

answered Jun 16 '15 at 17:45

Sayem

4,891
3
28
43

score 23 · Accepted Answer · edited Apr 05 '18 at 10:30

23

I would vote up Balar's answer, but it is off by one small detail. The correct answer is that all small icons should be 24 x 24 dp.

Reference: https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-touch-target-size

edited Apr 05 '18 at 10:30

SocialSupaCrew

464
2
9
14

answered Jun 16 '15 at 17:39

MusicMaster

549
4
14

1

An equivalent resource for Material Design can be found [**here**](http://www.google.at/design/spec/style/icons.html#icons-system-icons). – Xaver Kapeller Jun 17 '15 at 04:43
Links are broken. Correct one is https://material.io/archive/guidelines/layout/metrics-keylines.html#metrics-keylines-sizing-by-increments as of 2021 – netimen Oct 14 '21 at 09:05

score 9 · Answer 3 · answered Jun 16 '15 at 20:49

You can check the official implementation of NavigationView provided by the support design library.

If you see the code of NavigationMenuItemView it defines:

this.mIconSize = 
 context.getResources().getDimensionPixelSize(dimen.navigation_icon_size);

where:

<dimen name="navigation_icon_size">24dp</dimen

score 1 · Answer 4 · edited Jan 25 '17 at 07:13

1

the dimensions of those navigation icons are usually 24 x 24 pixels

edited Jan 25 '17 at 07:13

computingfreak

4,939
1
34
51

answered Jun 16 '15 at 17:35

Conall_Heffernan

33
4

Do you mean 24 x 24 dp? Do you know where I can find this info on the official documentation? – thiagolr Jun 16 '15 at 17:37

score 1 · Answer 5 · answered Sep 07 '16 at 19:35

If you only need the icon size to set the dimensions of a view component you can use the Toolbar.Button.Navigation style. Here is an example where I create a fake navigation icon view.

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/vCoordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--CONTENT VIEW-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

        </LinearLayout>

        <!--FAKE TOOLBAR NAVIGATION ICON-->
        <RelativeLayout
            android:layout_width="?attr/actionBarSize"
            android:layout_height="?attr/actionBarSize">
            <ImageView
                android:id="@+id/vToolbarNavigationIcon"
                style="@style/Widget.AppCompat.Toolbar.Button.Navigation"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@drawable/my_icon"/>
        </RelativeLayout>

    </android.support.design.widget.CoordinatorLayout>

What is the navigation drawer icons size?

5 Answers5