Change the App Icon for React Native Apps on iOS

Chris Achard
InstructorChris Achard

Share this video with your friends

Send Tweet
Published 3 years ago
Updated a year ago

We’ll replace the default App Icon on iOS with a custom app icon image.

Instructor: [00:00] From the root of the project, open the iOS folder. Then open the Xcode project. Find and select the images.xcassets entry in the file tree.

[00:11] Select AppIcon, which should already exist. If it doesn't already exist, you can create it by right-clicking, then select App Icons & Launch Images, and then New iOS App Icon.

[00:24] You'll have to have an icon for each size here, and Xcode tells you what the size needs to be. For example, the iPhone Notification icon says 20 pt. It has entries for 2x and 3x. The 2x icon will be 40x40 pixels. The 3x icon will be 60x60 pixels.

[00:43] I have a directory here with these icons pre-made with the Ionicons pizza icon. We can just drag each icon into the appropriate image box.

[00:56] Back in the iOS simulator, first uninstall the app and then rerun with react-native run-ios. After it launches, we can press the Home button with Command-Shift-H to close the app. Then we can see the new icon.