CODEWITHSUNDEEP
iconsreact-native
Adam Katz
Adam Katz

Reputation: 6962

How to add icons to React Native app

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?

Upvotes: 360

Views: 247110

Answers (18)

Oktay Şenkan
Oktay Şenkan

Reputation: 54

I recommend to Monicon in 2025, it's deal great developer experience

Local Collections in Monicon allow you to use icons stored locally on your file system. These collections can be loaded using the loadLocalCollection function, which points to the directory containing your SVG files. This setup is ideal for projects where icons are managed locally, providing a quick and flexible way to integrate custom icon sets.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import monicon from "@monicon/vite";
import { loadLocalCollection } from "@monicon/loader";

export default defineConfig({
  plugins: [
    react(),
    monicon({
      customCollections: {
        local: loadLocalCollection("assets/icons"),
      },
    }),
  ],
});

Example Directory Structure

For the above configuration, your assets/icons directory might look like this:

assets/
└── icons/
    ├── folder.svg
    ├── user.svg
    └── network.svg

Each SVG file in the directory is automatically assigned a name based on its filename (e.g., folder for folder.svg).

Usage

You can now use Monicon in your React components. Here’s an example of how to use an icon from your local collection in a React component:

import { Monicon } from "@monicon/react";

function App() {
  return (
    <main>
      <Monicon name="local:folder" size={24} />
      <Monicon name="local:user" size={24} />
      <Monicon name="local:network" size={24} />
    </main>
  );
}

export default App;

Upvotes: -1

Alfaiz Khan
Alfaiz Khan

Reputation: 175

Steps Android App icons: Go to this website https://appicon.co/

  1. Add image their and generate icons, it should be downloaded

  2. Unzip the folder

  3. Inside their copy all the folders in AppIcons/android/ (i.e. Folder names: mipmap-xxxhdpi,mipmap-xxhdpi,mipmap-xhdpi,mipmap-hdpi,mipmap-mdpi)

  4. paste above copied folders into {rootFolder}/android/app/src/main/res/ and replace existing ones

  5. Remove this line from AndroidManifest.xml
    (android:roundIcon="@mipmap/ic_launcher_round")

Icons are successfully added

Change IOS App icons: Go to this website https://appicon.co/

  1. Add image their and generate icons, it should be downloaded

  2. Unzip the folder

  3. Inside their copy all the folders in AppIcons/Assets.xcassets/ (i.e. AppIcon.appiconset folder)

  4. paste the AppIcon.appiconset folder into {rootFolder}/ios/{projectname}/Images.xcassets/ and replace existing one

Icons are successfully added

Upvotes: 8

martiliones
martiliones

Reputation: 294

Update 2022

Since the Almouro's Answer is no longer maintained

Android and iOS icon

You can now generate icons with one command both for iOS and Android with rounded icon:

npx icon-set-creator create ./path/to/icon.png

I highly recommend using an icon with a size of at least 1024x1024 pixels

Adaptive Android icon

npx icon-set-creator create -b <background> -f <foreground> -A

background - The color (E.g. "#ffffff") or image asset (E.g. "assets/images/christmas-background.png")

foreground - The image asset (E.g. "assets/images/christmas-foreground.png")

Upvotes: 13

cetric
cetric

Reputation: 211

Use this library to make your work easier. It will automate your Icon generation process

https://www.npmjs.com/package/@bam.tech/react-native-make

Upvotes: 1

Awshaf Ishtiaque
Awshaf Ishtiaque

Reputation: 961

For setting the App launch icon for Android Devices in a React-Native project:

  • Take a high resolution image of your logo and place it inside your project directory. Preferably in [Project-DIR]/android/app/src/main/res/
  • Open Android Studio and run your React-native project.
  • In Android Studio's Project window, select the Android view
  • Right-click the res folder and select New > Image Asset
  • A "Configure Image Asset" window will open; Locate your high resolution image and place set it as your "Foreground layer".
  • Set your "Background Layer" if applicable
  • Click "Next" and continue to finish.
  • Run your application again to see the new app launch icon.

Official documentation can be found here: https://developer.android.com/studio/write/image-asset-studio

Upvotes: 3

Snehendu Roy
Snehendu Roy

Reputation: 108

To import icons on React Native if you want the icons without having the pictures, then react-native-vector-icons would be the best one. You can use it if you don't want to download the icons and use it in your project.

Upvotes: -1

Ryan Knell
Ryan Knell

Reputation: 6332

Android Studio has a very handy icon asset wizard called Image Asset Studio (user guide here). It's quite self explainatory, and has a few handy effects and it's built right in:

enter image description here

Screenshot from Android Studio 4.1.3 on Windows 10 enter image description here

Upvotes: 14

Vishesh Gupta
Vishesh Gupta

Reputation: 175

I personally use this link to generate my desired icons https://appicon.co/

And for importing inside the application.

For IOS Setup

Click on your project from Xcode ==>

then on the left side you will see your click on that ==>

Now you will see subfile name Images.xcassets click on that ==>

you icons size will be displayed on the right hand window ==>

simply drag and drop the icons which we have generated from https://appicon.co/ ==>

and your IOS ICON SETUP IS DONE.

Moving to Android

We will go to Android ==> app ==> src ==> main ==> res

Here you will various folders named mipmap-hdpi till xxxhdpi ==>

Drag the icons from the specific folder to your project specific folder. Happy coding!

Upvotes: -1

Almouro
Almouro

Reputation: 6524

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 <path_to_png> --background <icon_background_color> --platform <android|ios>

And... that's it! Hope it can be useful for others :)

Recommendations:

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

Upvotes: 353

Redmen Ishab
Redmen Ishab

Reputation: 2339

This is helpful for people struggling to find better site to generate icons and splashscreen

Upvotes: 8

Rockvic
Rockvic

Reputation: 5434

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.

Upvotes: 541

rmevans9
rmevans9

Reputation: 5643

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

Upvotes: 35

Ramon Schmitt
Ramon Schmitt

Reputation: 116

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

Upvotes: 2

jcollum
jcollum

Reputation: 46607

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.

Upvotes: 13

uday
uday

Reputation: 13

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(
    <Icon
      reverse
      name='ios-american-football'
      type='ionicon'
      color='#517fa4'
    />
 );
}

Upvotes: -10

Manzoor Samad
Manzoor Samad

Reputation: 929

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

Upvotes: -4

jakobinn
jakobinn

Reputation: 2032

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.

Upvotes: 8

mixophrygian
mixophrygian

Reputation: 659

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}.

android/app/src/main/res

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.

Upvotes: 28

Related Questions