I was recently tasked with adding app icons to the React Native app we are currently building. I found myself jumping around to a bunch of different places trying to find all of the information I needed, so I decided to put it all in one place

Image for post
Image for post
Photo by Rami Al-zayat on Unsplash.

Step 1: iOS icons

We’re not going to waste our time making a million different icon images ourselves, so go ahead and download Icon Set Creator.

Image for post
Image for post

Drag a 1024x1024 version of your icon onto the application and hit Go (the default platform is iOS so you should be good to go here).

Image for post
Image for post
Icon Set Creator will give you a folder with all of the necessary icon sizes.

Now that you have all of your icons, open up your project in Xcode. In the main project folder, you’ll find a folder called Images.xcassets and a file called AppIcon.

Image for post
Image for post
*Main-Project-Folder* > Images.xcassets > AppIcon

Here you’ll see placeholders for icons in your app. If you want to add iPad or CarPlay icons you can hit the button on the top right corner, Show the Attributes Inspector, to reveal more options. …

About

Scott Stewart

Software Engineer/Designer @formidable

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store