react-native-vector-icons: Icons not showing on IOS app

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>

Using Flutter @ronaldborla

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 😭

@laogui

They are already in the file.

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

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

Pod install

And then again

yarn run ios

Add this line in your PodFile

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

then run cd ios && pod install

Works for me!

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

pod install worked for me 👍

STEPS cd ios && pod install

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

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

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.

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.

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!

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

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 😉

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.