Icon Size Scaling Calculator

Enter your base icon size to instantly generate export dimensions for every iOS and Android scale factor, plus a full app icon size reference.

Created by Luis GonzalezLast updated: May 9, 2026

How to Use This Calculator

1
Enter Base Icon Size
Input the 1x (baseline) size of your icon in pixels. Common starting points are 16, 24, 32, or 48 pixels.
2
Select Platform Filter
Choose 'All Platforms' to see comprehensive scaling, or filter by 'Web / Generic,' 'iOS,' or 'Android' for platform-specific results.
3
Review Scaled Icon Sizes
Examine the generated sizes for different density variants (1x, 2x, 3x, 4x) and specific platform requirements, ensuring visual consistency across devices.

Example Calculation

A UI designer needs to generate export sizes for a new app icon, starting with a 24px base size.

Base Icon Size

24 px

Platform Filter

All Platforms

Results

24 px

Tips

Design for Vector Scalability

Whenever possible, design icons as vector graphics (SVG) rather than raster images. This ensures perfect clarity and infinite scalability without pixelation, simplifying the export process for multiple resolutions.

Check Smallest Sizes First

When creating an icon, start by designing it for its smallest required size (e.g., 16x16px). If it's clear and legible at that scale, it will likely look good when scaled up, preventing loss of detail.

Understand Platform-Specific Needs

iOS uses 2x and 3x for Retina displays, while Android uses a broader range like MDPI (1x), HDPI (1.5x), XHDPI (2x), XXHDPI (3x), and XXXHDPI (4x). Always verify the exact requirements for your target platform to avoid pixelation or blurriness.

Streamlining Icon Export with Size Scaling

The Icon Size Scaling Calculator is an essential utility for UI/UX designers and developers, enabling the rapid generation of precise icon dimensions for various pixel densities and platforms. From a single base size, it computes the exact pixel outputs required for 1x, 2x, 3x, and 4x scales, encompassing all major iOS and Android density variants. This tool ensures that digital assets maintain visual fidelity across a fragmented device ecosystem, crucial for delivering a polished user experience in 2025 where screen resolutions can vary dramatically, from a 16px favicon to a 1024px app store asset.

Designing for Pixel Density and Device Diversity

Pixel density (DPI, PPI) is a critical consideration in modern digital design, defining how many pixels are packed into a physical inch of screen space. Devices like Apple's Retina displays and Android's array of 'hdpi,' 'xhdpi,' and 'xxhdpi' categories demand icons rendered at specific multiples of a base size. Scaling is paramount for maintaining visual fidelity across this fragmented device ecosystem, ensuring that icons appear crisp and clear rather than blurry or pixelated on high-resolution screens. The challenge lies in designing for both raster (pixel-based) and vector (path-based) icons, where vector formats like SVG offer superior scalability and future-proofing.

How Icon Scaling Ratios are Determined

The Icon Size Scaling Calculator's logic is straightforward: it multiplies your chosen base icon size by standard scaling factors for different screen densities. While the underlying code manages the platform-specific rules, the core principle is:

Scaled Size = Base Icon Size × Scaling Factor

For example, a 1x (baseline) icon might be 24 pixels. For a 2x Retina display, the icon needs to be 48 pixels (24 × 2). For a 3x Super Retina display, it's 72 pixels (24 × 3). Android uses an even broader range of factors like 1.5x (HDPI) and 4x (XXXHDPI), necessitating precise calculations to ensure every asset is perfectly rendered.

💡 Ensuring icons scale correctly prevents visual artifacts. If design errors lead to costly re-work or "failed prints" in your digital or physical products, our Failed Print Cost Calculator can help quantify the financial impact.

Calculating Icon Sizes for a 24px Base

Consider a UI designer who needs to prepare icons for a new mobile application, starting with a standard 24px base icon:

Base Icon Size: Input "24 px".
Platform Filter: Select "All Platforms" to see comprehensive scaling.

The calculator processes this to produce:

Standard 1x: 24 px (the baseline).
2x Retina / XHDPI: 48 px (24 × 2).
3x Super Retina / XXHDPI: 72 px (24 × 3).
4x Android XXXHDPI: 96 px (24 × 4).
Android HDPI: 36 px (24 × 1.5).

This ensures the designer has all necessary raster sizes from a single input, guaranteeing that the icon will appear sharp and appropriately sized across a wide array of devices, from standard web browsers to the latest high-density mobile screens.

💡 When considering how icons appear on different screens, understanding visual perception is key. Our Field of View Calculator can provide insights into how elements are perceived within a user's visual field.

Designing for Pixel Density and Device Diversity

Common Icon Sizes and Density Multipliers

In digital design, typical base icon sizes for web and desktop applications often include 16x16px (favicons, small UI elements), 24x24px (common for interactive UI icons), 32x32px, and 48x48px (larger buttons or list items). For mobile platforms, these base sizes are then multiplied by density factors to accommodate high-resolution screens. iOS primarily uses 2x and 3x for its Retina and Super Retina displays. For example, a 24px (1x) icon becomes 48px for 2x and 72px for 3x. Android, with its more varied ecosystem, utilizes a broader set of multipliers: MDPI (1x), HDPI (1.5x), XHDPI (2x), XXHDPI (3x), and XXXHDPI (4x). Thus, a 24px (MDPI) base icon would scale to 36px for HDPI, 48px for XHDPI, 72px for XXHDPI, and 96px for XXXHDPI, ensuring optimal display across a vast range of Android devices.

Frequently Asked Questions

What is pixel density in icon design?

Pixel density refers to the number of pixels within a given physical area on a screen, often measured in dots per inch (DPI) or pixels per inch (PPI). Higher pixel density displays, like Apple's Retina or Android's high-density screens, require icons to be rendered at multiples of their base size (e.g., 2x, 3x) to appear crisp and clear, rather than blurry or pixelated.

Why are multiple icon sizes needed for a single app?

Multiple icon sizes are necessary to ensure visual consistency and sharpness across the diverse range of devices and screen resolutions available in 2025. A single app might run on a standard-definition phone, a high-resolution tablet, or a desktop monitor, each requiring a different pixel density to display the icon without distortion or blurriness, maintaining a professional user experience.

What is the difference between 1x, 2x, and 3x icons?

The terms 1x, 2x, and 3x refer to scaling factors for icon assets relative to a baseline size. A 1x icon is the standard resolution. A 2x icon has twice the width and height (four times the total pixels) of the 1x version, designed for Retina or high-density displays. A 3x icon has three times the width and height (nine times the total pixels), for even higher density screens like Super Retina displays on modern iPhones.

What is the role of vector graphics in icon scaling?

Vector graphics are ideal for icon scaling because they are defined by mathematical paths rather than pixels. This allows them to be scaled up or down to any size without losing quality or becoming pixelated, unlike raster images. Designing icons in vector formats like SVG or Adobe Illustrator files simplifies the process of generating multiple resolution-dependent assets, ensuring crisp visuals on all screens.