Размер иконок в windows 10 в пикселях

See all the guidelines and recommendations of the most suitable icon formats for each OS in one place.

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.

List of OS platforms

• Mobile
  • iOS
  • iPadOS
  • Android
  • HarmonyOS
• Desktop
  • MacOS
  • Windows
  • Linux
• Wearable gadgets
  • Watch OS
  • Wear OS
  • HarmonyOS for watch
  • visionOS
• TV
  • tvOS
  • Android TV
  • Tizen OS

Mobile

• iOS
• iPadOS
• Android
• HarmonyOS

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

Картинка с сайта: blog.icons8.com

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

Картинка с сайта: blog.icons8.com

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.

iPadOS

iPadOS has similar requirements to iOS. See general Apple guidelines here.

Interface icons

Interface icon sizes used in iPadOS are also similar to iOS ones. To make sure, keep this list in mind:

• 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, 32×32 px @2x

Картинка с сайта: blog.icons8.com

Before creating your own icons, check this 10K+ icons catalog from Icons8 made by Apple guidelines.

App icon

Like iOS, here is the general tip: don’t add any border or overlay to the Settings icon cause the system will automatically add a stroke 1-pixel thickness around it. Use a standardized one from the SF Symbols list, or design yours with these sizes in mind:

Картинка с сайта: blog.icons8.com

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.

Картинка с сайта: blog.icons8.com

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.

Картинка с сайта: blog.icons8.com

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.

HarmonyOS

HarmonyOS is the operating system developed by Huawei. The main idea is based on full adaptivity. This means that using the same system capabilities, you can apply it to all kinds of devices, including mobile phones, tablets, PCs, smart TVs, wearables, smart speakers, head units, earphones, and AR/VR glasses. This makes a bit of a difference in the interface design. All elements are measured not in pixels but in vp (virtual pixels) to ensure that all interface elements have a consistent visual volume on devices with different densities. But keep in mind that you need specific icon maker software to produce elements of this type.

Interface icons

The final size of the system icon in HarmonyOS is 24vp with 1vp of space reserved around the drawing area. The drawing area depends on the shape of your graphics, which is:

See the full guide for the interface icons on the official HarmonyOS portal.

Картинка с сайта: blog.icons8.com

App icon

HarmonyOS app icons adopt the neumorphism design approach, so using a semi-transparent blur effect and layered design techniques is preferable. The system automatically applies an adaptive mask to unify icons.

The final artwork should be uploaded in *.png. Here is the sizing:

Check out the comprehensive app icon official guide here.

Desktop

• MacOS
• Windows
• Linux

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

Картинка с сайта: blog.icons8.com

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.

Картинка с сайта: blog.icons8.com

Learn more about the design guide for macOS app icons here.

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.

Картинка с сайта: blog.icons8.com

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.

Картинка с сайта: blog.icons8.com

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.

Картинка с сайта: blog.icons8.com

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.

Картинка с сайта: blog.icons8.com

Linux

Being an open-source OS made by developers, Linux doesn’t have its own human interface. Several significant contributors provide Linux users with an interface. In this article, we will cover the most popular.

GNOME

The largest human interface contributor to Linux. You can find GNOME Human Interface Guidelines here.

Interface icons

GNOME UI icons use the “symbolic” style. This is simple and monochrome and is designed to work well in smaller sizes. As an example of such minimalistic icons, you can use this pack by Icons8, which is designed for small interfaces and is not overloaded by too many details.

This is a list of all preferable sizes of symbolics:

• 16px x 16px
• 32px x 32px
• 64px x 64px
• 128px x 128px

Картинка с сайта: blog.icons8.com

The GNOME team strongly recommends using these sizes only and *.svg format to prevent fuzzy rendering.

See the main UI icons guide on the GNOME website.

App icons

GNOME’s app icon’s standard size is 128px × 128px. But the icon itself shouldn’t fill this space entirely. Follow the guides in the app icon template, and ensure your icon has a similar visual weight to other app icons.

App icons are defined at 128px × 128px but are typically viewed at 64px × 64px and can be scaled down to 32px × 32px. Therefore, avoid adding too much detail, as this will be lost at small sizes.

The official guideline is here.

KDE

Unlike any other guidelines in this article, the KDE design system divides icons into colorful and monochromatic types. Each has a separate design guide.

Interface icons

The size of the icon depends on the purpose:

Application icons

Application icons always use the colorful icon style. Their baseline size is 48 pixels.
Learn more about app icon design guidelines on the KDE website.

Elementary OS

Probably, the Linux contributor with the richest design environment.

