Icon Size Reference
Get recommended icon sizes for different contexts: UI, mobile, favicons, and app icons.
--icon-xs: 12px;
--icon-sm: 16px;
--icon-md: 20px;
--icon-lg: 24px;
--icon-xl: 32px;
--icon-2xl: 48px;About This Tool
Pick a context — web UI, iOS, Android, favicon, app store — and get the canonical pixel sizes you should export. Each entry lists the dimension, the @1x/@2x/@3x variants where relevant, and the file the platform expects.
Use it as the source of truth before you fire up an export from Figma or Sketch. Saves the round trip of digging through Apple, Google, and PWA manifest docs every time you ship a new icon set.
The sizes match current platform guidance as of the last update. When Apple or Google revs their requirements, the table gets edited and redeployed — older sizes stay listed where they're still valid.
The sizes come straight from the platform vendors' published guidance. Apple's Human Interface Guidelines specify the iOS app icon set down to the @1x notification badge sizes; Google's Material guidelines give Android adaptive icon dimensions in dp; the W3C Web App Manifest spec covers PWA icon arrays; Microsoft documents the Windows tile sizes. The tool collapses all of this into a single lookup so you stop bouncing between four documentation sites every time you ship.
Worked example. You're shipping an iOS app and a PWA from the same brand. Pick "iOS" — the table lists the App Store icon at 1024×1024, the home-screen icons at 60×60 (@1x), 120×120 (@2x), and 180×180 (@3x), the Spotlight icons at 40/80/120, and the settings icons at 29/58/87. Pick "PWA" — the manifest expects 192×192 and 512×512 at minimum, with optional 144, 256, and 384 for tile and splash purposes. Export each from a single 1024×1024 master and you cover both platforms in one pass.
Where this tool stops being enough: badging and adaptive layers. Apple's notification badges have rendering quirks at small sizes; Android adaptive icons require separate foreground and background layers with a 72×72dp safe zone, and the system applies its own mask shape. Neither of those is a pixel-size question — they are about what's inside the pixels. The reference points to the dimensions; the design work belongs in your icon design tool.
A practical opinion: design at 1024×1024 with vector tools (SVG, Figma vectors), export the raster sizes from there. Designing each size separately is how you end up with the 60×60 looking like a different icon than the 180×180. The exception is the favicon at 16×16 — at that size, hand-tuning pixel hinting beats automatic downscaling every time. For favicons, ship a separate 16×16 SVG or PNG with a simplified glyph, not a downscale of your full mark.
Windows is a quieter target than it used to be. The Microsoft Store still wants tile icons at multiple sizes, but the desktop ICO file is mostly a relic. Modern Windows browsers happily consume a single SVG favicon link, same as macOS Safari. Skip the ICO unless your traffic includes meaningful Internet Explorer or legacy enterprise visitors.
The about text and FAQ on this page were drafted with AI assistance and reviewed by a member of the Coherence Daddy team before publishing. See our Content Policy for editorial standards.