Design and Add a Custom App Icon with Figma to Your React Native iOS App
How to create an app icon from scratch, generate the required sizes, and add to your iOS app.
Image editing - Figma is a free online design tool used in the video. You can use any design tool you like, such as Photoshop, Sketch etc, as long as the output is a 1024x1024 .png image.
Asset generator - Iconizer is a free mac app for generating the correct sized assets from your icon.
Kadi Kraman: [0:00] Here's a weather app I built that shows the current weather in London. It doesn't currently have an app icon, so we see a default image. For an iOS app, the quickest way to edit this is via Xcode. Once you open Xcode, navigate to the app icon assets in the Images directory.
[0:20] The app icon is a special kind of assets, and in here, you can see the different kind of resolutions you need to provide the image in. To create the icon, use any image editing tool. I use Figma, which is free and available online.
[0:36] First, grab the rectangle tool and create a rectangle of any size. Then change the width and height of this rectangle to 1024px, which is the optimal size for app icons for iOS. Next, design your icon. I'm going to use an SVG I already downloaded earlier. You can import images to Figma just by dragging and dropping them into the browser.
[0:58] When resizing images, you can hold shift in Figma while dragging to make sure you maintain the aspect ratio of the picture.
[1:06] Because I used an SVG here, I can also tweak the colors. I'm going to copy the color for the cloud and use it for the background instead. Then I'm going to make the sun a little bit brighter. When you're happy with how your icon looks, hit the Export button and export the icon as a PNG.
[1:26] To generate all the different sizes of the icons required, I'm going to use iconizer, which is a markup you can download for free. Once you've opened iconizer, select all the platforms you want to generate the icons for, then drag and drop the icon you generated earlier into iconizer. Finally, hit the export button and save the generated assets.
[1:46] Inspecting the generated folder, you can see that the icon sizes match those that are required by Xcode. From then it's again a drag and drop. You can drag and drop the correct size icon into the correct boxes in Xcode.
[2:01] If you're running your app on a simulator, now's a good time to close the simulator altogether to get rid of any cached versions of the previous app icons.
[2:09] Finally, rebuild the native app from Xcode. If you're using React Native, you can also do this by running react-native run-ios. Now when we launch the app, we can see that the default app icon has been replaced with our custom one.