React-native-vector-icons: Icons are not showing up

[amang8662]

I am using react native 0.52 and react-native-vector-icon 4.5.0 on Android device . I tried to display icons on my screen but It isn't showing me any icon but a X box icon every time. I even tried other keys but still no solution. I also ran command react-native link.
My android/app/src/main/assets/fonts contains all the fonts.

import Icon from 'react-native-vector-icons/FontAwesome'; ... return <Icon name='rocket' size={30} color='#900' />

[MoOx]

Did you re-run-android? Otherwise fonts are not in the bundle, which lead to this problem...

[amang8662]

Yeah I deleted old build files and re-run android.
I also got this error which I resolved earlier #627 . Does this have to do something regarding the display of icons??

[PeterKottas]

+1 on this. I encountered pretty much the same problem on
"react-native": "0.53.3"
and
"react-native-vector-icons": "4.5.0"

[PeterKottas]

Ok this is weird, it apparently got linked twice ... I had to manually fix some stuff and then clean and rebuild the project. Works for me now though.

[amang8662]

@PeterKottas how did you fix it?

[PeterKottas]

I searched the whole solution for react-native-vector-icons (without dashes as well) and found a few places where it was added twice. Not sure how that happened. Some problem with linking I assume

[amang8662]

Can you provide me some reference as to where should I look for??

[MoOx]

See https://github.com/oblador/react-native-vector-icons#android
Please reopen if you have a way to reproduce in a project we can see.

[amang8662]

Finally started working. I had to re-run the app once using USB cable rather than on wifi.

[PeterKottas]

Yep that's mobile dev for you. Problems are solved by restarting everything half of the time.

[Hideer]

@amang8662 I have the same problem. can you help me ?!

[amang8662]

@Hideer sorry for the delay. Exactly What problem are you facing??

[MiguelApp]

I solved my issue adding on /app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
and then I uninstall the app from my phone and reinstall again.

[flodu25]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" 👍👍👍 is found

[hpelitebook745G2]

@MiguelApp how about for iOS?

[hanssonfredrik]

@hpelitebook745G2 try to relink it with react-native link react-native-vector-icons, it worked for me.

[suprabhasupi]

For IOS there are two steps:-

1. Drag the folder Fonts from "node_modules/react-native-vector-icons" and paste it into Xcode project root also make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder.

1. Edit Info.plist(which is under \) and add a property called Fonts provided by application and type in the files you just added. (in items column )
   E.g:- Ionicons.ttf

[radjivF]

I cannot make the icomoon generated icon on android too, Im starting to get depressed

[dklt]

Confirming there are _duplicate .ttf in XCode project_, causing some icon not displaying... Suprabhasupi suggestion helps fixed my problem for iOS

[ergb]

Update gradle in android... it will works..

[radjivF]

@ergb hey mate, I have updated gradle to 4.4+, but still no icons

[ergb]

After update use MaterialIcon.. It works for me.. Do 1 more thing.. Open project in android studio.. Then check if any error is there.. If not then try to build and check

[radjivF]

@ergb Im using customIcon with Icomoon not material :'(

[webdevfarhan]

In my case there was no problem, i didn't read the documentation properly and thought that it will work like <Icon name="newIconName"></Icon> but it is mentioned that to use icons we need to do like this :

import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)

[atultiwari1996]

I solve issue using apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" this line paste into android/app/build.gradle(app). then re-run android.

[SalmanCorleone]

Those still facing the problem,

1. Connect the device with USB (if you were debugging with wifi)
2. Rebuild with run-android

It took me 2 days to get over this one.

[dennisschneider]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
somehow did not work for me ... I copied the contents in the Fonts folder to android/app/src/main/assets/fonts (note lowercase font folder) manually.

[bbb159]

After following all the instruction in the github the icons was still like a box. I solved the problem by executing react-native link.

[deepakaggarwal7]

The recommended approach is to use the gradle way.

I followed the steps as mentioned:
1) installed npm with --save
2) copied the _apply from_ line in android/build.gradle
3) Used it by referencing as mentioned

