react-native-vector-icons Documentation

File: README.md Copy Chapter

React Native Vector Icons

Elevate your React Native applications with the power of customizable vector
icons. Ideal for embellishing buttons, logos, and navigation or tab bars, these
icons seamlessly integrate into your projects. Their versatility makes
extension and styling effortless.

For the integration of .svg files natively, you can explore react-native-vector-image.

[!TIP]
If you are still using the old single package react-native-vector-icons visit https://github.com/oblador/react-native-vector-icons/tree/10.x. To migrate to the package-per-icon-set approach, see MIGRATION.md.

Table of Contents Copy Chapter

• Sponsorship
• Available Icon Sets
• Installation
• Setup
• Icon Component
• Usage as PNG Image/Source Object
• Multi-Style Fonts
• Custom Fonts
• Animation
• Dynamic icon font loading
• Usage Examples
• Changelog
• License

Sponsorship Copy Chapter

Should you find this library beneficial, kindly contemplate the option of
sponsoring.

Available Icon Sets Copy Chapter

Explore all icons.

RNVI comes with the following supported icons. You can search NPM for third party icons.

Actively maintained Copy Section

• AntDesign from Ant Group (v4.4.2 with 449 icons)
• Feather created by Cole Bemis & Contributors (v4.29.2 featuring 287 icons)
• FontAwesome designed by Fonticons, Inc. (v7.2.0 featuring 2,806 free and 75,767 pro icons)
• Foundation by ZURB, Inc. (v3.0 with 283 icons)
• Ionicons crafted by Ionic (v8.0.9 containing 1,357 icons)
• MaterialDesignIcons from MaterialDesignIcons.com (v7.4.47 including 7448 icons)
• Octicons designed by GitHub, Inc. (v19.23.1 with 370 icons)
• Lucide designed by Lucide, (v1.7.0 with 1,941 icons)

No longer maintained upstream Copy Section

• Entypo by Daniel Bruce (v1.0.1 with 411 icons)
• EvilIcons designed by Alexander Madyankin & Roman Shamin (v1.10.1 with 70 icons)
• FontAwesome 4 by Fonticons, Inc. (v4.7.0 containing 785 icons)
• FontAwesome 5 from Fonticons, Inc. (v5.15.4 offering 1611 free and 7869 pro icons)
• FontAwesome 6 designed by Fonticons, Inc. (v6.7.2 featuring 2060 free and 52663 pro icons)
• Fontisto created by Kenan Gündoğan (v3.0.4 featuring 617 icons)
• MaterialIcons by Google, Inc. (v4.0.0 featuring 2234 icons)
• SimpleLineIcons crafted by Sabbir & Contributors (v2.5.5 with 189 icons)
• Zocial by Sam Collins (v1.1.1 with 100 icons)

Migration Copy Chapter

See MIGRATION.md if you are migrating from react-native-vector-icons to the package-per-icon-set approach or between major versions.

Installation Copy Chapter

1. Install the packages for the icons you want to use

npm install @react-native-vector-icons/fontawesome-free-solid @react-native-vector-icons/evil-icons

2. Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions below.
3. If you are using one of the following fonts, refer to their guides for further instructions

• Fontello
• Icomoon

Setup Copy Chapter

Refer to the guide for Expo, React Native or Web for further instructions.

Font location customisation Copy Section

For fonts like the FontAwesome Pro as well as Fontello and Icomoon where you provide the fonts, the default location for the font files is rnvi-fonts in the same directory as your package.json. This can be customized by setting the fontDir property in your package.json file.

{
  "reactNativeVectorIcons": {
    "fontDir": "src/rnvi-fonts"
  }
}

`Icon` Component Copy Chapter

You can either use one of the bundled icons above or roll your own custom font.

import { FontAwesomeFreeSolid } from "@react-native-vector-icons/fontawesome-free-solid";
// or use the static version to embed the font at build time instead of loading it at runtime
import { FontAwesomeFreeSolid } from "@react-native-vector-icons/fontawesome-free-solid/static";

;

Props Copy Section

Any Text props and the following:

Styling Copy Section

Since Icon builds on top of the Text component, most style properties will work as expected, you might find it useful to play around with these:

• backgroundColor
• borderWidth
• borderColor
• borderRadius
• padding
• margin
• color
• fontSize

By combining some of these you can create for example :

