Remove react-native-vector-icons dependency

Is your feature request related to a problem? Please Describe.

This library currently relies upon react-native-vector-icons@v10 as a dependency. This is quite an old version of the library and it's since changed it's structure entirely and is now installed as @react-native-vector-icons/[fontName].

Describe the solution you'd like

I think this library should completely drop its dependency on an external icon package, remove the Icon component. All props on components that received icon configuration (like Avatar) should simply receive a react element and render it accordingly.

Describe alternatives you've considered

The other alternative is to upgrade this library to support the most modern version of @react-native-vector-icons. However, this will the increase overall maintenance burden as it will require this library to have parity with react-native-vector-icons into the future.

Additional context

I'd be happy to work on a PR for this change if this direction is approved.

@jspizziri

@jspizziri

Thanks for the suggestion and for taking the time to look into ways we can reduce unnecessary dependencies.

The Icon and Avatar components are core parts of our library. They're used extensively both internally and by many of our consumers, so removing them completely would be a major breaking change. That’s not something I’m looking to do at this point.

That said, I’m definitely open to exploring a switch to the newer modular icon packages you mentioned. Before we make any moves, though, we’ll need to consider a few things carefully:

How many breaking changes this would introduce
The level of effort required from users to migrate
Whether we can provide a smooth transition or fallback option for existing users
Whether the effort involved is justified by the overall benefit especially since react-native-vector-icons is still actively maintained

Right now, my focus is on fixing the issue from the parent branch and making the transition as smooth as possible for users. The current major version will continue to be supported with the existing library, so teams with larger codebases won’t face any immediate breaking changes. Meanwhile, the new major version can offer a cleaner setup for new users moving forward.

I’ll spend some time over the weekend reviewing the icon packages and seeing how they might fit into our path forward.

@jspizziri

hii, @jspizziri sorry for late reply,

we are in talk with original maintainer and contributors of react native elements and there are chances this repo to be merged in original library. We need to take review from other maintainer about this. So we all hold this plan for some time.

@deepktp

Hi @deepktp, I'm working on an app using react-native-element AND react-native-vector-icons...
And I've bumped to the new v12 architecture : "react-native-vector-icons/{font-name}".

But react-native-element still relies to react-native-vector-icon ...

Even with this kind of patch I wasn't able to have the font working. ( I can build but the 'close' icon isn't rendered )

I got this "error icon" :

Is it even possible to make rne@3.x to work with rnvi@12.x only ?

Does the "talk with original maintainer and contributors" leaded to something interesting ?

@seba9999

Hii, @seba9999 we haven't reached a specific point to confirm wether original maintainer are willing to upgrade vector icons.
I will look into this, if patch work for me. I will update you with findings as soon as possible.

I am getting a warning in react-native 0.78 its seems to be related to the legacy version of react-native-vector-icons.

our app (or one of its dependencies) is using an outdated JSX transform.
Update to the modern JSX transform for faster performance: https://react.dev/link/new-jsx-transform Error
Component Stack: 
at Icon (create-icon-set.js:1:3419) 
at RCTView (<anonymous>)

I migrated to this package because it solved many of the issues and conflicts of the old unmaintained package.
Its makes sense that this becomes a stand alone package, not relying on the old one, to be faster and better at handling such cases.

@kashmiry

I am getting a warning in react-native 0.78 its seems to be related to the legacy version of react-native-vector-icons.
our app (or one of its dependencies) is using an outdated JSX transform.
Update to the modern JSX transform for faster performance: https://react.dev/link/new-jsx-transform Error
Component Stack: 
at Icon (create-icon-set.js:1:3419) 
at RCTView (<anonymous>)
I migrated to this package because it solved many of the issues and conflicts of the old unmaintained package. Its makes sense that this becomes a stand alone package, not relying on the old one, to be faster and better at handling such cases.

@kashmiry
I’m currently using version react native 0.81.4 with this library and haven’t run into this issue. Would you mind sharing your package.json and tsconfig.json files? That might help in reproducing the problem and narrowing down the cause.

Vector icon issue it looks like we need to upgrade to rnvi to v12.

I am getting a warning in react-native 0.78 its seems to be related to the legacy version of react-native-vector-icons.
our app (or one of its dependencies) is using an outdated JSX transform.
Update to the modern JSX transform for faster performance: https://react.dev/link/new-jsx-transform Error
Component Stack: 
at Icon (create-icon-set.js:1:3419) 
at RCTView (<anonymous>)
I migrated to this package because it solved many of the issues and conflicts of the old unmaintained package. Its makes sense that this becomes a stand alone package, not relying on the old one, to be faster and better at handling such cases.
@kashmiry I’m currently using version react native 0.81.4 with this library and haven’t run into this issue. Would you mind sharing your package.json and tsconfig.json files? That might help in reproducing the problem and narrowing down the cause.

