App Icons

Designing a great app icon which spans across platforms could be a challenging task. Hence, instead of throwing out rationalized guidelines, we approach this diversity of icon guidelines by making a step-by-step tutorial instead.

① Start with 16×16, monochromatic vector icons with filled and outlined variants.

Well, that might sound too much. But it's worth the effort.

Many platforms require a minimum icon size of 16×16 pixels. No smaller than that.

So, in order to make your app legible enough from such small sizes, while still scalable, we recommend to design your icon's main symbols under a strict, 16×16 grid to maintain high legibility.

We highly recommend creating two base variants: filled and outlined.

Each variant has their own purposes, such as outlined for status and notification icons to allow users differentiate it from similar shapes, while filled works best for app launchers and places where those icons are commonly filled with filled icons.

Also save this icon under a vector file format (e.g. SVG) for later.

💾 Once you're done at this point, you can export these icons as...

Context menu icons¹

System status and notifications icons¹

Android monochromatic icons¹

Android's Quick Settings tile¹

Small file format icons¹

Favicon icons for the Web

Safari Favorites for Touch Bar¹

Windows 8, RT, 8.1, 10 tiles (legacy)²

¹ Strictly single-color variants are allowed (no relative opacity or multiple colors)

² We still recommend using full freeform icon version for compatibility with Windows 7 and before as well as Windows 11 and later.

② Add gradients, shadows, perspective on the filled icons. Then save as new files. We call them freeform icons.

Using the same 16×16 filled icon, let's add some colors!

  • 16×16 pixels

  • 24×24 pixels

  • 32×32 pixels

  • 48×48 pixels

  • 128×128 pixels

  • 256×256 pixels

③Create contained variants, too!

Contained icons are those with containers, which are common on mobile and wea2rable devices.

We recommend creating this type of icons starting from 24×24 pixels, with the earlier 16×16 variant kept as-is on the center of these new icons.

💾 With or without minor adjustments, your icons may already comply with...

Apple Human Interface Guidelines for iOS...

Material Design for Android and Google Play...

Microsoft Fluent Design for Windows...