Usage as PNG Image/Source Object Copy Chapter

Convenient way to plug this in into other components that rely on bitmap images rather than scalable vector icons.

You need to use Expo (with expo-font installed) or install @react-native-vector-icons/get-image to use this feature.

Both methods return an ImageResult object ({ uri, width, height, scale }) that can be passed directly as an Image source.

const source = Icon.getImageSourceSync('user', 20, 'red');
// or with an options object:
const source = Icon.getImageSourceSync('user', { size: 20, color: 'red', lineHeight: 28 });

return ;

Alternatively you may use the async method Icon.getImageSource.

const source = await Icon.getImageSource('user', 20, 'red');
// or with an options object:
const source = await Icon.getImageSource('user', { size: 20, color: 'red' });

Keep in mind that Icon.getImageSourceSync is blocking and might incur performance penalties. Subsequent calls will use cache, however.

Static methods Copy Section

All static methods from Icon are supported by multi-styled fonts.

Custom Fonts Copy Chapter

The best approach is to use our icon generator to create your own icon package.

See CREATE_FONT_PACKAGE.md to learn how to create your own font packages.

You can also use createIconSet() directly in your project. This
returns your own custom font based on the glyphMap where the key is the icon
name and the value is either a UTF-8 character or its character code.
postScriptName is the name of the postscript font. Open the font in https://fontdrop.info/,
Font Book.app or similar to learn the name. Also pass the fontFileName argument for Android support.

import { createIconSet } from "@react-native-vector-icons/common";
const glyphMap = { "icon-name": 1234, test: "∆" };

// use createIconSet() with object parameter
// or use positional parameters for compatibility with version <= 10: `createIconSet(glyphMap, fontFamily[, fontFile])`
const Icon = createIconSet(glyphMap, {
  postScriptName: "FontName",
  fontFileName: "font-name.ttf",
  fontSource: require("../fonts/font-name.ttf"), // optional, for dynamic loading. Can also be a local file uri.
});

If you aren't using dynamic font loading you need to make sure your font is copied into your bundle.

Animation Copy Chapter

React Native comes with an amazing animation library called
Animated. To use it with an
icon, simply create an animated component with this line: const AnimatedIcon = Animated.createAnimatedComponent(Icon). You can also use the higher level
animation library
react-native-animatable.

Dynamic icon font loading Copy Chapter

TL;DR we recommend you use the /static import if you use Development builds and the root import when using Expo Go.

Icon fonts can be made available statically at build time or loaded dynamically at runtime. The root (non-/static) import uses dynamic loading. If you don't need dynamic loading, use the /static imports (e.g. "@react-native-vector-icons/ionicons/static").

See the Expo setup guide for more details, config plugins, and the dynamic loading API.

Usage Examples Copy Chapter

Icon Explorer Copy Section

Try the IconExplorer project in Examples/IconExplorer folder, there you can also search for any icon.

Basic Example Copy Section

import { IonIcons } from "@react-native-vector-icons/ionicons/static";

const ExampleView = () => (
  
);

Inline Icons Copy Section

import { Text } from "react-native";
import { IonIcons } from "@react-native-vector-icons/ionicons/static";

const ExampleView = (props) => (
  <Text>
    Lorem  Ipsum
  </Text>
);

Testing Copy Chapter

When running tests with jest you will need to mock out the native code loading to prevent errors.

In jest.config.js add

// Mock out font loading
moduleNameMapper: {
  '\\.(ttf)$': '<rootDir>/__mocks__/file-mock.js',
}

Create __mocks__/file-mock.js:

module.exports = {};

Create __mocks__/@react-native-vector-icons/common.js:

// Mock the entire common library so there are no native module loading errors
module.exports = {
  createIconSet: () => "icon",
};