Vector icon issue it looks like we need to upgrade to rnvi to v12.

I can identify where exactly it happens.
it happens if you use this component: createIconSetFromIcoMoon

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from '../assets/fonts/selection.json';
const IconMoon = createIconSetFromIcoMoon(icoMoonConfig, 'icomoon', 'icomoon.ttf');

export default function CustomIcon(props) {
    let config = {
        ...props,
    };
    return (
        <View style={{ ...config.containerStyle }}>
            <IconMoon {...config} />
        </View>
    );
}

main dependencies:

	"dependencies": {
		"@rn-vui/base": "^5.1.8",
		"@rn-vui/themed": "^5.1.8",
		"react": "19.0.0",
		"react-native": "0.78.3",
		"react-native-vector-icons": "^10.2.0",
	},

tsconfig:

{
    "extends": "@react-native/typescript-config/tsconfig.json",
}

feat: added modular vector icons #50

Upgrade library from react-native-vector-icons to modular icons packa…

We have updated the library with Modular Vector Icons

Bleeding Edge Version With RN Vector Icons V12
Docs

feat: added modular vector icons #50

Icon lib upgrade (#66)

Now library supports latest vector icons v12+ also the older library with deprecation warning.

v6.0.0-rc.0

Now library supports latest vector icons v12+ also the older library with deprecation warning.

v6.0.0-rc.0

Thank you for all the work on this.
I noticed docs needs to be update on installation page for the icons instructions.

I tried version 6.0.0-rc.0 but I am getting errors for getIconType

Error: Requiring unknown module "undefined". If you are sure the module exists, try restarting Metro. You may also want to run `yarn` or `npm install`., js engine: hermes Error Component Stack:
    at Icon (Icon.js:9:95)
    at Themed.Icon (withTheme.js:18:44)
    at RCTView (<anonymous>)
    at View (View.js:32:34)
    at Animated(View) (createAnimatedComponent.js:65:57)
    at TouchableOpacity (TouchableOpacity.js:132:23)
    at TouchableOpacity (<anonymous>)

for:

  ionicon: () => {
    try {
      return require('@react-native-vector-icons/ionicons').default;
    } catch {
      // Check if old library exists
      try {
        const oldLib = require('react-native-vector-icons/Ionicons').default;
        console.warn(
          'Warning: "react-native-vector-icons" has been deprecated. Please install the modular library "@react-native-vector-icons/ionicons" instead.'
        );
        return oldLib;
      } catch {
        console.warn(
          'Ionicons icon set is not available. Please install "@react-native-vector-icons/ionicons" to use it.'
        );
        return null;
      }
    }
  },

Even though I have installed @react-native-vector-icons/ionicons and removed legacy react-native-vector-icons.
also tried to clear yarn cache + restart Metro. still getting Error: Requiring unknown module "undefined". for fonts requires.
A migration guide for this would be helpful.

@kashmiry

Hi @kashmiry ,

Could you please share the code snippet you’re using? We’re currently unable to reproduce this issue on our end, and having that context would help us investigate further.

Regarding the installation documentation, we’re in the process of finalizing the v6 release and will be updating the relevant docs.

Thanks

@deepktp

@deepktp
Working correctly now! I was able to migrate with no issues.
not sure what was the issue before. what changed is that I am on RN v0.81. Also maybe I followed steps more correctly now.

Tested on:

"react-native": "0.81.6",
"@rn-vui/base": "6.0.0-rc.0",
"@rn-vui/themed": "6.0.0-rc.0",
"@react-native-vector-icons/fontawesome": "^12.3.0",
"@react-native-vector-icons/fontawesome5": "^12.3.0",
"@react-native-vector-icons/foundation": "^12.3.0",
"@react-native-vector-icons/icomoon": "^12.3.0",
"@react-native-vector-icons/ionicons": "^12.3.0",
"@react-native-vector-icons/material-design-icons": "^12.3.0",
"@react-native-vector-icons/material-icons": "^12.3.0",

Working on both ios & android.

Thank you!

Navigation Menu

Repository navigation

Remove react-native-vector-icons dependency #50

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Remove react-native-vector-icons dependency #50

Description

Activity

deepktp commented on Jul 3, 2025

deepktp commented on Jul 11, 2025

seba9999 commented on Aug 12, 2025

deepktp commented on Aug 12, 2025

kashmiry commented on Sep 23, 2025

deepktp commented on Sep 23, 2025

github-actions commented on Sep 23, 2025

kashmiry commented on Sep 23, 2025

deepktp commented on Oct 23, 2025

deepktp commented on Nov 24, 2025

kashmiry commented on Feb 9, 2026

deepktp commented on Feb 12, 2026

kashmiry commented on Aug 26, 2026

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions