[Skip to content](/content/blog/easy-icon-generator-for-react-native/#content/index.html) New icons living happily in XCode A simple Javascript tool for creating, editing, generating and placing all icon assets into a cross-platform React Native project ## Try it out Clone this repo into your project: [https://github.com/animallabs/react\_native\_icon\_generator](https://github.com/animallabs/react_native_icon_generator) In your Xcode project add a blank icon set: Right click in the left column `npm i` `node scripts/make_icons.js` `node scripts/make_icons.js -` for an alternate staging / dev mode icon Edit `project_name` in `scripts/config.js` to reflect the name of your project Like magic, you now have icons * * * Much of our work is in building proof of concept and early stage apps to demonstrate the viability of new products and ideas. With our requirements of speed and multi-platform deployment React Native is the clear choice. When we’re prototyping an app we focus on the core functions and leave most of the extras for another future milestone. Despite this fast-moving approach, I really don’t like to send a deliverable to a client with the icons looking like this: Default iOS icon Default Android icon Unfortunately, and as many of you know, the process of creating these icons is tedious and frustrating. Our projects often have a staging/dev version and a production version generated from the same codebase. When pushing these apps to beta testers it’s really great to provide unique icons to distinguish staging from production. After much tedium and gnashing of teeth, I’ve built what I think is a very slick icon generator using Photoshop and the Sharp JS image processing library. [https://github.com/lovell/sharp](https://github.com/lovell/sharp) Drop this folder into your React Native project in the root directory, run ‘npm install’ or ‘yarn’. Add this line to your package.json file to keep things nice and easy. `“makeIcons”: “node iconGenerator/scripts/make_icons.js”` If all goes according to plan, this script will quickly generate all the icons you need. ## What’s going on in here… ### Photoshop Asset Generator Photoshop includes a [little-known asset generating feature](https://helpx.adobe.com/photoshop/using/generate-assets-layers.html) that I highly recommend. The idea is that by naming a layer or group like this: `1024x1024 master_icon.png` photoshop will automatically generate this .png file at the specified resolution every time the file is saved. If you want to get really advanced you can create text files in your repo like this: `1024x1024 master_icon.png 500x500 master_icon_500.png 200x200 master_icon_200.png 100x100 master_icon_100.png` and paste them into your Photoshop layers to get a variety of sizes. ## Smart Objects Another slightly advanced photoshop technique. Basically, we’ve got two groups in Photoshop that both reference the same “Smart Object”. To edit the master icon, edit this Smart Object. You have two groups in the .psd file, one for exporting the production icon and another for a staging / dev icon. You can add overlays and modifications to the staging layer group in Photoshop and the modifications will not affect the master icon export. ## iOS Method First, the script reads your ‘Contents.json’ file stored in `{project_name}/Images.xcassets/AppIcon.appicon` After parsing out the required sizes from this file, the master icon is copied into \`temp\_output\`, copied and resized to the requisite sizes, and finally, the images and modified Contents.json are dropped into the correct iOS folder locations. XCode should pick up these changes automatically and you’ll see a nice display of your icons. ## Android Method Android is not quite as automated but works well. Dig around in the ‘config.js’ file and you’ll find where the sizes and names are specified. I’ve included the correct format for React Native as of version 0.55.3. Master icon is copied and resized in the working directory ‘temp\_output’ and the generated files and folders are copied deep into the Android hierarchy. Check out `android/app/src/main/res/` to see the results. ## Revisions A slick npm package of this setup would be nice. Just haven’t gotten around to setting all that up. It’s open source and working well enough as is but of course a little annoying and manual to clone directly into the project repo. Of course, this is open source so feel free to pitch in with changes 😉 ## Before you go… If you or your company needs somebody with mobile development chops, come [chat with us](/content/blog/easy-icon-generator-for-react-native/#/index.html). We have React Native developers ready to help you out today. You can stay informed on all of our posts by subscribing at the bottom of this page. Disqus Recommendations We were unable to load Disqus Recommendations. If you are a moderator please see our [troubleshooting guide](https://docs.disqus.com/help/83/). ❮ - 7 years ago AWS or GCP? Learn how Ben Fagin, DevOps Architect at Animal Labs, … - 7 years ago Meet Thomas, our Sr. Front End Developer and favorite Oregonian by far. … - 8 years ago Haven't used Docker before? No problem! Let our team get you started … - 7 years ago How a passion for merging human & machine brought out the coding animal in … ❯ Disqus Comments We were unable to load Disqus. If you are a moderator please see our [troubleshooting guide](https://docs.disqus.com/help/83/). What do you think? 3 Responses Upvote Funny Love Surprised Angry Sad G Start the discussion… Comment ###### Log in with ###### or sign up with Disqus or pick a name ### Disqus is a discussion network - Don't be a jerk or do anything illegal. Everything is easier that way. [Read full terms and conditions](https://docs.disqus.com/kb/terms-and-policies/) This comment platform is hosted by Disqus, Inc. I authorize Disqus and its affiliates to: - Use, sell, and share my information to enable me to use its comment services and for marketing purposes, including cross-context behavioral advertising, as described in our [Terms of Service](https://help.disqus.com/customer/portal/articles/466260-terms-of-service) and [Privacy Policy](https://disqus.com/privacy-policy), including supplementing that information with other data about me, such as my browsing and location data. - Contact me or enable others to contact me by email with offers for goods or services - Process any sensitive personal information that I submit in a comment. See our [Privacy Policy](https://disqus.com/privacy-policy) for more information Acknowledge I am 18 or older - [Favorite this discussion](https://disqus.com/embed/comments/?base=default&f=animallabs&t_i=115%20http%3A%2F%2Fanimallabs.co%2F%3Fp%3D115&t_u=https%3A%2F%2Fwww.animallabs.co%2Fblog%2Feasy-icon-generator-for-react-native&t_e=Easy%20Icon%20Generator%20For%20React%20Native&t_d=Easy%20Icon%20Generator%20For%20React%20Native&t_t=Easy%20Icon%20Generator%20For%20React%20Native&s_o=default# "Favorite this discussion") - ## Discussion Favorited! Favoriting means this is a discussion worth sharing. It gets shared to your followers' Disqus feeds, and gives the creator kudos! [Find More Discussions](https://disqus.com/home/?utm_source=disqus_embed&utm_content=recommend_btn) [Share](https://disqus.com/embed/comments/?base=default&f=animallabs&t_i=115%20http%3A%2F%2Fanimallabs.co%2F%3Fp%3D115&t_u=https%3A%2F%2Fwww.animallabs.co%2Fblog%2Feasy-icon-generator-for-react-native&t_e=Easy%20Icon%20Generator%20For%20React%20Native&t_d=Easy%20Icon%20Generator%20For%20React%20Native&t_t=Easy%20Icon%20Generator%20For%20React%20Native&s_o=default#) - Tweet this discussion - Share this discussion on Facebook - Share this discussion via email - Copy link to discussion - [Best](https://disqus.com/embed/comments/?base=default&f=animallabs&t_i=115%20http%3A%2F%2Fanimallabs.co%2F%3Fp%3D115&t_u=https%3A%2F%2Fwww.animallabs.co%2Fblog%2Feasy-icon-generator-for-react-native&t_e=Easy%20Icon%20Generator%20For%20React%20Native&t_d=Easy%20Icon%20Generator%20For%20React%20Native&t_t=Easy%20Icon%20Generator%20For%20React%20Native&s_o=default#) - [Newest](https://disqus.com/embed/comments/?base=default&f=animallabs&t_i=115%20http%3A%2F%2Fanimallabs.co%2F%3Fp%3D115&t_u=https%3A%2F%2Fwww.animallabs.co%2Fblog%2Feasy-icon-generator-for-react-native&t_e=Easy%20Icon%20Generator%20For%20React%20Native&t_d=Easy%20Icon%20Generator%20For%20React%20Native&t_t=Easy%20Icon%20Generator%20For%20React%20Native&s_o=default#) - [Oldest](https://disqus.com/embed/comments/?base=default&f=animallabs&t_i=115%20http%3A%2F%2Fanimallabs.co%2F%3Fp%3D115&t_u=https%3A%2F%2Fwww.animallabs.co%2Fblog%2Feasy-icon-generator-for-react-native&t_e=Easy%20Icon%20Generator%20For%20React%20Native&t_d=Easy%20Icon%20Generator%20For%20React%20Native&t_t=Easy%20Icon%20Generator%20For%20React%20Native&s_o=default#) Be the first to comment. [Load more comments](https://disqus.com/embed/comments/?base=default&f=animallabs&t_i=115%20http%3A%2F%2Fanimallabs.co%2F%3Fp%3D115&t_u=https%3A%2F%2Fwww.animallabs.co%2Fblog%2Feasy-icon-generator-for-react-native&t_e=Easy%20Icon%20Generator%20For%20React%20Native&t_d=Easy%20Icon%20Generator%20For%20React%20Native&t_t=Easy%20Icon%20Generator%20For%20React%20Native&s_o=default#) live.rezync.com # live.rezync.com is blocked This page has been blocked by an extension - Try disabling your extensions. ERR\_BLOCKED\_BY\_CLIENT Reload This page has been blocked by an extension pippio.com # pippio.com is blocked This page has been blocked by an extension - Try disabling your extensions. ERR\_BLOCKED\_BY\_CLIENT Reload This page has been blocked by an extension Copyright © 2018 Animal Labs LLC. All rights reserved. Drift Widget Processing... please wait Drift Widget