[Changelog](https://github.com/oblador/react-native-vector-icons/releases) Copy Chapter

License Copy Chapter

This project is licenced under the MIT License.

Any bundled fonts are copyright to their respective authors and mostly under MIT or SIL OFL.

File: docs/CREATE_FONT_PACKAGE.md Copy Chapter

Creating a font package

You can create a new font package either via a PR to this repository or by publishing your own font package on NPM.

We use a yeoman generator to fully automate the generation the fonts from a configuration file.

In the future the idea is to automate this to automatically release new fonts in line with upstream.

Below we describe how to create a font in this monorepo, the process for creating your own package would be quite similar.

Note: Before contributing a new font package, please read our Contributing Guidelines and follow the development workflow described there.

Quick Start Copy Chapter

1. Set up development environment (see CONTRIBUTING.md):

   sh Copy

   pnpm install

2. Create font package directory and config:

   sh Copy

   mkdir packages/my-font
   vi packages/my-font/.yo-rc.json
   git add packages/my-font/.yo-rc.json

3. Generate the font package:

   sh Copy

   # Generate single font
   pnpm generate my-font
   
   # Or generate all fonts
   pnpm generate

Configuration Reference Copy Chapter

The .yo-rc.json file contains all configuration for the font package generation. Here's the complete structure:

For most fonts you should be able to set the packageName and most other variaables will be derived from them, but you can adjust with the optional propertires when necessary.

Required Properties Copy Section

packageName

• Type: string
• Description: The name of the node package and directory name
• Example: "material-symbols"
• Note: Currently assumes package will live in @react-native-vector-icons namespace

Optional Properties Copy Section

name

• Type: string
• Description: The name in capitalised sentence from
• Default: Title Case of packageName
• Example: "Material Symbols" (from material-symbols)

className

• Type: string
• Description: Class name for generated components
• Default: PascalCase of packageName
• Example: "MaterialSymbols" (from material-symbols)

postScriptName

• Type: string
• Description: PostScript name for the font
• Default: Same as className
• Example: "MaterialSymbols"

fontFileName

• Type: string
• Description: Base filename for generated fonts
• Default: Same as className
• Example: "MaterialSymbols"

upstreamFont

• Type: string | object
• Description: The upstream font package dependency where the font comes from a node module
• String format: "package-name" - fetches latest version from npm
• Object format:
  json Copy

  {
    "packageName": "@fortawesome/fontawesome-free",
    "versionRange": "^6",
    "registry": "https://registry.npmjs.org",
    "versionOnly": false
  }

customSrc

• Type: string | boolean
• Description: Path to custom source template or true to skip generation
• Example: "../../../../fontawesome-common/generators/app/templates/src/index.tsx"

customReadme

• Type: boolean
• Description: Skip README.md generation
• Default: false

copyCustomFonts

• Type: boolean
• Description: Copy custom font files instead of generating
• Default: false

commonPackage

• Type: string
• Description: Path to common package for shared functionality
• Default: "common"
• Example: "fontawesome-common/fontawesome6"

meta

• Type: object
• Description: Metadata for multi-style fonts
• Example:
  json Copy

  {
    "defaultStyleName": "regular",
    "styleNames": ["regular", "solid", "brand"],
    "styles": {
      "regular": {
        "family": "FontAwesome6Free-Regular",
        "name": "FontAwesome6_Regular.ttf",
        "weight": 400
      }
    }
  }

versions

• Type: array
• Description: Version history tracking. Updated when a new upstream font version is released.
• Example:
  json Copy

  [
    { "rnvi": "12.0.0", "upstream": "4.29.2" },
    { "rnvi": "12.0.1", "upstream": "4.30.0" }
  ]

Build Steps Copy Section

The buildSteps object defines the font generation pipeline. Steps are executed in this order:

preScript

Execute shell commands before font generation

{
  "preScript": {
    "script": "mkdir -p fonts\ncurl https://example.com/font.ttf > fonts/font.ttf"
  }
}

renameSVGs

Rename and filter SVG files

{
  "renameSVGs": {
    "location": "../../node_modules/@primer/octicons/build/svg",
    "keepPostfix": "-16"
  }
}

• location: Source directory containing SVGs
• keepPostfix: Only keep files ending with this postfix, remove it from output

fixSVGPaths

Fix SVG path issues using oslllo-svg-fixer

{
  "fixSVGPaths": {
    "location": "../../node_modules/ionicons/dist/svg",
    "cleanup": true
  }
}

• location: Source directory or "renamedSVGs" if after renameSVGs
• cleanup: Remove source directory after processing

fontCustom

Generate font TTF from SVGs using FontCustom

{
  "fontCustom": {
    "location": "fixedSvg",
    "cleanup": true
  }
}

• location: Directory containing SVG files
• cleanup: Remove source directory after processing

fontforgeScript

Run FontForge script for font post-processing

{
  "fontforgeScript": {
    "script": "correct-direction.py"
  }
}

• script: Script name in the generator's fontforge directory

glyphmap

Generate icon mapping files

{
  "glyphmap": {
    "mode": "css",
    "location": "FontAwesome.css",
    "prefix": ".fa-",
    "cleanup": true
  }
}

• mode: "css" or "codepoints"
• location: Source file or array of [source, output] pairs
• prefix: CSS class prefix (css mode only)
• cleanup: Remove source files after processing

copyFont

Copy existing font files

{
  "copyFont": {
    "location": "../../node_modules/font-awesome/fonts/fontawesome-webfont.ttf"
  }
}

• location: Source file path or array of [source, output] pairs

postScript

Execute shell commands after font generation

{
  "postScript": {
    "script": "node ../scripts/generate-metadata.js"
  }
}

Configuration Examples Copy Chapter

SVG to Font Generation (Feather Icons) Copy Section

{
  "generator-react-native-vector-icons": {
    "packageName": "feather",
    "upstreamFont": "feather-icons",
    "buildSteps": {
      "fontCustom": {
        "location": "node_modules/feather-icons/dist/icons"
      },
      "glyphmap": {
        "mode": "css",
        "cleanup": true
      }
    },
    "versions": [{ "rnvi": "12.0.0", "upstream": "4.29.2" }]
  }
}

CSS-based Font (FontAwesome) Copy Section

{
  "generator-react-native-vector-icons": {
    "packageName": "fontawesome",
    "postScriptName": "FontAwesome",
    "fontFileName": "FontAwesome",
    "className": "FontAwesome",
    "upstreamFont": "font-awesome",
    "buildSteps": {
      "glyphmap": {
        "location": "../../node_modules/font-awesome/css/font-awesome.css",
        "mode": "css",
        "prefix": ".fa-"
      },
      "copyFont": {
        "location": "../../node_modules/font-awesome/fonts/fontawesome-webfont.ttf"
      }
    },
    "versions": [{ "rnvi": "12.0.0", "upstream": "4.7.0" }]
  }
}

Codepoints-based Font (Material Icons) Copy Section

{
  "generator-react-native-vector-icons": {
    "packageName": "material-icons",
    "postScriptName": "MaterialIcons-Regular",
    "buildSteps": {
      "preScript": {
        "script": "mkdir -p fonts\nREF='f7bd4f25f3764883717c09a1fd867f560c9a9581'\ncurl https://raw.githubusercontent.com/google/material-design-icons/$REF/font/MaterialIcons-Regular.codepoints -Ls > MaterialIcons-Regular.codepoints\ncurl https://raw.githubusercontent.com/google/material-design-icons/$REF/font/MaterialIcons-Regular.ttf -Ls > fonts/MaterialIcons.ttf"
      },
      "glyphmap": {
        "location": "MaterialIcons-Regular.codepoints",
        "mode": "codepoints",
        "prefix": ".mdi-",
        "cleanup": true
      }
    },
    "versions": [{ "rnvi": "12.0.0", "upstream": "0.0.1" }]
  }
}

Multi-style Font (FontAwesome 6) Copy Section

/* Detailed source-code truncated for AI context efficiency. */

SVG Processing with Fixes (Ionicons) Copy Section

{
  "generator-react-native-vector-icons": {
    "packageName": "ionicons",
    "upstreamFont": "ionicons",
    "buildSteps": {
      "fixSVGPaths": {
        "location": "../../node_modules/ionicons/dist/svg"
      },
      "fontCustom": {
        "location": "fixedSvg",
        "cleanup": true
      },
      "fontforgeScript": {
        "script": "correct-direction.py"
      },
      "glyphmap": {
        "mode": "css",
        "cleanup": true
      }
    },
    "versions": [{ "rnvi": "12.0.0", "upstream": "7.4.0" }, { "rnvi": "12.0.1", "upstream": "8.0.8" }]
  }
}

Custom Font Package (Fontello) Copy Section

{
  "generator-react-native-vector-icons": {
    "packageName": "fontello",
    "customReadme": true,
    "customSrc": true,
    "copyCustomFonts": true
  }
}

Build Process Copy Chapter

1. Install Dependencies: The generator installs upstream font packages
2. Template Generation: Creates package.json, TypeScript files, Android/iOS config
3. Build Steps Execution: Runs configured build steps in order
4. Font Generation: Uses FontCustom in Docker container if needed
5. Glyph Mapping: Generates JSON mapping files for icons

Testing Your Font Package Copy Chapter

After generating your font package, test it in the example app:

# Start the example app (see CONTRIBUTING.md for details)
pnpm run example start
pnpm run example android  # or ios

Development Workflow Copy Chapter

For ongoing development and testing:

1. Make template changes to packages/generator-react-native-vector-icons/src/app/templates/
2. Regenerate fonts:
   sh Copy

   pnpm generate my-font

3. Test changes in the IconExplorer app
4. Run linting and tests (see CONTRIBUTING.md):
   sh Copy

   pnpm run lint
   pnpm run test

Submitting Your Font Package Copy Chapter

When ready to contribute your font package:

1. Follow commit conventions described in CONTRIBUTING.md
2. Create a pull request following the PR guidelines
3. Include documentation updates if needed
4. Ensure all tests pass in CI

Font Versioning Copy Chapter

Font package versions are independent of upstream font versions. We track the mapping in each font's README.md file as described in CONTRIBUTING.md.

Manual Generator Execution Copy Chapter

If needed, you can run the generator manually:

cd packages/my-font
npx yo react-native-vector-icons --current-version=1.0.0

Note: The pnpm generate command is the preferred method as it handles version management automatically.

File: docs/SETUP-EXPO.md Copy Chapter

Setup guide for Expo Apps

If you use React Native without Expo, please follow this guide instead. This guide applies to Expo apps only.

[!NOTE]
TL;DR: The default import bundles the .ttf into your JS bundle and registers it at runtime — works everywhere, including Expo Go. In a development build, the same .ttf is also copied into the native binary by autolinking, so it ends up shipping twice. The /static import is an optimization that skips the JS-bundle copy.

Dynamic import (default) Copy Chapter

import { MaterialIcons } from "@react-native-vector-icons/material-icons";

The default entry imports the .ttf, so Metro bundles it as a JS asset. When the icon first renders, expo-font registers it with the native text system at runtime. No native configuration or config plugin needed — this is the only option that works with Expo Go, and it lets the font be updated via OTA.

Static import (optimization for [Development Builds](https://docs.expo.dev/develop/development-builds/introduction/)) Copy Chapter

import { MaterialIcons } from "@react-native-vector-icons/material-icons/static";

In a development build, autolinking picks up each package's build.gradle / .podspec and copies the .ttf into the native binary at build time. Using the dynamic import on top of that means the same font also ships as a JS asset — so it's bundled twice.

The /static entry skips the .ttf import on the JS side, so Metro doesn't bundle it. The font reaches the device through the native build only, and the package's Expo config plugin registers it with iOS by adding it to UIAppFonts in Info.plist. To do that, add the icon packages you use to the plugins array in your app.json or app.config.js. For example:

{
  "expo": {
    "plugins": [
      "@react-native-vector-icons/material-icons",
      "@react-native-vector-icons/ionicons"
    ]
  }
}

Then run npx expo prebuild to regenerate the native project. Because this approach relies on the native build, it does not work with Expo Go, and the embedded font cannot be swapped via OTA updates.

[!TIP]
If you want to keep the dynamic import in a development build but avoid the .ttf duplication, you can exclude the package from autolinking instead. That skips the build.gradle / .podspec so only the JS-bundled copy ships.

[!WARNING]
Avoid manual font config duplication: do not add fonts from node_modules/@react-native-vector-icons/some-font to expo-font config plugin configuration.

About dynamic loading Copy Chapter

Dynamic loading is the runtime mechanism behind the default (dynamic) import — expo-font registers the JS-bundled .ttf with the native text system the first time an icon renders, so no native build step or config plugin is needed.

Dynamic loading is supported on Expo SDK >= 52.

Dynamic loading is currently limited to fonts shipped within the provided packages — it doesn't work out of the box with Pro fonts (such as FontAwesome Pro). To dynamically load custom fonts, use createIconSet with a fontSource as described in Custom Fonts.

Controlling dynamic loading Copy Section

@react-native-vector-icons/common exports the following functions:

• isDynamicLoadingEnabled: Returns whether dynamic loading is enabled.
• isDynamicLoadingSupported: Returns whether dynamic loading is supported by your runtime (checks that necessary Expo features are present).
• setDynamicLoadingEnabled: Enables or disables dynamic loading.
• setDynamicLoadingErrorCallback: Sets a callback that is called when an error occurs during dynamic loading (e.g. a misconfigured OTA update missing a font file).

File: docs/SETUP-REACT-NATIVE.md Copy Chapter

Setup guide for React Native Apps

If you use Expo, please follow this guide instead. This guide applies to vanilla React Native apps only.

Android Copy Section

1. Rebuild your app. No extra steps needed for Android.

iOS Copy Section

[!TIP]
You will need to follow these instructions any time you add a new font

1. To use the icon packages you previously installed on iOS, run:

npx rnvi-update-plist package.json ios/AppName/Info.plist

2. Open ios/Info.plist and verify that the property called Fonts provided by application (or UIAppFonts if opening the file in a text editor) is present and contains the expected entries. For example:

List of all available fonts that could be present in Info.plist

<key>UIAppFonts</key>
    <array>
      <string>FontAwesome6_Brands.ttf</string>
      <string>FontAwesome6_Regular.ttf</string>
      <string>FontAwesome6_Solid.ttf</string>
      <string>Octicons.ttf</string>
    </array>

3. Run pod install in the ios directory

cd ios && pod install

4. Rebuild your app

macOS Copy Section

This needs more work, see details in #1624

Windows Copy Section

1. Copy the needed fonts from node_modules/react-native-vector-icons/Fonts/* to windows//Assets/*
2. Open your solution on Visual Studio, right click on Assets, add Add Assets, then select your fonts, save and quit Visual Studio.
3. Rebuild your project

File: docs/SETUP-WEB.md Copy Chapter

Setup guide for Web Apps

This guide can probably be improved, please feel free to contribute.

React-native-web Setup Copy Section

To port a react-native mobile app to web using react-native-web you just need to ensure the fonts are known on the web-app side.

You will need add the font-family for each font you use to your css.

You can debug missing font-families by looking in the Developer console in your web browser when debugging your web app.

NOTE: if you're using webpack or similar you may need to configure webpack to handle loading of ttf fonts, using url-loader or file-loader. See Web Setup for more details.

In your App.css or similar add the font-family specifications:

@font-face {
  src: url(path/to/fonts/Ionicons.ttf);
  font-family: "Ionicons";
}

@font-face {
  src: url(path/to/fonts/FontAwesome.ttf);
  font-family: "FontAwesome";
}

@font-face {
  src: url(path/to/fonts/FontAwesome5_Brands.ttf);
  font-family: "FontAwesome5_Brands";
  font-weight: 400; /* Regular weight */
  font-style: normal;
}

@font-face {
  src: url(path/to/fonts/FontAwesome5_Regular.ttf);
  font-family: "FontAwesome5_Regular";
  font-weight: 400; /* Regular weight */
  font-style: normal;
}

@font-face {
  src: url(path/to/fonts/FontAwesome5_Solid.ttf);
  font-family: "FontAwesome5_Solid";
  font-weight: 900; /* Bold weight for solid */
  font-style: normal;
}

@font-face {
  src: url(path/to/fonts/MaterialIcons.ttf);
  font-family: "MaterialIcons";
}

@font-face {
  src: url(path/to/fonts/Feather.ttf);
  font-family: "Feather";
}

@font-face {
  src: url(path/to/fonts/MaterialCommunityIcons.ttf);
  font-family: "MaterialCommunityIcons";
}

/* TODO: Add other icons fonts here */

Web Setup Copy Section

To integrate the library with your web project using webpack, follow these steps:

1. In your webpack configuration file, add a section to handle TTF files using url-loader or file-loader:

   js Copy

   {
     test: /\.ttf$/,
     loader: "url-loader", // or directly file-loader
     include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
   }

2. In your JavaScript entry point, consume the font files and inject the necessary style tag:

   js Copy

   import Icon from '@react-native-vector-icons/fontAwesome';
   
   // Generate the required CSS
   import iconFont from '@react-native-vector-icons/fontawesome/fonts/FontAwesome.ttf';
   const iconFontStyles = `@font-face {
     src: url(${iconFont});
     font-family: FontAwesome;
   }`;
   
   // Create a stylesheet
   const style = document.createElement('style');
   style.type = 'text/css';
   
   // Append the iconFontStyles to the stylesheet
   if (style.styleSheet) {
     style.styleSheet.cssText = iconFontStyles;
   } else {
     style.appendChild(document.createTextNode(iconFontStyles));
   }
   
   // Inject the stylesheet into the document head
   document.head.appendChild(style);

   By following these steps, you will seamlessly integrate the vector icons
   library into your web project using webpack,
   enabling you to effortlessly use the icons within your web application.

File: packages/zocial/README.md Copy Chapter

React Native Vector Icons - Zocial

Zocial font for React Native Vector Icons

See the React Native Vector Icons README for more details.

Installation Copy Chapter

npm install @react-native-vector-icons/zocial

Usage Copy Chapter

import { Zocial } from '@react-native-vector-icons/zocial/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { Zocial } from '@react-native-vector-icons/zocial';

// ...

<Zocial name="house" color="#ff0000" size={20} />

Expo Config Plugin Copy Section

This package ships an Expo config plugin. Add it to the plugins array in your app.json or app.config.js if you use static imports:

{
  "expo": {
    "plugins": ["@react-native-vector-icons/zocial"]
  }
}

Versions Copy Chapter

Prior to version 12, the version of this font package tracked the upstream version.

The table below tracks which font version is included in each package version.

Contributing Copy Chapter

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

License Copy Chapter

MIT

File: packages/simple-line-icons/README.md Copy Chapter

React Native Vector Icons - Simple Line Icons

Simple Line Icons font for React Native Vector Icons

See the React Native Vector Icons README for more details.

Installation Copy Chapter

npm install @react-native-vector-icons/simple-line-icons

Usage Copy Chapter

import { SimpleLineIcons } from '@react-native-vector-icons/simple-line-icons/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { SimpleLineIcons } from '@react-native-vector-icons/simple-line-icons';

// ...

<SimpleLineIcons name="house" color="#ff0000" size={20} />

Expo Config Plugin Copy Section

This package ships an Expo config plugin. Add it to the plugins array in your app.json or app.config.js if you use static imports:

{
  "expo": {
    "plugins": ["@react-native-vector-icons/simple-line-icons"]
  }
}

Versions Copy Chapter

Prior to version 12, the version of this font package tracked the upstream version.

The table below tracks which font version is included in each package version.

Contributing Copy Chapter

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

License Copy Chapter

MIT

File: packages/octicons/README.md Copy Chapter

React Native Vector Icons - Octicons

Octicons font for React Native Vector Icons

See the React Native Vector Icons README for more details.

Installation Copy Chapter

npm install @react-native-vector-icons/octicons

Usage Copy Chapter

import { Octicons } from '@react-native-vector-icons/octicons/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { Octicons } from '@react-native-vector-icons/octicons';

// ...

<Octicons name="house" color="#ff0000" size={20} />

Expo Config Plugin Copy Section

This package ships an Expo config plugin. Add it to the plugins array in your app.json or app.config.js if you use static imports:

{
  "expo": {
    "plugins": ["@react-native-vector-icons/octicons"]
  }
}

Versions Copy Chapter

Prior to version 12, the version of this font package tracked the upstream version.

The table below tracks which font version is included in each package version.

Contributing Copy Chapter

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

License Copy Chapter

MIT

File: packages/material-icons/README.md Copy Chapter

React Native Vector Icons - Material Icons

Material Icons font for React Native Vector Icons

See the React Native Vector Icons README for more details.

Installation Copy Chapter

npm install @react-native-vector-icons/material-icons

Usage Copy Chapter

import { MaterialIcons } from '@react-native-vector-icons/material-icons/static';
// or with dynamic font loading (see the Expo setup guide for details)
import { MaterialIcons } from '@react-native-vector-icons/material-icons';

// ...

<MaterialIcons name="house" color="#ff0000" size={20} />

Expo Config Plugin Copy Section

This package ships an Expo config plugin. Add it to the plugins array in your app.json or app.config.js if you use static imports:

{
  "expo": {
    "plugins": ["@react-native-vector-icons/material-icons"]
  }
}

Versions Copy Chapter

Prior to version 12, the version of this font package tracked the upstream version.

The table below tracks which font version is included in each package version.

Contributing Copy Chapter

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

License Copy Chapter

MIT