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
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
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.