Icons not showing on IOS app

[onurdegerli]

Environment

Target platform: IOS

    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-vector-icons": "^8.1.0",

Description

Icons are not shown on the TestFlight mode on the Apple store even though they are working fine in Expo and Xcode simulator. I have followed everything in the list here https://github.com/oblador/react-native-vector-icons#ios as well as creating a new group and adding all *.ttf files to the new group that is called Fonts. Is there anything else that I am missing out?

Code

import Icon from "react-native-vector-icons/MaterialIcons";
...
<Icon name="save" size={20} />
...

Demo

Xcode project

App on the Apple store TestFlight

Expo

[laogui]

add code to ios/AppName/Info.plist

    <key>UIAppFonts</key>
    <array>
        <string>AntDesign.ttf</string>
        <string>Entypo.ttf</string>
        <string>EvilIcons.ttf</string>
        <string>Feather.ttf</string>
        <string>FontAwesome.ttf</string>
        <string>FontAwesome5_Brands.ttf</string>
        <string>FontAwesome5_Regular.ttf</string>
        <string>FontAwesome5_Solid.ttf</string>
        <string>Fontisto.ttf</string>
        <string>Foundation.ttf</string>
        <string>Ionicons.ttf</string>
        <string>MaterialCommunityIcons.ttf</string>
        <string>MaterialIcons.ttf</string>
        <string>Octicons.ttf</string>
        <string>SimpleLineIcons.ttf</string>
        <string>Zocial.ttf</string>
    </array>

[onurdegerli]

@laogui

They are already in the file.

[onurdegerli]

In the manual, it is written like below

Note: you need to recompile your project after adding new fonts, also ensure that they also appear under Copy Bundle Resources in Build Phases.

I am running the command below to create a new build. Should I run a different command?

expo build:ios

[onurdegerli]

The podfile is

  use_flipper!({ 'Flipper-Folly' => '2.3.0' })

  pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker'

  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

  pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'

  post_install do |installer|
    flipper_post_install(installer)
  end

[jungyubl]

@onurdegerli were you able to find a solution to this? I'm having the exact same problem and cannot find a way to fix it

[onurdegerli]

@jungyubl Nope. Couldn't find any solution.

[jungyubl]

@onurdegerli I've been stuck with this exact same issue for the past few days and it's driving me crazy now. I have the same issue where the icons won't show (not even in ? or X in release or TestFlight version).

I have tried:

• rm -rf node_modules & Pods, Deleted lock files and reinstall them - didn't work
• Manually linking by adding fonts to info.Plist
• Manually linking by adding fonts to Copy Bundle Resources in Build Phases
• Manually linking by adding fonts to [CP] Copy Pod Resources
• Adding a separate Fonts folder

None of these solutions worked for me - the build works fine and I was able to run them on release versions and archive them to send the file to the end, but the icons do not show up. When I delete the app and run them again on my device in debug mode, it starts with no dev server available error message, but when I load again, it starts up and shows the icons. This suggests that the Icons are not being loaded in the first build (which I believe is the release version).

I'm running out of ideas to try. Any suggestions would be greatly appreciated.

@onurdegerli How did you get around this?

[onurdegerli]

@jungyubl I couldn't get around. I have just stopped implementing it and left it as-is. It doesn't make sense that doesn't work even tho we apply everything which is suggested by the repo owner.

If the icons are not loaded in the first build, does it mean that we have to upload a second build with a different version number? Because it isn't possible to build it with the same version number. Not sure if I get it correctly.

I had followed the same steps which you tried, too.

[ronaldborla]

any other solution for this?

[onurdegerli]

Using Flutter @ronaldborla

[ariannargesi]

I have some kind of similar issue. Everything work fine on android. But on the ios I get '"Feather" is not recognised' error

[ronaldborla]

I'm using expo and I finally solved this issue by upgrading the version to Expo 41, so it upgraded a lot of dependencies. But some significant change for iOS are:

1. The updated ios version in the Podfile, from '10.0' to '11.0' (just change platform :ios, '10.0' to platform :ios, '11.0')
2. Updated cocoa pods to latest version: gem install cocoapods (or use sudo)
3. cd ios then pod install

The icons appeared correctly now for me on production build

[stewartmcgown]

We're seeing this in all release builds too. Tried calling loadFont for the families like FontAwesome5 but this causes a runtime crash. Might be that we are missing some step but as far as I can tell the pod resources are linked and copied correctly 😕

[Arthur092]

Is there any update on this issue?, I am facing the same

[gulshankumarsolcall]

pod install worked for me 👍

STEPS cd ios && pod install

[MaryamKhan05]

I am facing the same issue, Is Anyone who can help??

[ShahululFaris]

Same issue for me. Any solution ?

[coolersham]

Strangely it only affects the following icon sets: EvilIcons, Octicons, Zocial, MaterialIcons, MaterialCommunityIcons and Foundation.

[liquidvisual]

I ran into this today when I had to disable flipper to use react-native-firebase. It couldn't find FontAwesome afterwards. This post saved me though:

https://github.com/oblador/react-native-vector-icons/issues/1062#issuecomment-1345982166

