Thanks to the popularity of the iPhone UI Icon Set, I was inspired to create a set for Mac desktop apps. The Mac UI Icon Set consists of 160 icons in sizes: 32x32, 24x24 and 16x16. The set also includes 4 free social media icons: Flickr, Facebook, Twitter and MobileMe.
These icons are designed specifically for use in the Tool Bar and Side Bar objects of Mac desktop applications. Still they can be used in any general media: web, presentations, etc.
Designing Icons on a Baseline
In preparation for this project I spent some time studying the icons used in Apple-designed apps as well as some popular 3rd part apps. I discovered a few differences from the way I’ve designed icons in the past (which unfortunately lead to a redesign of a good number of the icons halfway through the project).
Figure 1: Typical icons aligned on the Y axis.
If you look at most of the popular icon sets available, which are mainly designed for use on the web, their artwork is centered vertically on the Y axis (Figure 1). This ensures that the icons will align horizontally with type, since they are mostly used as an accent for headlines or other large pieces of copy. This alignment helps to associate the icon with the text visually, which is more important that creating the illusion of some surface upon which these icons rest.
Figure 2: Mac icons aligned on a baseline.
The Mac applications icons, however, are placed above a label within an application’s toolbar. While these icons are centered horizontally like most icons, they are aligned vertically to a baseline (Figure 2). This baseline alignment helps to create the illusion, when they are placed next to each other, of a surface on which they are all resting upon in a 3d space. There are exceptions to this rule, and I made a few in the icon set I created, but for the most part this baseline alignment is a very common feature in Mac icon design.
These Icons Need Room to Breathe
Figure 3: Size relationships of icons.
Designing icons on a baseline revealed another difference in Mac icon design; the icon’s artwork is slightly smaller than the icon’s size. They still use standard icon sizes: 32x32, 24x24, and 16x16 but since the icons are all designed on a baseline, they are centered a little more thus leaving more white space around the icons (Figure 3). This allows for extra elements, for example an arrow sitting on top of an email icon, or a plus sign sitting on top of a folder icon, to have some room to exist. This forced me to start a little smaller with the artwork; for 32x32 I started around 27-28px, and for 24x24 I started around 19-20px. While my first instinct was to use every pixel available, approaching the icons in this manner helped to create even sizing across the set.
I thoroughly enjoyed creating these icons and I hope you enjoy using them in your applications. As always, I’d love to see them in the wild so be sure to send me a link to your products page! If you have any questions or requests for icon concepts (in future add-on packs) don’t hesitate to contact me.
Comments Are Closed
Commenting for this item was closed 10 days after it was published.