It showed me a [X] icon for Android (iOS works fine).

Then I tried react-native link command. It solves the issue but it contradicts the recommendation itself. What it does is, it copies the font in the asset folder. But isn't that what document says as less preferred option (so that npm updates ensure font in sync).

Infact, at the bottom, the solution to solve [X] problem mentioned is to copy the font manually.

Q. Why does apply from works for some anod not for others?

[anvt96]

I still have [X] icon for Android. I using but not working. I import FontAwesome, {Icons} from react-native-fontawesome. Give me solutions :(((((

[webdevfarhan]

I still have [X] icon for Android. I using

Check if you are missing anything :
check install instructions. Then use it like this :
import EntypoIcon from 'react-native-vector-icons/Entypo';
Similarly import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
const FacebookIcon = <EntypoIcon name="facebook" size={30} color="#3B5998" />;
then in render method use it like this : {FacebookIcon}
Also before checking run react-native link and react-native run-android

[anvt96]

I still have [X] icon for Android. I using

Check if you are missing anything :
check install instructions. Then use it like this :
import EntypoIcon from 'react-native-vector-icons/Entypo';
Similarly import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
const FacebookIcon = <EntypoIcon name="facebook" size={30} color="#3B5998" />;
then in render method use it like this : {FacebookIcon}
Also before checking run react-native link and react-native run-android

I can't change code, that's code of company, just solution is add library or fonts :( so I can't do that. If possible, you can using teamview with me

[webdevfarhan]

I still have [X] icon for Android. I using

Check if you are missing anything :
check install instructions. Then use it like this :
import EntypoIcon from 'react-native-vector-icons/Entypo';
Similarly import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
const FacebookIcon = <EntypoIcon name="facebook" size={30} color="#3B5998" />;
then in render method use it like this : {FacebookIcon}
Also before checking run react-native link and react-native run-android

I can't change code, that's code of company, just solution is add library or fonts :( so I can't do that. If possible, you can using teamview with me

Sorry mate, i am also working so i can't help you with teamviewer, if you cannot change code then i suggest you to create a new react native project and try to make those icons work there then you will understand the problem and its solution.

[Symyon]

In my case what helped is setting Minify flag in Android for "false":

[rfenzo]

After following all the instruction in the github the icons was still like a box. I solved the problem by executing react-native link.

You saved my day, thank you!

[iksent]

For some reason apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" didn't work for me, but copying fonts manually worked...

[chrisbianca]

Just submitted #923 to fix this issue

[german970814]

Icons are not showing when using icomoon :(

[emmaroland32]

Icon are not showing when using drawer Icon,

static navigatonOptions = {

  drawerIcon: ({tintColor}) => (
      <Icon name="home" style={{fontSize:24, color: tintColor}} />
    )

}

[Roshwin]

@MoOx thanks, this worked for me.

[martnst]

fixed for me: yarn upgrade react-native-vector-icons

[YajanaRao]

How to use react native vector icons without linking in react native 0.60. I Installed version 6.6.0 and executed without linking but Icons did not show up.

[tomchomiak]

At this moment, auto linking for react-native-vector-icons in react native 0.60 isn't working. You can move the fonts manually or here's another solution that worked for me:

1.) Uninstall react-native-vector-icons using npm or yarn

npm uninstall react-native-vector-icons --save

2.) cd into your ios folder and rerun pod install

cd ios
pod install
cd ../

3.) Reinstall react-native-vector-icons using npm or yarn and link the icons manually

npm install react-native-vector-icons --save
react-native link react-native-vector-icons

4.) Restart your simulators for good measure and rerun your app

react-native run-ios
react-native run-android

[anfalch6]

After following all the instruction in the github the icons was still like a box. I solved the problem by executing react-native link.

|Thankyou @bbb159 it worked.

[nadernt]

If you are using registerComponent instead of registerRootComponent in Expo then here https://github.com/expo/vector-icons/issues/89#issuecomment-475217923 is the solution.

[libertron]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
for react 60

[Deboracgs]

I solved my issue adding on /app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
and then I uninstall the app from my phone and reinstall again.

It's works in "react-native": "0.61.2"

[eugenioduarte]

worked for me doing:
react-native link react-native-vector-icons

[orsospatrick]

@hpelitebook745G2 try to relink it with react-native link react-native-vector-icons, it worked for me.
Thanks, WORKED FOR ME.

[aqeebimtiaz]

@hpelitebook745G2 try to relink it with react-native link react-native-vector-icons, it worked for me.

This worked for me, Unlinked & then Linked the package again.

[diogopereira5]

worked this:
react-native link react-native-vector-icons

[haratmalli]

yarn remove react-native-vector-icons
then in android/app/build.gradle add code below code
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle");
above other 'apply' line code
and then reinstall app by using USB.

[beniman8]

yarn remove react-native-vector-icons
then in android/app/build.gradle add code below code
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle");
above other 'apply' line code
and then reinstall app by using USB.

This worked for me, thanks

[sonivipul89]

I solved my issue adding on /app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
and then I uninstall the app from my phone and reinstall again.

it work's for me also

[zhnedyalkow]

Hi,

The proposed solution above works for me for react-native 0.61+ on Android device here are the steps:

1. npm install react-native-vector-icons --save-dev
2. import Icon from 'react-native-vector-icons/Ionicons'; in App.js
3. Paste below line
   <Icon name="md-menu" size={30} />

somewhere in your code

1. Open dir "android/app/build.gradle" -> Paste following line somewhere in your file: apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle");
   5 npm run android

Br,
Zhi

[VidyaCKabber]

Once after installing the module, link it to the project.

react-native link react-native-vector-icons

[zhitomir-oreshenski-mm]

Hi,

There isn't necessary to link the library because of the new version.

Br,
Zhi

[VidyaCKabber]

Yes. You need to. Even I am using the new version only. I faced the same issue. By linking the module to the project, the issue got resolved.

[marvinIsSacul]

Hi,

I'm using react-native version 0.61.5, and yet I found that running react-native link react-native-vector-icons sovles the problem.

[cyb3rsalih]

add apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle");
bottom of the android/app/build.gradle . No need to delete the package. Only clean build and run.

[augini]

@MoOx thanks, this worked for me.

This worked for me but make sure to rerun your simulator or phone after doing that. Thank ya all !!!

[Pei116]

I have a similar issue in RN v0.61.5 & react-native-vector-icons v6.6.0.

[gie3d]

In my case, I found that the icon didn't show up when I reference it (using import) that reference to node_modules folder like:

import Ionicons from 'react-native-vector-icons/Ionicons';

however it did work when I reference it using relative path.

import Ionicons from '../node_modules/react-native-vector-icons/Ionicons';

[Pei116]

Finally got it working properly by setting org.gradle.configureondemand=false in gradle.properties of my android project.
It's because font.gradle doesn't work properly with configuration on demand in gradle.
The problem is described in here

[sunny-sk]

finally i solved the this icon problem steps: are given below
make sure you ran the command "npm i react-native-vector-icons"

paste the below line inside your android/app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

create a file with the name of "react-native.config.js" into your project root folder and add the following lines in it and save
module.exports = {
assets: ['./assets/fonts/'],
};

[cerqs]

Resolvi seguindo o método:

Adicionar no final do arquivo \android\app\build.gradle

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

rodar novamente o simulador

[sanjeevdev007]

i am simply hit yarn react-native link.... and restart the project..after that it's working

[linconkusunoki]

I was trying to add a new font from Icomoon and the new icons are not appearing, to solve this I run .\gradlew clean inside the android folder and re-run the project with npx react-native run-android and it works :D

[kckunal2612]

For me, some FontAwesome5Pro icons are showing up, and some aren't.
And even after uninstalling, re-installing, re-linking, modifying build.gradle file, Icons just don't show up. I know the icon name that I am passing is correct because for other incorrect icon names I get a YellowBox warning.

[Emehado]

react-native link and rerun android worked for me

[xi1494-jaswantdhayal]

I solved my issue adding on /app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
and then I uninstall the app from my phone and reinstall again.

This is the right answer, Thanks a ton

[AdeelShoukatAli]

In my case, I found that the icon didn't show up when I reference it (using import) that reference to node_modules folder like:

import Ionicons from 'react-native-vector-icons/Ionicons';

however it did work when I reference it using relative path.

import Ionicons from '../node_modules/react-native-vector-icons/Ionicons';

That worked for me using 0.61.4

[anirban-hazra]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Thanks for this solution.

[hackrx]

I have also faced this problem, this is how I solved this

npm cache clean --force
cd android & gradlew clean

then
yarn react-native link
Then again restart your app, make sure uninstall the app.
Also make sure you have added apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" in app/build.gradle file.

[NamanPanchal]

I solved my issue adding on /app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
and then I uninstall the app from my phone and reinstall again.

it also worked for me .Thanks

[NamanPanchal]

Yes it worked.Thanks

[muhammadtaha1998]

The react-native-vector-icons isn't linking automatically. You have to link it manually by running the following command.
react-native link react-native-vector-icons
After doing this my icons started showing.

[dheysonalves]

@muhammadtaha1998 is it a current issue from the repo, or from your project? Yesterday, I re-run my app with the vector-icons, that was working normaly with it. However, when I run it today again, the icons just disappear. I did not re-run and auto-link yet, just to be sure. If it was something around the repo. Could someone answer this?

[hackrx]

@muhammadtaha1998 is it a current issue from the repo, or from your project? Yesterday, I re-run my app with the vector-icons, that was working normaly with it. However, when I run it today again, the icons just disappear. I did not re-run and auto-link yet, just to be sure. If it was something around the repo. Could someone answer this?

You can try one thing delete node modules folder then again run npm install and react-native link and please refer link.
I hope this will help you

[iaurg]

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Then run:

npx react-native link react-native-vector-icons
yarn run android

This worked for me, even the documentation telling to not use react-native link.

[xlcrr]

In my case, MaterialIcons.ttf was missing from android/app/src/main/assets/fonts/

[iAmShakil]

Finally got it working properly by setting org.gradle.configureondemand=false in gradle.properties of my android project.
It's because font.gradle doesn't work properly with configuration on demand in gradle.
The problem is described in here

This worked for me

[prajna-h]

react-native link react-native-vector-icons
Though I am using react-native 0.63.1, Manually linking vector icons library worked for me

[Belgin-Android]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" This Worked Perfectly

[dragma]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
somehow did not work for me ... I copied the contents in the Fonts folder to android/app/src/main/assets/fonts (note lowercase font folder) manually.

Same for me. Even two years later, with RN v 0.61 & rnvi v7.1.0
Had to execute cp node_modules/react-native-vector-icons/Fonts/* android/app/src/main/assets/fonts/ to make it run.
:crying_cat_face:

I have to say that this happened after I removed react-native-maps from my dependencies. Maybe this is not linked at all either.

[fabiocberg]

In my case, MaterialIcons.ttf was missing from android/app/src/main/assets/fonts/

I tried all replies. Only this one worked for me.

[mateusSchwade]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" it worked

[aftabaminzoobiapps]

the app was working perfe3ct. after running the command gradlew clean. now icons are not working. I did the following

delete the node modules.
restart the system. uninstall the app.
npm cache clean
nothing worked.

[export-mike]

@dragma same here I have to copy the files manually, I have updated my android/app/build.gradle and added

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

to the bottom

[abhinav-vk-gupta]

I have also faced this problem, this is how I solved this

npm cache clean --force
cd android & gradlew clean

then
yarn react-native link
Then again restart your app, make sure uninstall the app.
Also make sure you have added apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" in app/build.gradle file.

This one worked perfectly for me! Thanks.

[95Rawan]

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

This worked for me 💃💃💃

Thank you so much for this note "Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following". I kept searching for the file and couldn't find it until I was your note, because there are two of them. Thank you, much appreciated 🙌

[hotheadhacker]

@hpelitebook745G2 try to relink it with react-native link react-native-vector-icons, it worked for me.

Worked for me! Thanks