Jamie Weavis24 March 2023|~10 min read

How to create an ICNS macOS application icon

Learn how to make an icon for macOS apps using iconset folders and the iconutil command line tool

Creating an app icon is an important step in the development process of any application; the icon represents your application and can often be the first impression that users have of your product.

I recently noticed that a GitHub Gist I posted a few years ago titled "How to create an .icns macOS app icon" got quite a few stars (65 at time of writing) so I decided to write a more in depth blog post on the topic.

In this blog post, we will explore how to create a macOS app icon using native iconsets and iconutil. I'll be using my open-source project Streaker as an example throughout.

What is an iconset?

Iconsets are special folders that contain an icon in various sizes, each of which represents the application icon at a different resolution. These icons are typically in PNG format and are named according to their size, such as icon_16x16.png or icon_512x512@2x.png.

By creating an iconset, you can ensure that your application's icon looks good on all screen sizes and resolutions.

Exporting your icons

Before you can create an iconset you must first export your icon in all of the required sizes. Filenames are case-sensitive and must be named exactly as listed below:

The "@2x" suffix indicates that the image is a high-resolution version for devices with a Retina display. The iconset must contain both standard resolution and high-resolution icons.

Streaker icon in Figma with pre-defined size exports & suffixes for the iconset

Creating an iconset folder

Start by creating a new folder with the name of your application followed by ".iconset". My application is called Streaker so my folder is named "Streaker.iconset". Move the exported icons into your iconset folder.

Finder window showing a Streaker.iconset folder with all required size icons inside

You can verify that your iconset is working by viewing the folder in Quick Look ⌘ + Space and dragging the size slider to preview your icon in different sizes:

Quick Look preview of an iconset folder

Creating an ICNS file

Once you have created the iconset, you can use the iconutil command-line tool to create an ICNS file. The ICNS file is like a container that holds all the icon images at various sizes and resolutions.

Open your terminal and navigate to the folder that contains your iconset folder. Then run the following command, replacing "Streaker" with the name of your application:

iconutil -c icns Streaker.iconset

Finder window showing a Streaker.icns file generated by iconutil

This will create an ICNS file named "Streaker.icns" next to your iconset folder.

Preview window of the generated Streaker.icns file

Using the ICNS file

To use the ICNS file as your application icon, you can simply drag and drop it onto the application's icon in the "Get Info" window from right-clicking an application in Finder. For a more permanent solution you can specify the ICNS file in your application's source code. For Electron based apps the presence of an icon.icns file in src/main/icons will work, don't forget to add an .ico Windows equivalent too! 😉

Streaker application in Finder with the ICNS icon applied

Wrap up

In this blog post, we have explored how to create a macOS app icon using iconsets and iconutil. By following these steps, you can ensure that your application's icon looks good on all screen sizes and resolutions. A well-designed icon can help your application stand out from the competition and create a strong first impression for users.