::Product·React Native·Development

Moving away from @expo/vector-icons

We cut our repro app's bundle by 4 MB by switching from @expo/vector-icons to @react-native-vector-icons. Here's why we now recommend the change.

Vojtech Novak

Vojtech Novak

Engineering

Moving away from @expo/vector-icons

If you've used Expo, chances are you've relied on @expo/vector-icons. It's time to move on.

We recommend switching from @expo/vector-icons to a better alternative: the latest versions of icon-pack-specific @react-native-vector-icons packages that fully support Expo apps, including Expo Go. This change simplifies the ecosystem, reduces confusion, and can shrink your app bundle size. In this post, we'll explain why we're making this recommendation, what it means for your app, and how to migrate smoothly.

Historical context

When we first created @expo/vector-icons, we built it as a convenience wrapper around react-native-vector-icons, designed to work seamlessly with Expo projects. It uses expo-font to dynamically load icon fonts, enabling functionality in development builds, OTA updates, and Expo Go—even when fonts weren't bundled natively. Expo has evolved immensely since @expo/vector-icons was created.

Aliasing complexity

To support third-party libraries that import and use react-native-vector-icons, we aliased it to @expo/vector-icons using Babel (or now Metro). This creates unnecessary complexity and maintenance burden.

Not a core Expo concern

Maintaining a package that wraps third-party icon fonts doesn't align with Expo's focus on platform-level capabilities. We want to empower the ecosystem, not duplicate it.

The better path: Use packages from @react-native-vector-icons directly

The latest versions of packages in @react-native-vector-icons (not to be confused with the deprecated react-native-vector-icons package) now integrate directly with expo-font and call its native font loading API when needed.

These new packages work in all important contexts—Expo Go, dev builds, and across all platforms. Therefore, there's no longer any need for a wrapper and we will be deprecating @expo/vector-icons in a future release of Expo SDK.

Benefits of the migration

  • New features
    • Access to latest icon set versions, including icon sets that weren't available in @expo/vector-icons, such as Lucide.
    • Easier to create your own icon sets using the generator.
    • Ability to type-check icon names when using createIconSetFromFontello or createIconSetFromIcoMoon
  • Smaller app bundle size
    • Apps may accidentally bundle all icon fonts, even if they only use one or two. Moving away from @expo/vector-icons helps reduce this bloat. In our repro app we cut the shipped bundle and asset payload size by around 4 MB just by changing an import statement and a package.json dependency.
  • Cleaner project setup
    • No more aliasing configuration
    • One source of truth for icon packages
    • Less risk of version drift or unexpected behavior

How to migrate your app

We've built a codemod that automatically updates your imports from @expo/vector-icons to @react-native-vector-icons:

  • Run npx @react-native-vector-icons/codemod in your project and verify the output.
  • Run npx expo doctor to verify that @expo/vector-icons or react-native-vector-icons have not remained in your project.
  • Ensure expo-font is installed and properly configured. Do not add the paths to fonts from node_modules/@react-native-vector-icons/ to expo-font config plugin. This will result in a build error.
  • Verify your custom icons (if any)
    • Double-check any custom fonts or icons you're using—especially if you previously relied on createIconSetFromIcoMoon or similar helpers.

Potential issues to watch for

  • Icon font conflicts If your project or its dependency uses different vector icon packages (such as @expo/vector-icons, react-native-vector-icons and @react-native-vector-icons/some-font) or several versions of the same package, you might encounter unexpected behavior when you try to render an icon from the same font across different packages. For example, rendering the same font across different packages may result in icons rendering as ? or as empty squares. To prevent these issues from happening, we have added a doctor warning that checks for mixing of the new packages from @react-native-vector-icons scope with @expo/vector-icons or react-native-vector-icons.
  • Widespread usage Currently, around 60% of apps on EAS Build include @expo/vector-icons. We recognize this change affects many projects, which is why we're providing a codemod to make migration as smooth as possible. Additionally, we will still maintain @expo/vector-icons to give users time to migrate. Please open an issue or let us know when you hit a problem during the migration!

Final thoughts

While this change requires some effort, it simplifies your codebase and leads to more predictable builds and potentially smaller binaries. It's another incremental step toward making Expo the best, most modern way to build and ship mobile apps. In a future release of Expo SDK we will deprecate @expo/vector-icons and rely solely on the community packages.

vector icons
SDK 56

Share article