[minhle10]

I was able to solve this issue by adding the actual font files from the Fonts folder under the Copy Bundle Resources tab (inside [App Name].xcworkspace), whereas before, I just had the "Fonts" folder there with the font files inside.

Hope this helps someone because I spent hours trying everything mentioned above to no avail 😭

[KayyDhex]

The podfile is

  use_flipper!({ 'Flipper-Folly' => '2.3.0' })

  pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker'

  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

  pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'

  post_install do |installer|
    flipper_post_install(installer)
  end

it works for me

[usamadevops]

@laogui For me Copy pasting worked. I pasted this on the top Killed the app.

Pod install

And then again

yarn run ios

[Achmad-M]

@laogui

They are already in the file.

for android :

if the name on Google says expandmore then change name = “expand-more” change the sign to - that's work for me

[reehlittle]

I was able to solve this issue by adding the actual font files from the Fonts folder under the Copy Bundle Resources tab (inside [App Name].xcworkspace), whereas before, I just had the "Fonts" folder there with the font files inside.

Hope this helps someone because I spent hours trying everything mentioned above to no avail 😭

Thanks @minhle10, it worked for me.

The current Readme says Browse to node_modules/react-native-vector-icons and drag the folder Fonts (or just the ones you want) to your project in Xcode, but to be able to add the fonts under Copy Bundle Resources tab I had first to create the Fonts folder, following this, and after that dragging the fonts in.

[danielJunio0]

Add this line in your PodFile

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

then run cd ios && pod install

Works for me!

[VaitheeswariVS]

I solved the issue icon not showing do the following process

