15: macOS Icon Design: HIG Rules, Rounded Corners & Retina Quality

#webdev #programming #opensource #learning

macOS application icons occupy a special place in the history of digital design. Apple's Human Interface Guidelines for Mac icons have consistently been some of the most detailed and aesthetically ambitious icon standards in the industry. macOS icons are expected to look like polished, three-dimensional objects — not flat geometric shapes — with depth, highlights, shadows, and a sense of material quality that communicates craftsmanship.

This aesthetic philosophy, sometimes called "skeuomorphism" in its most extreme form, evolved through the years of macOS design. Today's macOS icons under Apple Silicon represent a matured version: they use the rounded-rectangle "squircle" shape, embrace a tilted perspective presentation (approximately 15 degrees), and use rich gradients, subtle shadows, and material-like textures. Meeting this aesthetic standard while maintaining technical correctness is the dual challenge of macOS icon creation.

The macOS Icon Shape: The Squircle

macOS does not apply automatic masking to app icons the way iOS does. Instead, the macOS HIG specifies that app icons should themselves be shaped as a rounded square with specific corner radii that Apple calls a "squircle" (a mathematically specific superellipse). Your source artwork must already be shaped correctly — the system will not crop it for you.

The Apple-specified corner radius for macOS app icons is approximately 22% of the icon's total size. For a 1024×1024 pixel source, the corners should have a radius of roughly 225 pixels. This is a precise geometric specification, not an approximation — icons that use the wrong corner radius look visually inconsistent with the macOS system aesthetic when sitting in the Dock alongside other applications.

ICNS Format: Multi-Resolution Container

As discussed in the Electron article, macOS uses the ICNS format for application icons. A properly constructed ICNS file for a modern macOS application should contain the following sizes: 16×16, 16×16@2x (32×32), 32×32, 32×32@2x (64×64), 128×128, 128×128@2x (256×256), 256×256, 256×256@2x (512×512), 512×512, and 512×512@2x (1024×1024). That's 10 separate image assets embedded in one ICNS container file.

Retina Display Considerations

Every modern Mac ships with a Retina display, and the latest MacBook Pro models with ProMotion XDR displays are among the highest pixel density screens ever produced. Any icon that is not properly prepared at Retina resolution will appear noticeably blurry on these displays — a quality signal that immediately undermines user confidence in an application. The @2x variants in the ICNS file are not optional for quality-conscious developers targeting modern macOS.

Iconify generates complete macOS-ready ICNS files with all required sizes and Retina variants. The squircle shape customization controls in the app allow precise corner radius adjustment. Learn more at iconify.roboticela.com.