Navigating user interface icon specs for various devices feels daunting? We’ve condensed guidelines for iOS, Android, macOS, and Windows into a single, bookmark-worthy piece.
It might seem overwhelming to consider all the requirements that mobile, desktop, and wearable device operation systems have for the icon formats and sizes. We gathered all popular OS guides in one article to ensure your interface meets the official guidelines. Pin this tab and use it as a reminder.
iOS
See the full guidelines on the Apple official website.
Interface icons
Basically, there are no strict regulations about the size of the interface icon in iOS. You just need to adjust it to your app interface hierarchy and keep it consistent throughout the entire app. Here is a list of common sizes:
- 256px x 256px @1x, 512px x 512px @2x
- 128px x 128px @1x, 256px x 256px @2x
- 32px x 32px @1x, 64px x 64px @2x
- 16px x 16px @1x, 32px x 32px @2x
You can find all the basics about interface icons for iOS at the SF Symbols page.
Couldn’t find the icon you need in the main catalog from Apple? Here are custom-made:
- SF symbols by Icons8
- iOS icons by Icons8
Home Screen: @2x (pixels) — 120×120, @3x (pixels) iPhone only — 180×180
Spotlight: @2x (pixels) — 80×80, @3x (pixels) iPhone only — 120×120
Settings: @2x (pixels) — 58×58, @3x (pixels) iPhone only — 87×87
Notifications: @2x (pixels) — 76×76, @3x (pixels) iPhone only — 114×114
App icon
Note: don’t put any additional border or overlay on your Settings icon. iOS automatically adds a 1-pixel stroke to all icons to look good on Settings’ white background.
Android
Android is a mobile OS made by Google. The UI design is based on the Material Design System. Here, you can check the full guidelines for the latest version, Material 3. The following works with both smartphones and tablets operating on Android.
Interface icons
Google uses dp to measure the size of icons. 1dp is basically equal to 1px on the 160dpi screen. If, for example, your interface is viewed on a 320dpi screen, 1px will be equal here to 2dp, and so on.
24dp for pixel-perfect standard (Baseline) icon size
20dp for additional small-scale visuals
40dp and 48dp for display or headline type and larger screen sizes
Here are some handy sources to check:
- Material icons by Icons8
- Material icons catalog on Google Fonts
- Material icons Figma plugin from Google
- Design principles for icons in Material design
App icons
Quick format check to follow in your Android app icon design:
- Final artwork size: 512px x 512px
- Format: 32-bit PNG
- Color space: sRGB
- Max file size: 1024KB
Google Play automatically applies a 20% squared corner radius to your app icon. Ensure that all important parts of your design fit 384px x 384px, and nothing will be cut. A shadow mask will also be applied automatically, so upload your artwork without it.
Other than that, Google doesn’t allow you to use additional text or graphic elements on your app icon that:
- indicate your app ranking
- promote deals or incentivize installs
- indicate participation in a Play program
- can mislead users.
For more information, check Google Play icon design specifications.
Desktop
MacOS
Here is Apple’s guide for designing macOS apps.
Interface icons
Standard sizes for all system icons in the Apple ecosystem are the following:
- 256px x 256px @1x, 512×512 px @2x
- 128×128 px @1x, 256×256 px @2x
- 32×32 px @1x, 64×64 px @2x
- 16×16 px @1x, 32×32 px @2x
You can find all the basics about interface icons for macOS at the SF Symbols page.
Couldn’t find the icon you need in the main catalog from Apple? Here are custom-made:
- SF symbols by Icons8
- iOS icons by Icons8
App icon
Use the drop shadow in the icon-design template. The app-icon template includes the system-defined drop shadow that helps your app icon coordinate with other macOS icons.
Create a 1024px x 1024px version of your macOS app icon for the App Store. In addition, you also need to supply the icon in the following sizes.
@1x (pixels):
- 512×512
- 256×256
- 128×128
- 32×32
- 16×16
@2x (pixels):
- 1024×1024
- 512×512
- 256×256
- 64×64
- 32×32
Document icons
If your macOS app can use a custom document type, you can create a document icon to represent it. It looks like a piece of paper with its top-right corner folded down. This helps people distinguish documents from apps and other content, even when icon sizes are small.
You can supply a combination of background fill, center image, and text to create a custom document icon.
Sizes for the background fill image:
- 512px x 512px @1x, 1024px x 1024px @2x
- 256px x 256px @1x, 512px x 512px @2x
- 128px x 128px @1x, 256px x 256px @2x
- 32px x 32px @1x, 64px x 64px @2x
- 16px x 16px @1x, 32px x 32px @2x
Center images (pictogram) sizes:
- 256px x 256px @1x, 512px x 512px @2x
- 128px x 128px @1x, 256px x 256px @2x
- 32px x 32px @1x, 64px x 64px @2x
- 16px x 16px @1x, 32px x 32px @2x
Define a margin that measures about 10% of the image canvas and keep most of the image within it. Although parts of the image can extend into this margin for optical alignment, it’s best when the image occupies about 80% of the image canvas. For example, most of the center image in a 256px x 256px canvas would fit in an area that measures 205px x 205px.
You can use minimalistic icons from the Icons8 pack designed by Apple’s guidelines for your center image. The complete guide for macOS custom document icon design is here.
Windows
The complete info about icons used in Windows OS apps is on the official Microsoft page.
Interface icons
Windows 11 introduces a new system icon font, Segoe Fluent Icons. All glyphs in Segoe Fluent Icons are drawn in a monoline style. That means they’re created through a single stroke of 1epx.
For easier usage, the size of the icon complements the font size around it. For example, if you use 16pt font, put a 16epx *.svg icon next to it.
You can check these colored Windows 11 icons that fit with Microsoft guidelines.
App icon
When Windows displays your app’s icon, it will first look for an exact size match. If there is no match, it will look for the next size above and scale down. Including more icon sizes with your app means Windows will more often have a pixel-perfect match and reduce the amount of scaling applied to scaled icons.
Here is the complete list of icons and variations for Windows OS.
Wrapping up
Mastering user interface icons across various platforms ensures your designs remain sharp and user-friendly.
For those looking to dive deeper into icon guidelines for a wider range of gadgets, including TVs, our full article offers comprehensive insights.
Stay ahead in design by keeping these tips at your fingertips.