Interface icons

Design each icon for the size it’s meant to be viewed at. So the Elementary team recommends you design icons in each size individually. Here is Dustin Curtis’ article, Pixel-fitting, that can help you with that.

The main system sizes for icons in Elementary OS are:

• 16px x 16px
• 24px x 24px
• 32px x 32px
• 48px x 48px
• 64px x 64px
• 128px x 128px

Картинка с сайта: blog.icons8.com

This sizing is also applied to the app icons. Note: only the colored icon can be used as the application pic. For more information, check the complete guide here.

Wearable gadgets

• Watch OS
• Wear OS
• HarmonyOS for watch
• visionOS

Watch OS

Apple doesn’t have any additional considerations for the watchOS since it uses iOS icon guidelines.

Interface icons

Here is a list of standard 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, 32ps 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
• Simple small icons made perfect for tiny interfaces.

Картинка с сайта: blog.icons8.com

App icons

A watchOS app icon is circular and displays no accompanying text. Sizes in pixels:

If you have a companion iPhone app, you must also supply your watchOS app icon in the following sizes.

You can find the official guidelines here.

Картинка с сайта: blog.icons8.com

Wear OS

Wear OS follows Material Design principles for iconography.

Interface icons

Interface icons for Wear OS are the same size as the main Android UI icons.

Картинка с сайта: blog.icons8.com

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

Картинка с сайта: blog.icons8.com

App icons

Since applications for Wear OS are available at the main Google Play app store, the sizing and format for the app icons here are the same as for Android.

• 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.

For more, check Google Play icon design specifications.

HarmonyOS for watch

Since the most important feature of this OS is about full adaptivity of the interface, HarmonyOS for watch icons guidelines is no different from HarmonyOS for other devices.

Interface icons

The final size of the system icon in HarmonyOS is 24vp with 1vp of space reserved around the drawing area. The drawing area depends on the shape of your graphics, which is:

See the full guide for the interface icons on the official HarmonyOS portal.

App icon

This icon type is consistent with that on the mobile phone home screen. Use round backdrops.

• Backdrop (slice) size: 76vp (transparent blank area around the backdrop)
• Icon size: 60vp.

The final artwork should be uploaded in *.png. Here is the sizing:

Check out the comprehensive app icon official guide here.

Картинка с сайта: blog.icons8.com

visionOS

Apple Vision Pro is all about new, multi-dimensional experiences, so its apps should also fit this new concept of “Spatial user interface.” Check Apple’s introduction video to learn the basics about this concept.

Interface icons

For the UI icons in visionOS use the standard list of sizing requirements that is general for all OS’s in the Apple ecosystem:

More about it here.

App icons

A visionOS app icon is circular. It includes up to three layers:

• background layer
• one or two layers on top

Altogether, it produces the 3D effect. All layers should be provided separately as flat, squared images. Apple recommends designing mostly center-oriented layers for the best volume effect. More about this on Apple’s website.

Create an app icon that measures 1024px x 1024px for display in the Home View.

TV

• tvOS
• Android TV
• Tizen OS

tvOS

Here are the main guidelines from Apple about designing for tvOS.

Interface icons

TvOS uses the list of sizing requirements that are standard for most OS’s in the Apple ecosystem:

More about it here.

App icons

App icons use the PNG format and support the following color spaces:

• sRGB (color)
• Gray Gamma 2.2 (grayscale)

In addition, app icons in tvOS support Display P3 (wide-gamut color).

The sizing is the following:

Картинка с сайта: blog.icons8.com

Картинка с сайта: blog.icons8.com

Android TV

Like for Android for smartphones, for Android TV, Google uses Material 3 as the main guidelines.

Interface icons

System icons are measured in dp. 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.

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

There are two formats to consider: banners and launcher icons for Android TV.

Banner

The Banner logo is a 16×9 aspect ratio logo used in Android TV OS to show your app launcher. You can also provide xhdpi resources with the size of 320px x 180px when using API level 25 or lower.

Картинка с сайта: blog.icons8.com

Launcher icon

The Launcher icon is a 1×1 aspect ratio resource used in multiple places, such as Settings and Media session integrations (Now playing card) on Android TV. The launcher icon can also be used in the Your Apps row on Google TV.

A full guide on creating app icons for Android TV is here.

Tizen OS

Most of the Samsung Smaty TVs use Tizen OS. This open-source operational system allows you to customize your app for it freely.

Interface icons

There are no strict rules about interface icon sizing in Tizen Os for smart TVs. Here is the list of the most common sizes used depending on the screen type:

