To run the icon generator, we are going to use npx to download and run the necessary script files as follows: We are going to use it to generate our iOS icons. Once the icon sizes have been produced, they need to be imported to Xcode as an asset catalog.Ĭreating each icon size manually is tedious and error prone, but thankfully there is an open source project which takes care of all of this: app-icon. You can find a reference of every app icon size at the Apple Human Interface Guidelines. IOS uses many different icon sizes for the various different devices. To follow along with this post, download the iOS and Android icons, and place them in the project root. Designing and creating the icon asset is out of the scope of this post, but when creating your icon ensure you produce two variants as described above, and make them 1024px square. I’ve decided to use the boat Material Design icon, which will be displayed on our blue background. An Android version with a transparent background.An iOS version with a full colour background.

The first step is to generate a png file which contains the app icon. React Native automatically assigns the app title according to the name that we used when scaffolding the project, but we must create the app icon ourselves. Both platforms display a list of apps, each represented with an app icon and a title. Mobile apps are launched from the device’s home screen (iOS) or launcher (Android). It’s time to turn our attention to delivering the app to our users, beginning with the app icon. In part 4, we finished the development of our app, adding some polish to the UI. If you haven’t already done so, it’s worth starting from the beginning of the series.

Note: this is part 5 of a series of posts, aimed at building a React Native app from the ground up.

Android studio icon creator