Icon Sizing and Scaling Guidelines

Proper sizing ensures icons look crisp and function well across the wide range of devices and contexts where they'll be used. This guide covers sizing principles, common standards, and techniques for maintaining quality at any scale.

Understanding the Base Size

Every icon set should establish a base size—the primary dimension at which icons are designed and from which other sizes derive. Common base sizes include:

24×24 pixels - The most common base size for UI icons
20×20 pixels - Compact interfaces, dense toolbars
16×16 pixels - Small inline icons, legacy systems
32×32 pixels - Feature icons, larger touch targets

Choose a base size that matches your most common use case. Design at this size, then scale and adjust for other sizes as needed.

Standard Icon Sizes

Different contexts require different sizes. Here's a reference for common use cases:

Small Icons (16-20px)

Inline with text (status indicators, bullets)
Dense data tables and lists
Favicons and browser tabs
Small form field indicators

Standard Icons (24-32px)

Navigation bars and menus
Toolbar buttons
Form field icons
Card actions

Medium Icons (40-48px)

Mobile touch targets
Feature highlights
Dashboard widgets
Tab bar icons

Large Icons (64px+)

Empty state illustrations
App icons
Hero sections
Feature explanations

Designing for the Pixel Grid

Raster displays render graphics on pixel grids. Icons that align to this grid look sharper:

Place anchor points on whole pixel coordinates
Use stroke widths that result in whole-pixel edges
Avoid shapes that create half-pixel anti-aliasing
Use your design tool's pixel preview mode

A 1px stroke on a 24px grid looks crisp. A 1.5px stroke can look blurry because edges fall between pixels.

Size-Specific Optimization

Some icons need adjustments at different sizes rather than simple scaling:

Simplify details at small sizes - Remove fine lines and small gaps that disappear
Adjust stroke weight - Strokes may need to be proportionally heavier at small sizes
Modify proportions - Some elements need optical adjustment to read clearly
Increase padding - Small icons may need relatively more breathing room

For icon sets with wide size ranges, consider creating size-specific variants rather than relying solely on scaling.

Touch Target Requirements

Icons used as interactive elements need adequate touch targets:

Apple iOS - Minimum 44×44 points
Google Material - Minimum 48×48 dp
WCAG - Minimum 44×44 CSS pixels for AAA compliance

The icon graphic can be smaller than the touch target. A 24px icon can sit within a 48px tappable area. The key is ensuring users can activate controls without frustration.

Retina and High-DPI Considerations

Modern displays often have 2x or 3x pixel density. Handle this with:

SVG icons - Scale automatically to any resolution
PNG with @2x/@3x variants - Provide 48px for a 24px icon at 2x
CSS media queries - Serve appropriate assets based on device capabilities

SVG eliminates the need for multiple resolution variants, which is one reason it's preferred for web icons.

Responsive Icon Scaling

In responsive layouts, icons may need to scale with their context:

Use relative units (em, rem) for icons that should scale with text
Use viewport units for icons that scale with screen size
Set max/min sizes to prevent icons from becoming too large or small
Consider breakpoint-specific icon sizes for major layout changes

Test icons at extreme viewport sizes to ensure they remain usable.

Maintaining Visual Consistency

Different shapes occupy different visual space even at the same nominal size. A circle fills more of a square canvas than a narrow vertical line. To maintain perceived consistency:

Use consistent optical weight rather than identical dimensions
Apply keylines to normalize circular, square, and rectangular icons
Test icons side by side at actual size
Adjust outliers that appear too large or small

Google's Material Design guidelines include keyline templates that help maintain optical balance.

Platform-Specific Requirements

Different platforms have specific icon size requirements:

Web

Favicon: 16×16, 32×32, plus apple-touch-icon at 180×180
UI icons: Typically 16-48px based on use case

iOS

App icon: 1024×1024 (App Store), various sizes for devices
Tab bar: 25×25 @1x, 50×50 @2x, 75×75 @3x
Toolbar: 22×22 @1x with appropriate scaling

Android

App icon: 48dp baseline, scales up to 192×192 for xxxhdpi
Action bar: 24dp
System icons: 24dp

Windows

ICO files typically contain 16, 32, 48, and 256px versions
Windows 10/11 app tiles have specific size requirements

Testing Sizes in Context

Always test icons at actual size in realistic contexts:

View on actual devices, not just design tool previews
Test in the actual interface, not isolation
Check alignment with text and other elements
Verify touch targets are adequate on mobile
Review at arm's length viewing distance

What looks good zoomed to 400% in a design file may not work at actual size on screen.