macOS prefs tab icons are 27×27pt

When designing icons, knowing the final size they’ll be displayed can drastically improve rendering quality, because it allows points to be snapped to pixel boundaries.

When the elements of an icon are not snapped to pixel boundaries, they look blurry. It can also mean lines appear to be different weights, and cause other detail loss. It’s less of an issue with higher density displays, but it it still matters. The General tab icon in the macOS Finder preferences suffers from this issue. It’s especially noticable on the top and right side.

macOS Finder preferences, showing the general tab icon

I believe macOS Big Sur changed the prefs tab icon size, and because of that, most Mac apps now have blurry icons. I was unable to find a size in the macOS Human Interface Guidelines, but dropping a solid image into your Xcode project reveals the full image area for the asset. In this case, it’s 54×54 pixels on a Retina display, which means prefs tab icon assets need to be exactly 27×27pt to render sharply. Please note that the icons themselves are only around 22×22pt, with the additional space just being padding.

A preferences tab icon that’s just a solid square

The same technique can be used to work out the asset size required for tool bar icons, tab bar icons and other icons.

Published 23 July 2021.