Check full guides on the main developer’s website.

App icons

The main icon should have the following properties:

• File format: PNG file with a transparent background
• Size for a WVGA-screen device: 82px x 82px
• Size for the Tizen Store: 512px x 512px

NOTE: Always surround each icon with 2 pixels of transparent free space.

An application icon for Samsung Smart TV for 2016 model groups and later has two images. To correctly display your application icon on 2016 Samsung Smart TVs and later, you must comply with the conditions:

Картинка с сайта: blog.icons8.com

Summary

When designing the app, always check the requirements of each OS since they sometimes can be tricky.

For an easier way, you can always choose icons from the main OS’s catalog:

• SF Symbols 5 by Apple
• Material symbols on Google fonts
• WinUI Gallery sources by Microsoft

You also can use these custom-made icons:

• SF Symbols Regular
• SF Symbols Regular filled
• Material Filled
• Material Outline
• Material Two-tone
• Windows 11 Color
• Windows 11 Outline
• Windows 11 Filled
• Windows Metro
• Simple Small
• Tiny Color
• Tiny Glyph
• Color Glass

About the author
Natalie Novice. Content marketing manager with a designer’s eye and a storyteller’s heart. Transforms dense UX concepts into binge-worthy blog posts, secretly rewrites all team communications for clarity, and maintains a “wall of shame” documenting terrible designs spotted in the wild.

A Quick & Easy guide to Microsoft Windows Icon Size

There is sometimes a little confusion over the different sizes required to create a Windows 7 Application Icon file. This is in some way brought about by the flexibility of the ICO format and its ability to ‘contain’ many image sizes and colour depths but is also not helped by Microsoft’s own quite poor documentation on Windows Icon Size, see here.

Картинка с сайта: www.creativefreedom.co.uk

If you want to create an Windows 7 Compliant ‘Application Icon’, to be used as a short-cut, a file type, or embedded in an executable file, it must contain the minimum following icon sizes:

Standard Windows Icon Size for ICO format

• 256 x 256 pixels  – 32bit (24bit colour, 8bit transparency)
• 48 x 48 pixels  – 32bit (24bit colour, 8bit transparency)
• 32 x 32 pixels  – 32bit (24bit colour, 8bit transparency)
• 16 x 16 pixels  – 32bit (24bit colour, 8bit transparency)

To allow for backwards compatibility with Windows operating systems of software with a limited colour palette, you can also include the above icon sizes in 8bit (256 colours, 1bit colour transparency) and if you really wish to cover all eventualities in your icon design, 4bit (16 colours, 1bit transparency). This last colour depth is very rarely of use and as a rule I don’t tend to include it unless requested specifically by the client as it just uses up unnecessary space. In fact, more often than not, 32bit ICO files are fine for most projects but I recommend you test in the final application before making this decision.

Additional Common Windows Icon Sizes

There are other additional Icon sizes supported by Windows Icons but they are rarely used. However, I will list them here for completion.

Extra Icon Sizes

• 128 x 128 pixels
• 96 x 96 pixels
• 180 x 180 pixels
• 72 x 72 pixels
• 64 x 64 pixels
• 24 x 24 pixels

The size most commonly used size on this list is ’24 x 24′ as it is a standard size for menus within Windows 7 and 3rd-party software. When creating ICO files specifically for menus, rather than app icons, 16 x 16, 24 x 24 & 32 x 32 are the three most common sizes used.

Testing your Windows 7 Icon

The easiest way to test the compatibility of your Windows 7 ICO files is in a standard ‘Window’.

Save your ICO files into a folder and then use the ‘View’ drop down to select the view or size of icon you wish to see.

Windows 7 automatically scales the icons as you move between the sizes you have created. You can test this by moving the slider up and down.

The actual sizes displayed at each of the headings are as follows:

• Extra Large Icons – 256 x 256 pixels
• Large Icons – 96 x 96 pixels (Automatically rendered by Windows from 256 version)
• Medium Icons – 48 x 48 pixels
• Small Icons – 16 x 16 pixels
• List – 16 x 16 pixels
• Details – 16 x 16  pixels
• Tiles – 48 x 48 pixels
• Content – 32 x 32  pixels

Windows Icon Size Oddities

ICO files can also be used as overlays within Windows 7, a prime example is the small curved arrow used as a short-cut symbol on ‘Shortcut’ icons. Windows overlays a transparent ICO file with a small offset graphic within the bottom left corner, on top of the standard Application ICO file. Annotations is another case applying to the bottom right hand side but I have never come across a request from a client to create icons of this description in the 15 or so years I have been an icon designer, so it is not something I would lose any sleep over.

