Guides and Sample Code


macOS Human Interface Guidelines


Sidebar Icons

If your app includes a sidebar (or source list), you may need to design icons to display in it. For example, Mail contains several icons that represent the user’s mailboxes, VIPs, and archived messages.

image: ../Art/sidebar_icons_2x.png

Sidebar icons are small and streamlined, but they provide more internal detail and a more realistic outline than the icons that go inside of toolbar controls (to learn more about designing this type of toolbar control, see Create Template Images to Put Inside Toolbar Controls). To achieve the sidebar item look, try imagining an X-ray of the object you have in mind, then use transparency to capture the details.

As with the template images that can be used inside toolbar controls, macOS applies various effects to sidebar icons. Follow these guidelines as you design your sidebar icons:

  • Use black combined with transparency (that is, alpha values) to suggest details.

  • Make the outline sharp and clear.

  • Use a straight-on perspective.

  • PDF format is recommended.

  • Create your icons in three sizes: 16 x 16, 18 x 18, and 32 x 32 pixels (if using PDF).

If you create your sidebar icons in PDF format, macOS automatically scales your icon for high-resolution displays, so you don't need to provide high-resolution versions. However, if you use PNG format for your icons, you need to supply the following resources: 16x16, 16x16@2x, 18x18, 18x18@2x, 32x32, and 32x32@2x. (PNG format is recommended only for designs that are very intricate and require effects like shading, textures, and highlights.)