How to add icons to React Native app

Question

I am making a React Native app  I would like to customize the app icon  meaning the icon that you click on to start the app   I have Googled this  but I keep finding different types of icons that refer to different things  How do I add these types of icons to the app

User · Answer

I would like to suggest to use react-native-vector-icons to import icons to your project. As you use vector icons, you don't need to worry much on icon scaling side. While using the package you are able to use all popular icon set such as fontawesome, ionicons etc..

Besides these iconsets you can also bring your own icons too to your react-native project by packing your icons as a ttf file and you can import that ttf directly to both android and ios project. You can utilise the same react-native-vector-icons library to manage those icons

Here is a detailed procedure to setup custom icons

https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c

User · Answer

I wrote a generator to automatically generate icons for your react native app from a single icon file  It generates your assets and it also adds them correctly to your ios and android project   Update  04 09 2019   We revamped our generator to be up to date with the ecosystem standards  You can now use  bam tech react-native-make    You can install it using  yarn add  bam tech react-native-make in the react-native project  To use it react-native set-icon --path  lt path to png gt  --background  lt icon background color gt  --platform  lt android ios gt   And    that s it  Hope it can be useful for others     Recommendations    1024x1024 base image No transparent background for iOS An icon which follows adaptive icons guidelines for Android   Here are some improvements over the previous tool     No Yeoman dependency  it is now a react-native-cli plugin No Image Magick dependency Creates Adaptive icons for Android Adds missing icons sizes for iOS

User · Answer

This is helpful for people struggling to find better site to generate icons and splashscreen   Make App Icon  useful for both android and ios  APE tools  useful for both android and ios  Icon set creator  useful for ios only  Andoid Asset Studio useful for android only   recommended

User · Answer

You can import react-native-elements and use the font-awesome icons to your react native app  Install   npm install --save react-native-elements   then import that where you want to use icons  import   Icon   from  react-native-elements    Use it like  render        return       lt Icon       reverse       name  ios-american-football        type  ionicon        color   517fa4        gt

User · Answer

If you re using expo just place an 1024 x 1024 png file in your project and  add an icon property to your app json i e   icon      src assets icon png   https   docs expo io versions latest guides app-icons

User · Answer

I was able to add an app icon to my react-native android project by following this guy s advice and using Android Asset Studio  Here it is  transcribed in case the link goes dead   How to upload an Application Icon in React-Native Android  1  Upload your image to Android Asset Studio   Pick whatever effects you   d like to apply  The tool generates a zip file for you  Click Download  Zip   2  Unzip the file on your machine  Then drag over the images you want to your  android app src main res  folder  Make sure to put each image in the right subfolder mipmap- hdpi  mdpi  xhdpi  xxhdpi  xxxhdpi      3  Do not  as I originally did  naively drag and drop the whole folder over your res folder  As you may be removing your  res values  strings styles  xml files altogether

User · Answer

Coming in a bit late here but Android Studio has a very handy icon asset wizard  Its very self explanatory but has a few handy effects and its built right in

User · Answer

Someone made a very easy to use tool just for this task  https   www npmjs com package app-icon      This simple tool allows you to create a single icon in your react-native project  then create icons of all required sizes from it  It currently works for iOS and Android    I ve used it  Made a 512x512 png and then ran that tool and boom  done  Super easy

User · Answer

iOS Icons   Set AppIcon in Images xcassets  Add 9 different size icons    29pt 29pt 2 29pt 3 40pt 2 40pt 3 57pt 57pt 2 60pt 2 60pt 3     Images xcassets will look like this     Android Icons   Put ic launcher png in folders  ProjectDirectory  android app src main res mipmap-      72 72 ic launcher png in mipmap-hdpi  48 48 ic launcher png in mipmap-mdpi  96 96 ic launcher png in mipmap-xhdpi  144 144 ic launcher png in mipmap-xxhdpi  192 192 ic launcher png in mipmap-xxxhdpi     Update 2019 Android  The latest versions of react native also supports round icon  For this particular case  you have two choices   A  Add round icons  In each mipmap folder  add additionally to the ic launcher png file also a round version called ic launcher round png with the same size   B  Remove round icons  Inside yourProjectFolder android app src main AndroidManifest xml remove the line android roundIcon   mipmap ic launcher round and save it   Otherwhise the build throws an error

User · Answer

I would use a service to scale the icon correctly  http   makeappicon com  seems good  Use a image on the larger size as scaling up a smaller image can lead to the larger icons being pixelated  That site will give you sizes for both iOS and Android   From there its just a matter of setting the icon like you would a regular native app   https   help apple com xcode mac 8 0   dev10510b1f7  Set icon for Android application

User · Answer

You ll need different sized icons for iOS and Android  like Rockvic said  In addition  I recommend this site for generating different sized icons if anybody is interested  You don t need to download anything and it works perfectly   https   resizeappicon com   Hope it helps

[icons] How to add icons to React Native app

Examples related to icons

Examples related to react-native