1. Create / Update the react-native.config.js add the following lines module.exports = { project: { ios: {}, android: {}, }, assets: [ ‘./assets/fonts’ ], // change the path as per your project };

2.Check the info.plist the following lines are included

*** <key>UIAppFonts</key>
<array>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    <string>FontAwesome5_Regular.ttf</string>
    <string>FontAwesome5_Solid.ttf</string>
    <string>Fontisto.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Zocial.ttf</string>
</array> ***

3.Pod install and npm run ios

[Eprince-hub]

@VaitheeswariVS please can you clarify this part assets: [ ‘./assets/fonts’ ], of the solution you provided? Do i need to create this assets/fonts folders myself? I am using yarn workspace/monorepo and I would like to understand it so that i can try to apply it to my problem. I currently don't have any of that folder in my application. have been stuck with this issue for days now.

[VaitheeswariVS]

Hi @Eprince-hub, Yes, you have to create a folder for yourself to store the images, icons, and custom font files. Actually, I have  mentioned this solution for not showing icons on iOS devices. When you are using the react-native-vector-icons npm packages in your project, the following solution helps to display the icons:

Refer to this NPM: react-native-vector-icons. In that, they have mentioned that to create the react-native.config.js file, add the following code: module.exports = { dependencies: { 'react-native-vector-icons': { platforms: { ios: null, }, }, }, };

But, the icons are not visible on iOS devices, so I replaced them with the following code, and it works for me.

module.exports = { project: { ios: {}, android: {}, }, assets: [ ‘./assets/fonts’ ], // change the path as per your project };

[djleonskennedy]

In my case icons don't appear in the release build in dev mode all working well

[shubhanshubb]

Add this line in your PodFile

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

then run cd ios && pod install theni install npx react-native run-ios

Works for me!

[ngvcanh]

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

Works for me!

cd ios
rm -rf build
rm -rf Pods
rm Podfile.lock
pod install

[mistryaksh]

ONE BIG SOLUTION FOR THIS IS WORKED FOR ME. Guys use following insturction You can also try building app using xcode? may be this will work because all pods files are visible to the xcode as follows....

Step 1: add this lines to pod file

AntDesign.ttf Entypo.ttf EvilIcons.ttf Feather.ttf FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5_Regular.ttf FontAwesome5_Solid.ttf Fontisto.ttf Foundation.ttf Ionicons.ttf MaterialCommunityIcons.ttf MaterialIcons.ttf Octicons.ttf SimpleLineIcons.ttf Zocial.ttf

Step 2 : Now just open your project ios file using XCode check your 'RNVectorIcons' this pod is avaliable there & build manually as normal build you can see all this icons are visible now!

THANK ME LATER ;-)

[vikasswebdev]

first of all I get my Fonts file from node_mondules/react-native-vector-icons and then add in my in ios file

and then add all fonts in this place

and then add this code in info.plist

` UIAppFonts

AntDesign.ttf Entypo.ttf EvilIcons.ttf Feather.ttf FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5_Regular.ttf FontAwesome5_Solid.ttf Fontisto.ttf Foundation.ttf Ionicons.ttf MaterialCommunityIcons.ttf MaterialIcons.ttf Octicons.ttf SimpleLineIcons.ttf Zocial.ttf ` and then restart and this work for me

[damdafayton]

exact same problem after 2 years. what a nonsense. im deleting this too

[DanielFlockhart]

exact same problem after 2 years. what a nonsense. im deleting this too Found anything that works?

[cnian94]

I spent all day trying to figure out the issue, in my case, there was another info.plist file called "Info-debug.plist" which is not seeable on the xcode but you can see it on vscode. just be sure that you are adding the fonts also to there

[Irfan331]

I was able to solve this issue by adding the actual font files from the Fonts folder under the Copy Bundle Resources tab (inside [App Name].xcworkspace), whereas before, I just had the "Fonts" folder there with the font files inside.

Hope this helps someone because I spent hours trying everything mentioned above to no avail 😭

Worked for me. Thanks!

[cherepii]

The podfile is

  use_flipper!({ 'Flipper-Folly' => '2.3.0' })

  pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker'

  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

  pod 'react-native-safe-area-context', :path => '../node_modules/react-native-safe-area-context'

  post_install do |installer|
    flipper_post_install(installer)
  end

it works for me

Adding this line into Podfile worked for me pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

[areebshakeel]

Adding pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons' to my podfile worked for meÏ``

[NgocLe1001]

Add this line in your PodFile

pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

then run cd ios && pod install

Works for me!

I follow all steps from official document but still show question mark on ios, while on android it's ok. This comment help me resolve. Thanks so much.

[ngvcanh]

Add this line in your PodFile pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons' then run cd ios && pod install Works for me!

I follow all steps from official document but still show question mark on ios, while on android it's ok. This comment help me resolve. Thanks so much.

IOS sẽ lưu cache bên trong thư mục ios nên bạn hãy xoá các bundle, build của nó đi và cài lại Pod dependencies.

Bạn chạy các lênh này:

cd ios
rm -rf build
rm -rf Pods
rm Podfile.lock
pod install

[NgocLe1001]

Add this line in your PodFile pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons' then run cd ios && pod install Works for me!

I follow all steps from official document but still show question mark on ios, while on android it's ok. This comment help me resolve. Thanks so much.

IOS sẽ lưu cache bên trong thư mục ios nên bạn hãy xoá các bundle, build của nó đi và cài lại Pod dependencies.

Bạn chạy các lênh này:

cd ios
rm -rf build
rm -rf Pods
rm Podfile.lock
pod install

Cảm ơn bạn. Mình thắc mắc là tại sao nó lại ko lấy được icon, tức là cụ thể hơn là vì sao ấy ạ?

[ngvcanh]

Add this line in your PodFile pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons' then run cd ios && pod install Works for me!

I follow all steps from official document but still show question mark on ios, while on android it's ok. This comment help me resolve. Thanks so much.

IOS sẽ lưu cache bên trong thư mục ios nên bạn hãy xoá các bundle, build của nó đi và cài lại Pod dependencies. Bạn chạy các lênh này:

cd ios
rm -rf build
rm -rf Pods
rm Podfile.lock
pod install

Cảm ơn bạn. Mình thắc mắc là tại sao nó lại ko lấy được icon, tức là cụ thể hơn là vì sao ấy ạ?

Do dependencies bị miss trong setup của thư viện nên cần chỉ định lại đường dẫn từ file Pod đi vào thư viện.

Mà Pod nó build và cache liên tục nên cần phải xoá và cài lại để nó bundle lại từ trong thư viện

[NgocLe1001]

Add this line in your PodFile pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons' then run cd ios && pod install Works for me!

I follow all steps from official document but still show question mark on ios, while on android it's ok. This comment help me resolve. Thanks so much.

IOS sẽ lưu cache bên trong thư mục ios nên bạn hãy xoá các bundle, build của nó đi và cài lại Pod dependencies. Bạn chạy các lênh này:

cd ios
rm -rf build
rm -rf Pods
rm Podfile.lock
pod install

Cảm ơn bạn. Mình thắc mắc là tại sao nó lại ko lấy được icon, tức là cụ thể hơn là vì sao ấy ạ?

Do dependencies bị miss trong setup của thư viện nên cần chỉ định lại đường dẫn từ file Pod đi vào thư viện.

Mà Pod nó build và cache liên tục nên cần phải xoá và cài lại để nó bundle lại từ trong thư viện

Cảm ơn bạn.

[lapleDF]

After upgrading to react-native 0.73, I faced this issue but only Ionicons bundle set not showing, other bundle set is still working fine.

[Resource-4]

After upgrading to react-native 0.73, I faced this issue but only Ionicons bundle set not showing, other bundle set is still working fine.

Have you found a solution for this issue? If so, could you please share your thoughts on how you resolved it?

[gabrielopeyemi]

I rebuild the app in xcode... and it worked

[emilsandvad]

I'm having this same issue now. No issue when running with "react-native run-ios", but when running from Xcode or a TestFlight build, no icons are showing at all - not even the question mark. Still works on Android. I have tried all suggestions I could find anywhere. My project is 3 years old and has never had any issues with this

[marvelous-ikechi]

I'm having this same issue now. No issue when running with "react-native run-ios", but when running from Xcode or a TestFlight build, no icons are showing at all - not even the question mark. Still works on Android. I have tried all suggestions I could find anywhere. My project is 3 years old and has never had any issues with this

Same issue here