react-native-iconify is a library that simplifies the use of icons in React Native projects. It provides access 150,000+ icons.

You can find all the supported icons on these websites:

Icones Iconify

To use the react-native-iconify library, you first need to install it in your project. You can do this using the following command:

npm install react-native-iconify

Install react-native-svg

# for bare react native apps
npm install react-native-svg
npx pod-install

or

# for Expo apps
npx expo install react-native-svg

add plugin to (babel.config.js)

module.exports = {
  presets: [
    ...
  ],
  plugins: [
    ...
    'react-native-iconify/plugin',
  ],
};

Using the react-native-iconify library is straightforward. First, you need to call the Iconify component and provide the icon name using the icon prop:

import React from 'react';
import { Iconify } from 'react-native-iconify';

const ExampleScreen = () => {
  return <Iconify icon="mdi:heart" size={24} color="#900" />;
};

export default ExampleScreen;

In the example above, we show how to use the mdi-heart Iconify icon. You can provide values for the size and color props to customize the appearance of the icon.

Tested on empty expo managed app

Adding more than 150,000 icons to the application would increase the size and loading time of the application. Therefore, the React Native Iconify Babel plugin loads only the necessary icons, allowing the application to contain only the icons that are needed so you cannot use variable.

Here is an example of the incorrect usage:

const icon = 'mdi:heart';
<Iconify icon={icon} size={24} color="red" />;

To fix this issue, use like this:

<Iconify icon="mdi:heart" size={24} color="red" />

If you're using a library that requires the "react-native-iconify/plugin" Babel plugin but you forgot to install it, you may encounter errors. Here's how to troubleshoot and fix the issue:

Add the following code to your Babel configuration file (usually babel.config.js):

module.exports = {
  presets: [
    ...
  ],
  plugins: [
    ...
    'react-native-iconify/plugin',
  ],
};

After installing and configuring the plugin, you may need to restart your bundler to ensure that the changes take effect.

See the contributing guide to learn how to contribute to the repository and the development workflow.

MIT