I hope you found this overview useful.

Mar 28, 2023

Icon sizes vary depending on where organizations plan to use an icon, either for desktop, mobile, or the web. Designing the appropriate icon size becomes advantageous for companies and organizations who want to catch their target audience’s attention.

Картинка с сайта: www.template.net

Icon Sizes Standard

Small icons

Small icons are what audiences see on websites, laptops, and desktops, with measurements of 16 by 16 pixels, also representing one of the standard sizes. These small icons represent various files, actions, or ideas, making them interactive or non-interactive elements by clicking or selecting the graphic. Many operating systems and websites have a setup of small icons that determine whether the file is a data file, folder, or program file that users can execute.

Medium icons

Medium icons have measurements of 48 by 48 pixels, which users see as the standard icon size for many desktop computers. The medium display size of the icons on the screen is more prevalent in the taskbar and desktop icons. For people using the Windows operating system for their computers, it is easier to balance the icon weight and scale up or down using Windows properties by right-clicking the desktop background.

Large icons

To adjust the setup to large icons for a Windows computer, individuals right-click on the desktop, hover over the View button, and select Large icons. Large icons have a length and width of 96×96 pixels and use large icons for desktop, toolbar, and other user UI improvements for an all-out positive user experience. Large icons make it easier for users to identify files, applications, and other actions by having a clearer and larger icon size.

Extra large icons

Some individuals want to get a good grasp of desktop icons without text titles or descriptions, and they can have a scalable setup of extra-large icons as their default settings. Extra large icons have a dimension of 256×256 pixels, covering a larger surface area of the screen, with an icon or logo representing a file, program, or software application. Many people use extra large icons for their setup, especially if they have a difficult time looking at smaller-scale icons.

Icon Sizes for Digital

Icon Size for Smartphone

Many people use smartphones to communicate and perform tasks and activities. Individuals can download the necessary mobile apps to them fulfill their tasks or acquire resources for leisure or fun through the Google play store or Apple app store. These icons have dimensions of 250×250 pixels for both Android and Apple phones and tablets with a value attribute, a PNG format, with a flat and non-transparent style.

Icon Size for Windows

Windows is an operating system that many users are familiar with since it has been released many years ago. Windows has been one of the most utilized and versatile operating systems available on the market, with different businesses and individuals using the system to maximize productivity and profitability through different software applications, including Microsoft Excel, to build charts and graphs. The icon size for applications for Windows is 48×48 pixels or 48px.

Icon Size for MacOS

The macOS or Mac operating system is exclusively for people with Mac or Apple Devices like the Macbook Air or Macbook Pro since Apple has compounded their operating system to only service Apple users. Design-wise, the macOS supports 64×64 pixel icon sizes for their desktop with a 54×54 pixel grid spacing for optimal viewing for their users, with text label sizes of 12px. The file format for macOS icons is ICNS format.

Icon Size for Website

Website icons are graphics or symbols that individuals or organizations can incorporate into websites or web pages. A website icon functions as a button or link that users click on or is simply for aesthetic purposes. Website icons or favicons are 16×16 pixels or 16px in size and are in the SVG, PNG, or JPEG file types.

Icon Sizes for Print

There are instances wherein organizations and individuals utilize icons to describe processes or to inform customers about new products or services. As such, companies can design a guide using icons they can print and reproduce in flyers, brochures, infographics, and other print marketing and advertising materials. When printing icons, individuals have choices to print the icons using 16px, 32px, or 96px.

Icon Sizes for Business

Businesses wanting to build icons for their business materials, like brochures, can create illustrations or graphics using photo editing software like Adobe Photoshop. Aside from photo editing software, organizations can download icon templates from different sources and edit them using editing programs such as Adobe Illustrator. For website icons or favicons, businesses can design their icons with dimensions of 16px.

Icon Sizes for Adobe Photoshop

Adobe Photoshop helps individuals to create vector graphics like icons for mobile apps, websites, and other forms of media. Using Photoshop enables users to reduce or increase icon sizes, variate line thickness, and use a ruler to measure uniform height and width. Through the software, individuals can create varying icon sizes, including a 250px icon for mobile apps.

Icon Sizes for Adobe Illustrator

Aside from Adobe Photoshop, Adobe Illustrator is another program that individuals can use to develop icon vectors. The application enables users to manipulate shapes, like circles, squares, and rectangles to create a clipart or symbol for an icon. Adobe Illustrator can prepare 16×16 pixel icons or favicons for websites.

Icon Sizes FAQs