Apple's macOS 11 Big Sur Adopts iOS Icon Mask Shape for App Icons
Chris Heath 
MacOS 11 adopts a lot from iOS and iPadOS including the rounded icon square and Apple's icon grid.
macOS Big Sur brings a stunning new design to the Mac. Well, it’s new to the Mac, but not entirely new to Apple devices. MacOS 11 adopts a lot from iOS and iPadOS including the rounded icon square and the icon grid.
While some might argue that the geometry behind the new macOS icons has changed, it hasn’t. The grid system used for iOS, iPadOS and watchOS was used for the previous iteration of macOS X icons.
Below shows the iOS icon grid as a starting point for building the macOS X tilted/oblique icon grid. With just geometry (using a pair of compasses and straight edge), the grid system that draws on the golden ratio, root-two ratio and root-three ratio can be used to create a range of related icon grids.
There is an important distinction to made between the icon grid that Apple released to the world in 2013 at the WWDC, and the grid system that was mentioned at the same time. The grid and the grid system are not the same thing. The grid system is used to create a variety of grids, and it is not unique to Apple. I have been studying and using this grid system since the mid to late 1980’s. At first glance it’s easy to see that not all Apple’s icons align perfectly with the iOS icon grid. However, it’s not too difficult to show how the grid system can be used to compose many of Apple’s icons, that is, to guide the size and location of all the design elements in the icon.
I do recall when watching the WWDC Live keynote seeing the iOS icon grid applied during an animation to the macOS 11 icons. Sadly, it looks like this segment of the keynote has been removed. I have not been able to find it since.
The one big difference between iOS/iPadOS icons and macOS 11 icons is the macos 11 icons retain transparency, that is, you can still apply an alpha channel to the icon. Drop shadows can be applied, and 3D elements can be used as before. At least, that’s how it appears given that design elements, including shadows can extend beyond the rounded square’s edge.
In iOS and iPadOS, the rounded square is a mandatory mask that is applied to every app icon by Apple. In macOS 11, the rounded square is just another design element and not a mask. This makes sense given existing third-party macOS X apps need to continue to run in macOS 11 for years to come.
I’m looking forward to exploring macOS 11, and a new Apple Silicon Mac when it is released. In particular, I’m looking forward to performing a geometric analysis on the new macOS11 icons.
What’s your take on macOS 11 and its new look?
Categories: Design Graphics, Geometry, Icon Design