Vector Icons for React Native

Travis npm npm

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.

Table of Contents

Sponsorship

Should you find this library beneficial, kindly contemplate the option of sponsoring. Our envisioned endeavors encompass the restructuring of the repository into a monorepo architecture. This transition will empower independent versioning of icon sets, enhance performance, reduce bundle size, and simplify community contributions. Your sponsorship plays a pivotal role in materializing these advancements.

Bundled Icon Sets

Explore all icons.

  • AntDesign from AntFinance (298 icons)
  • Entypo by Daniel Bruce (v1.0.1 with 411 icons)
  • EvilIcons designed by Alexander Madyankin & Roman Shamin (v1.10.1 with 70 icons)
  • Feather created by Cole Bemis & Contributors (v4.28.0 featuring 286 icons)
  • FontAwesome by Dave Gandy (v4.7.0 containing 675 icons)
  • FontAwesome 5 from Fonticons, Inc. (v5.15.3 offering 1598 free and 7848 pro icons)
  • FontAwesome 6 designed by Fonticons, Inc. (v6.1.2 featuring 2016 free and 16150 pro icons)
  • Fontisto created by Kenan Gündoğan (v3.0.4 featuring 615 icons)
  • Foundation by ZURB, Inc. (v3.0 with 283 icons)
  • Ionicons crafted by Ionic (v7.1.0 containing 1338 icons)
  • MaterialIcons by Google, Inc. (v4.0.0 featuring 2189 icons)
  • MaterialCommunityIcons from MaterialDesignIcons.com (v6.5.95 including 6596 icons)
  • Octicons designed by Github, Inc. (v16.3.1 with 250 icons)
  • Zocial by Sam Collins (v1.4.0 with 100 icons)
  • SimpleLineIcons crafted by Sabbir & Contributors (v2.5.5 with 189 icons)

Installation

  1. Install the package via npm:
    npm install --save react-native-vector-icons
  2. Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions.
  3. If you're planning to use FontAwesome 5 or 6 icons, refer to these guides: FontAwesome 5 | FontAwesome 6

iOS Setup

To use the bundled icons on iOS, follow these steps:

  • Navigate to node_modules/react-native-vector-icons and drag the Fonts folder (or select specific fonts) into your Xcode project.

    • Make sure your app is checked under "Add to targets," and if adding the whole folder, check "Create groups."
    • Not familiar with Xcode? Check out this article.
  • Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode autocomplete is not working):

    • List of all available fonts to copy & paste in 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>FontAwesome6_Brands.ttf</string>
        <string>FontAwesome6_Regular.ttf</string>
        <string>FontAwesome6_Solid.ttf</string>
        <string>Foundation.ttf</string>
        <string>Ionicons.ttf</string>
        <string>MaterialIcons.ttf</string>
        <string>MaterialCommunityIcons.ttf</string>
        <string>SimpleLineIcons.ttf</string>
        <string>Octicons.ttf</string>
        <string>Zocial.ttf</string>
        <string>Fontisto.ttf</string>
      </array>

    Above step might look something like this:

    XCode screenshot

  • In Xcode, select your project in the navigator, choose your app's target, go to the Build Phases tab, and under Copy Bundle Resources, add the copied fonts.

  • When using auto linking, it will automatically add all fonts to the Build Phases, Copy Pods Resources. Which will end up in your bundle. To avoid that, create a react-native.config.js file at the root of your react-native project with:

      module.exports = {
        dependencies: {
          'react-native-vector-icons': {
            platforms: {
              ios: null,
            },
          },
        },
      };

Note: Recompile your project after adding new fonts.

Android Setup

Option: With Gradle (recommended)

To make font management smoother on Android, use this method:

  • Edit android/app/build.gradle (NOT android/build.gradle) and add:

    apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

    To customize the fonts being copied, use:

    project.ext.vectoricons = [
        iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Specify font files
    ]
    
    apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
    
Monorepo configuration
If working in a monorepo, point to the correct paths of the `fonts.gradle` script and of the Font files, relative to the android/app/build.gradle file. Example structure:
your-monorepo/
├─ node_modules/
│  ├─ react-native-vector-icons
├─ apps/
│  ├─ YourApp/
│  │  ├─ android/
│  │  │  ├─ app/
│  │  │  │  ├─ build.gradle

Update paths like:

project.ext.vectoricons = [
+ iconFontsDir: "../../../../node_modules/react-native-vector-icons/Fonts",
  iconFontNames: ["YourFont.ttf", "..."]
]

- apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
+ apply from: "../../../../node_modules/react-native-vector-icons/fonts.gradle

⚠️ Reported issues have arisen when utilizing RNVI versions earlier than 9.0.0 within a monorepo context. Therefore, it's advisable to ensure your RNVI version is 9.0.0 or later.

Option: Manual Integration

To manually integrate the library, follow these steps:

  • Copy the contents from the Fonts folder and paste them into android/app/src/main/assets/fonts (ensure the folder name is lowercase, i.e., fonts).

Integrating Library for getImageSource Support

The following steps are optional and are only necessary if you intend to utilize the Icon.getImageSource function.

  • Edit the android/settings.gradle file as shown below:

    rootProject.name = 'MyApp'
    
    include ':app'
    
    + include ':react-native-vector-icons'
    + project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
  • Edit the android/app/build.gradle (located in the app folder) as shown below:

    apply plugin: 'com.android.application'
    
    android {
      ...
    }
    
    dependencies {
      implementation fileTree(dir: "libs", include: ["*.jar"])
      //noinspection GradleDynamicVersion
      implementation "com.facebook.react:react-native:+"  // From node_modules
    
    + implementation project(':react-native-vector-icons')
    }
  • Edit your MainApplication.java (located deep within android/app/src/main/java/...) as shown below (note that there are two places to edit):

    package com.myapp;
    
    + import com.oblador.vectoricons.VectorIconsPackage;
    
    ....
    
      @Override
      protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
          new MainReactPackage()
    +   , new VectorIconsPackage()
        );
      }

Please note that this optional step is necessary only if your react-native app doesn't support auto-linking; otherwise, you can skip this.

macOS Setup

via react-native-macos

To set up the library on your macOS project using react-native-macos, follow these steps:

  1. Browse to the node_modules/react-native-vector-icons folder and drag the Fonts folder into your project in Xcode. Ensure that your app is checked under "Add to targets," and select "Create folder references" when prompted.

  2. Edit your Info.plist and include a new property named Application fonts resource path (or ATSApplicationFontsPath if Xcode's autocomplete isn't functioning or you're not using Xcode). Set the value of this property to Fonts.

Please note that after adding new fonts, you need to recompile your project. Also, make sure that the Fonts folder is present under the Copy Bundle Resources section within the Build Phases of your Xcode project.

These steps will effectively integrate the vector icons library into your macOS project while utilizing the react-native-macos framework.

Windows Setup

via react-native-windows

To set up the library on your Windows project using react-native-windows, follow these steps:

  1. In the top-level projects (/windows/project-name/Assets), copy and paste the font files.

  2. Open your solution in Visual Studio:

    a. Right-click the Assets folder in your solution. b. Select Add > Existing Item. c. Browse and select the fonts that you copied into /windows/project-name/assets. d. Click Add.

Please note that after adding new fonts, you need to recompile your project.

By following these steps, you'll seamlessly integrate the vector icons library into your Windows project, leveraging the react-native-windows framework.

Web Setup

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:

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

      // Use the prebuilt version of RNVI located in the dist folder
      import Icon from 'react-native-vector-icons/dist/FontAwesome';
    
      // Generate the required CSS
      import iconFont from 'react-native-vector-icons/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.

Upgrading

Upgrading this package often requires the font files linked to your projects to be updated as well. If the automatic linking works for you, running this again should update the fonts. Otherwise you need to follow the steps outlined in the installation section.

Icon Component

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

import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = <Icon name="rocket" size={30} color="#900" />;

Properties

Any Text property and the following:

Prop Description Default
size Size of the icon, can also be passed as fontSize in the style object. 12
name What icon to show, see Icon Explorer app or one of the links above. None
color Color of the icon. Inherited

Static Methods

Prop Description
getFontFamily Returns the font family that is currently used to retrieve icons as text. Usage: const fontFamily = Icon.getFontFamily()
getImageSource Returns a promise that resolving to the source of a bitmap version of the icon for use with Image component et al. Usage: const source = await Icon.getImageSource(name, size, color)
getImageSourceSync Same as getImageSource but synchronous. Usage: const source = Icon.getImageSourceSync(name, size, color)
getRawGlyphMap Returns the raw glyph map of the icon set. Usage: const glyphMap = Icon.getRawGlyphMap()
hasIcon Checks if the name is valid in current icon set. Usage: const isNameValid = Icon.hasIcon(name)

Styling

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

NOTE: On android Text doesn't currently support border* styles, to circumvent this simply wrap your Icon with a View.

By combining some of these you can create for example :

type star

Icon.Button Component

A convenience component for creating buttons with an icon on the left side.

import Icon from 'react-native-vector-icons/FontAwesome';
const myButton = (
  <Icon.Button
    name="facebook"
    backgroundColor="#3b5998"
    onPress={this.loginWithFacebook}
  >
    Login with Facebook
  </Icon.Button>
);

const customTextButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998">
    <Text style={{ fontFamily: 'Arial', fontSize: 15 }}>
      Login with Facebook
    </Text>
  </Icon.Button>
);

buttons

Properties

Any Text, TouchableHighlight or TouchableWithoutFeedback property in addition to these:

Prop Description Default
color Text and icon color, use iconStyle or nest a Text component if you need different colors. white
size Icon size. 20
iconStyle Styles applied to the icon only, good for setting margins or a different color. Note: use iconStyle for margins or expect unstable behaviour. {marginRight: 10}
backgroundColor Background color of the button. #007AFF
borderRadius Border radius of the button, set to 0 to disable. 5
onPress A function called when the button is pressed. None

Usage as PNG Image/Source Object

Convenient way to plug this in into other components that rely on bitmap images rather than scalable vector icons. Takes the arguments name, size and color as described above.

Icon.getImageSource('user', 20, 'red').then(source =>
  this.setState({ userIcon: source })
);

Alternatively you may use the synchronous method Icon.getImageSourceSync to avoid rendering glitches. Keep in mind that this method is blocking and might incur performance penalties. Subsequent calls will use cache however.

Multi-Style Fonts

Some fonts today use multiple styles, FontAwesome 5 for example, which is supported by this library. The usage is pretty much the same as the standard Icon component:

import Icon from 'react-native-vector-icons/FontAwesome5';

const myIcon1 = <Icon name="comments" size={30} color="#900" />; // Defaults to regular
const myIcon2 = <Icon name="comments" size={30} color="#900" solid />;
const myIcon3 = <Icon name="comments" size={30} color="#900" light />; // Only in FA5 Pro

Static methods

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

Prop Description
getFontFamily Returns the font family that is currently used to retrieve icons as text. Usage: const fontFamily = Icon.getFontFamily(style)
getImageSource Returns a promise that resolving to the source of a bitmap version of the icon for use with Image component et al. Usage: const source = await Icon.getImageSource(name, size, color)
getImageSourceSync Same as getImageSource but synchronous. Usage: const source = Icon.getImageSourceSync(name, size, color)
getRawGlyphMap Returns the raw glyph map of the icon set. Usage: const glyphMap = Icon.getRawGlyphMap(style)
hasIcon Checks if the name is valid in current icon set. Usage: const isNameValid = Icon.hasIcon(name, style)
getStyledIconSet Use this to get a Icon component for a single style. Usage. const StyledIcon = Icon.getStyledIconSet(style)

If no style argument is passed (or if it's invalid) the methods will default to a pre-defineds fallback.

Components

Icon.Button is supported, usage is just like Icon:

import Icon from 'react-native-vector-icons/FontAwesome5';
const myButton = (
  <Icon.Button name="facebook" onPress={this.loginWithFacebook} solid>
    Login with Facebook
  </Icon.Button>
);

Custom Fonts

createIconSet(glyphMap, fontFamily[, fontFile])

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 it's character code. fontFamily is the name of the font NOT the filename. Open the font in Font Book.app or similar to learn the name. Optionally pass the third fontFile argument for android support, it should be the custom font file name.

import { createIconSet } from 'react-native-vector-icons';
const glyphMap = { 'icon-name': 1234, test: '∆' };
const Icon = createIconSet(glyphMap, 'FontName', 'font-name.ttf');

createIconSetFromFontello(config[, fontFamily[, fontFile]])

Convenience method to create a custom font based on a fontello config file. Don't forget to import the font as described above and drop the config.json somewhere convenient in your project.

import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from './config.json';
const Icon = createIconSetFromFontello(fontelloConfig);

createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
const Icon = createIconSetFromIcoMoon(
  icoMoonConfig,
  'LineAwesome',
  'line-awesome.ttf'
);

Make sure you're using the Download option in IcoMoon, and use the .json file that's included in the .zip you've downloaded. You'll also need to import the .ttf font file into your project, following the instructions above.

createMultiStyleIconSet(styles [, options])

import { createMultiStyleIconSet } from 'react-native-vector-icons';

/*
 * This is just example code, you are free to
 * design your glyphmap and styles to your liking
 */

import glyphmap from './glyphmap.json';
/*
 * glyphmap = {
 *   "style1": [
 *     "hello",
 *     "world"
 *   ],
 *   "style2": [
 *     "foo",
 *     "bar"
 *   ]
 * }
 */

const glyphKeys = Object.keys(glyphmap); /* ["style1", "style2"] */
const options = {
  defaultStyle: 'style1',
  glyphValidator: (name, style) => glyphKeys.indexOf(name) !== -1,
  fallbackFamily: (name) => {
    for (let i = 0; i < glyphKeys.length; i++) {
      const style = glyphKeys[i];
      if (glyphmap[style].indexOf(name) !== -1) {
        return style;
      }
    }

    /* Always return some family */
    return glyphKeys[0];
  }
};

/*
 * The styles object consits of keys, which will be
 * used as the styles later, and objects which are
 * used as style objects for the font. The style
 * should have unique characteristics for each font
 * in order to ensure that the right one will be
 * chosen. FontAwesome 5 uses font weight since
 * 5.7.0 in order to diffirentiate the styles but
 * other properties (like fontFamily) can be used.
 * It's just a standard RN style object.
 */
const styles = {
  style1: {
    fontWeight: '700'
  },
  style2: {
    fontWeight: '100'
  }
};

const Icon = createMultiStyleIconSet(styles, options);

/* Uses default style (style1) */
<Icon name={'hello'} />
<Icon name={'world'} style1 />
/* Default style is style1 but this will fall back to style2 */
<Icon name={'foo'} />
/* This will also fall back to style2 */
<Icon name={'foo'} style1 />
/* Regular use of style2 */
<Icon name={'bar'} style2 />
option Description default
defaultStyle The name of the style to be used if no style is supplied during rendering. Object.keys(styles)[0]
fallbackFamily Function for selecting a family if a glyph is not available. The function should accept the name of the glyph as a parameter. Returns the name if the family. (name) => Object.keys(styles)[0]
glyphValidator Function for validating that a glyph is available for a chosen style. It has name and style as parameters, in that order. Returns true if the glyph is valid or false if it's not. (name, style) => true

iOS

You have to manually make a reference of your .ttf on your xcodeproj Resources folder and in Info.plist.

Animation

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.

Usage Examples

IconExplorer

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

Screenshot of IconExplorer

Basic Example

import Icon from 'react-native-vector-icons/Ionicons';

function ExampleView(props) {
  return <Icon name="ios-person" size={30} color="#4F8EF7" />;
}

TabBar

Since TabBarIOS was removed from core in favor of @react-navigation/bottom-tabs, it is also removed as a convenience component from this library. Simply use the Icon instead, but don't forget to import and link to this project as described above first.

Below is an example taken from react-navigation:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      screenOptions={{
        activeTintColor: '#e91e63',
      }}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: 'Updates',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="bell" color={color} size={size} />
          ),
          tabBarBadge: 3,
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

ToolbarAndroid

Since ToolbarAndroid was removed from core, it is also removed as a convenience component from this library. Simply use getImageSourceSync instead, but don't forget to import and link to this project as described above first.

import ToolbarAndroid from '@react-native-community/toolbar-android';
import Icon from 'react-native-vector-icons/Ionicons';

const navIcon = Icon.getImageSourceSync('md-arrow-back', 24, 'white');
const overflowIcon = Icon.getImageSourceSync('md-more', 24, 'white');
const settingsIcon = Icon.getImageSourceSync('md-settings', 30, 'white');
const twitterIcon = Icon.getImageSourceSync('logo-twitter', 25, '#4099FF');

function ToolbarView(props) {
  return (
    <ToolbarAndroid
      title="Home"
      titleColor="white"
      navIcon={navIcon}
      onIconClicked={props.navigator.pop}
      actions={[
        {
          title: 'Settings',
          icon: settingsIcon,
          show: 'always',
        },
        {
          title: 'Follow me on Twitter',
          icon: twitterIcon,
          show: 'ifRoom',
        },
      ]}
      overflowIcon={overflowIcon}
    />
  );
}

Inline Icons

import { Text } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

function ExampleView(props) {
  return (
    <Text>
      Lorem <Icon name="ios-book" color="#4F8EF7" /> Ipsum
    </Text>
  );
}

Generating Your Own Icon Set from a CSS File

If you already have an icon font with associated CSS file then you can easily generate a icon set with the generate-icon script.

Example usage:

./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon > Components/MyIcon.js

Options

Any flags not listed below, like --componentName and --fontFamily, will be passed on to the template.

-p, --prefix

CSS selector prefix [default: ".icon-"]

-t, --template

Template in JS template string format [default: "./template/iconSet.tpl"]

For default template please provide --componentName and --fontFamily.

-o, --output

Save output to file, defaults to STDOUT

Troubleshooting

The icons show up as a crossed out box on Android

  • Make sure you've copied the font to android/app/src/main/assets/fonts.
  • Delete the build folder with rm -rf android/app/build.
  • Recompile the project.

Red screen with "Unrecognized font family" error on iOS

  • Make sure you've added manually the reference of your .ttf on your xcodeproj Resources folder.
  • Check that the font you are trying to use appears in Info.plist, if you've added the whole folder and it's blue in color, then you need to add it to the path.
  • Check that the font is copied in the Copy Bundle Resources in Build Phases.
  • Delete the build folder with rm -rf ios/build
  • Recompile the project.

Android build fails on Windows for no good reason

Both npm and android file hierarchies tend to get very deep and even worse when you combine them. Since Windows file system has a max length, long file name addresses will result in numerous errors including Execution failed for task ':react-native-vector-icons:processReleaseResources'. So try to keep the path to your project folder as short as possible.

Wrong icons are shown after upgrading this package

You probably didn't update the font files linked to your native project after upgrading. However, this only applies to Android targets since iOS bundles the fonts when building the app (try to clean your build from Xcode if the problem exists). On android you can relink the project or you manually update the fonts. To have them automatically synced use the gradle approach.

Some icons are missing after upgrading this package

Sometimes vendors decides to remove some icons from newer releases, this has nothing to do with this package. If you depend on an older version of a font you can add it as a custom font.

License

This project is licenced under the MIT License.

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

oblador/react-native-vector-icons

{
"props": {
"initialPayload": {
"allShortcutsEnabled": false,
"path": "/",
"repo": {
"id": 35685034,
"defaultBranch": "master",
"name": "react-native-vector-icons",
"ownerLogin": "oblador",
"currentUserCanPush": false,
"isFork": false,
"isEmpty": false,
"createdAt": "2015-05-15T16:38:57.000Z",
"ownerAvatar": "https://avatars.githubusercontent.com/u/378279?v=4",
"public": true,
"private": false,
"isOrgOwned": false
},
"currentUser": null,
"refInfo": {
"name": "master",
"listCacheKey": "v0:1704159674.0",
"canEdit": false,
"refType": "branch",
"currentOid": "cab985e93a4299b0b165fe303a5efb334a13210f"
},
"tree": {
"items": [
{
"name": ".github",
"path": ".github",
"contentType": "directory"
},
{
"name": "Examples/IconExplorer",
"path": "Examples/IconExplorer",
"contentType": "directory",
"hasSimplifiedPath": true
},
{
"name": "Fonts",
"path": "Fonts",
"contentType": "directory"
},
{
"name": "RNVectorIcons.xcodeproj",
"path": "RNVectorIcons.xcodeproj",
"contentType": "directory"
},
{
"name": "RNVectorIconsManager",
"path": "RNVectorIconsManager",
"contentType": "directory"
},
{
"name": "android",
"path": "android",
"contentType": "directory"
},
{
"name": "bin",
"path": "bin",
"contentType": "directory"
},
{
"name": "directory",
"path": "directory",
"contentType": "directory"
},
{
"name": "glyphmaps",
"path": "glyphmaps",
"contentType": "directory"
},
{
"name": "lib",
"path": "lib",
"contentType": "directory"
},
{
"name": "scripts",
"path": "scripts",
"contentType": "directory"
},
{
"name": "templates",
"path": "templates",
"contentType": "directory"
},
{
"name": ".babelrc",
"path": ".babelrc",
"contentType": "file"
},
{
"name": ".editorconfig",
"path": ".editorconfig",
"contentType": "file"
},
{
"name": ".eslintrc",
"path": ".eslintrc",
"contentType": "file"
},
{
"name": ".gitignore",
"path": ".gitignore",
"contentType": "file"
},
{
"name": ".node-version",
"path": ".node-version",
"contentType": "file"
},
{
"name": ".npmignore",
"path": ".npmignore",
"contentType": "file"
},
{
"name": ".prettierrc",
"path": ".prettierrc",
"contentType": "file"
},
{
"name": "AntDesign.js",
"path": "AntDesign.js",
"contentType": "file"
},
{
"name": "CONTRIBUTING.md",
"path": "CONTRIBUTING.md",
"contentType": "file"
},
{
"name": "Entypo.js",
"path": "Entypo.js",
"contentType": "file"
},
{
"name": "EvilIcons.js",
"path": "EvilIcons.js",
"contentType": "file"
},
{
"name": "FONTAWESOME5.md",
"path": "FONTAWESOME5.md",
"contentType": "file"
},
{
"name": "FONTAWESOME6.md",
"path": "FONTAWESOME6.md",
"contentType": "file"
},
{
"name": "Feather.js",
"path": "Feather.js",
"contentType": "file"
},
{
"name": "FontAwesome.js",
"path": "FontAwesome.js",
"contentType": "file"
},
{
"name": "FontAwesome5.js",
"path": "FontAwesome5.js",
"contentType": "file"
},
{
"name": "FontAwesome5Pro.js",
"path": "FontAwesome5Pro.js",
"contentType": "file"
},
{
"name": "FontAwesome6.js",
"path": "FontAwesome6.js",
"contentType": "file"
},
{
"name": "FontAwesome6Pro.js",
"path": "FontAwesome6Pro.js",
"contentType": "file"
},
{
"name": "Fontisto.js",
"path": "Fontisto.js",
"contentType": "file"
},
{
"name": "Foundation.js",
"path": "Foundation.js",
"contentType": "file"
},
{
"name": "Ionicons.js",
"path": "Ionicons.js",
"contentType": "file"
},
{
"name": "LICENSE",
"path": "LICENSE",
"contentType": "file"
},
{
"name": "MaterialCommunityIcons.js",
"path": "MaterialCommunityIcons.js",
"contentType": "file"
},
{
"name": "MaterialIcons.js",
"path": "MaterialIcons.js",
"contentType": "file"
},
{
"name": "Octicons.js",
"path": "Octicons.js",
"contentType": "file"
},
{
"name": "README.md",
"path": "README.md",
"contentType": "file"
},
{
"name": "RNIMigration.js",
"path": "RNIMigration.js",
"contentType": "file"
},
{
"name": "RNVectorIcons.podspec",
"path": "RNVectorIcons.podspec",
"contentType": "file"
},
{
"name": "SimpleLineIcons.js",
"path": "SimpleLineIcons.js",
"contentType": "file"
},
{
"name": "Zocial.js",
"path": "Zocial.js",
"contentType": "file"
},
{
"name": "bower.json",
"path": "bower.json",
"contentType": "file"
},
{
"name": "fonts.gradle",
"path": "fonts.gradle",
"contentType": "file"
},
{
"name": "index.js",
"path": "index.js",
"contentType": "file"
},
{
"name": "index.js.flow",
"path": "index.js.flow",
"contentType": "file"
},
{
"name": "package.json",
"path": "package.json",
"contentType": "file"
},
{
"name": "yarn.lock",
"path": "yarn.lock",
"contentType": "file"
}
],
"templateDirectorySuggestionUrl": null,
"readme": null,
"totalCount": 49,
"showBranchInfobar": false
},
"fileTree": null,
"fileTreeProcessingTime": null,
"foldersToFetch": [],
"treeExpanded": false,
"symbolsExpanded": false,
"isOverview": true,
"overview": {
"banners": {
"shouldRecommendReadme": false,
"isPersonalRepo": false,
"showUseActionBanner": false,
"actionSlug": null,
"actionId": null,
"showProtectBranchBanner": false,
"publishBannersInfo": {
"dismissActionNoticePath": "/settings/dismiss-notice/publish_action_from_repo",
"releasePath": "/oblador/react-native-vector-icons/releases/new?marketplace=true",
"showPublishActionBanner": false
},
"interactionLimitBanner": null,
"showInvitationBanner": false,
"inviterName": null
},
"codeButton": {
"contactPath": "/contact",
"isEnterprise": false,
"local": {
"protocolInfo": {
"httpAvailable": true,
"sshAvailable": null,
"httpUrl": "https://github.com/oblador/react-native-vector-icons.git",
"showCloneWarning": null,
"sshUrl": null,
"sshCertificatesRequired": null,
"sshCertificatesAvailable": null,
"ghCliUrl": "gh repo clone oblador/react-native-vector-icons",
"defaultProtocol": "http",
"newSshKeyUrl": "/settings/ssh/new",
"setProtocolPath": "/users/set_protocol"
},
"platformInfo": {
"cloneUrl": "https://desktop.github.com",
"showVisualStudioCloneButton": false,
"visualStudioCloneUrl": "https://windows.github.com",
"showXcodeCloneButton": false,
"xcodeCloneUrl": "https://developer.apple.com",
"zipballUrl": "/oblador/react-native-vector-icons/archive/refs/heads/master.zip"
}
},
"newCodespacePath": "/codespaces/new?hide_repo_select=true&repo=35685034"
},
"popovers": {
"rename": null,
"renamedParentRepo": null
},
"commitCount": "618",
"overviewFiles": [
{
"displayName": "README.md",
"repoName": "react-native-vector-icons",
"refName": "master",
"path": "README.md",
"preferredFileType": "readme",
"tabName": "README",
"richText": "<article class=\"markdown-body entry-content container-lg\" itemprop=\"text\"><p dir=\"auto\"><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://cloud.githubusercontent.com/assets/378279/12009887/33f4ae1c-ac8d-11e5-8666-7a87458753ee.png\"><img src=\"https://cloud.githubusercontent.com/assets/378279/12009887/33f4ae1c-ac8d-11e5-8666-7a87458753ee.png\" alt=\"Vector Icons for React Native\" style=\"max-width: 100%;\"></a></p>\n<p dir=\"auto\"><a href=\"https://travis-ci.org/oblador/react-native-vector-icons\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/7c1f7eb9909aa61008a481f703356656f4b18500d8091b97acd064874d88eb07/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f6f626c61646f722f72656163742d6e61746976652d766563746f722d69636f6e732e737667\" alt=\"Travis\" data-canonical-src=\"https://img.shields.io/travis/oblador/react-native-vector-icons.svg\" style=\"max-width: 100%;\"></a> <a href=\"https://npmjs.com/package/react-native-vector-icons\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/88eeb1e45d478fb1162c0662f35d0c5154c8ae6fa28a74fdeadd4f1445459d15/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d766563746f722d69636f6e732e737667\" alt=\"npm\" data-canonical-src=\"https://img.shields.io/npm/v/react-native-vector-icons.svg\" style=\"max-width: 100%;\"></a> <a href=\"https://npmjs.com/package/react-native-vector-icons\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/a63d6013659d2b37079588dc8287016c5ff92c78581d91d6159a28e824ee7580/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f72656163742d6e61746976652d766563746f722d69636f6e732e737667\" alt=\"npm\" data-canonical-src=\"https://img.shields.io/npm/dm/react-native-vector-icons.svg\" style=\"max-width: 100%;\"></a></p>\n<div class=\"markdown-heading\" dir=\"auto\"><h1 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">React Native Vector Icons</h1><a id=\"user-content-react-native-vector-icons\" class=\"anchor\" aria-label=\"Permalink: React Native Vector Icons\" href=\"#react-native-vector-icons\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">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.</p>\n<p dir=\"auto\">For the integration of <code>.svg</code> files natively, you can explore <a href=\"https://github.com/oblador/react-native-vector-image\"><code>react-native-vector-image</code></a>.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Table of Contents</h2><a id=\"user-content-table-of-contents\" class=\"anchor\" aria-label=\"Permalink: Table of Contents\" href=\"#table-of-contents\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<ul dir=\"auto\">\n<li><a href=\"#bundled-icon-sets\">Bundled Icon Sets</a></li>\n<li><a href=\"#installation\">Installation</a>\n<ul dir=\"auto\">\n<li><a href=\"#ios-setup\">iOS Setup</a></li>\n<li><a href=\"#android-setup\">Android Setup</a></li>\n<li><a href=\"#macos-setup\">macOS Setup</a></li>\n<li><a href=\"#windows-setup\">Windows Setup</a></li>\n<li><a href=\"#web-setup\">Web Setup</a></li>\n</ul>\n</li>\n<li><a href=\"#upgrading\">Upgrading</a></li>\n<li><a href=\"#icon-component\">Icon Component</a></li>\n<li><a href=\"#iconbutton-component\">Icon.Button Component</a></li>\n<li><a href=\"#usage-as-png-imagesource-object\">Usage as PNG Image/Source Object</a></li>\n<li><a href=\"#multi-style-fonts\">Multi-Style Fonts</a></li>\n<li><a href=\"#custom-fonts\">Custom Fonts</a></li>\n<li><a href=\"#animation\">Animation</a></li>\n<li><a href=\"#usage-examples\">Usage Examples</a></li>\n<li><a href=\"#tabbar\">TabBar</a></li>\n<li><a href=\"#generating-your-own-icon-set-from-a-css-file\">Generating Your Own Icon Set from a CSS File</a></li>\n<li><a href=\"https://github.com/oblador/react-native-vector-icons/releases\">Changelog</a></li>\n<li><a href=\"#troubleshooting\">Troubleshooting</a></li>\n<li><a href=\"#license\">License</a></li>\n</ul>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Sponsorship</h2><a id=\"user-content-sponsorship\" class=\"anchor\" aria-label=\"Permalink: Sponsorship\" href=\"#sponsorship\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Should you find this library beneficial, kindly contemplate the option of <a href=\"https://github.com/sponsors/oblador\">sponsoring</a>. Our envisioned endeavors encompass the restructuring of the repository into a monorepo architecture. This transition will empower independent versioning of icon sets, enhance performance, reduce bundle size, and simplify community contributions. Your sponsorship plays a pivotal role in materializing these advancements.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Bundled Icon Sets</h2><a id=\"user-content-bundled-icon-sets\" class=\"anchor\" aria-label=\"Permalink: Bundled Icon Sets\" href=\"#bundled-icon-sets\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\"><a href=\"https://oblador.github.io/react-native-vector-icons/\" rel=\"nofollow\">Explore all icons</a>.</p>\n<ul dir=\"auto\">\n<li><a href=\"https://ant.design/\" rel=\"nofollow\"><code>AntDesign</code></a> from AntFinance (<em>298</em> icons)</li>\n<li><a href=\"http://entypo.com\" rel=\"nofollow\"><code>Entypo</code></a> by Daniel Bruce (v1.0.1 with <em>411</em> icons)</li>\n<li><a href=\"http://evil-icons.io\" rel=\"nofollow\"><code>EvilIcons</code></a> designed by Alexander Madyankin &amp; Roman Shamin (v1.10.1 with <em>70</em> icons)</li>\n<li><a href=\"http://feathericons.com\" rel=\"nofollow\"><code>Feather</code></a> created by Cole Bemis &amp; Contributors (v4.28.0 featuring <em>286</em> icons)</li>\n<li><a href=\"http://fortawesome.github.io/Font-Awesome/icons/\" rel=\"nofollow\"><code>FontAwesome</code></a> by Dave Gandy (v4.7.0 containing <em>675</em> icons)</li>\n<li><a href=\"https://fontawesome.com/v5/icons/\" rel=\"nofollow\"><code>FontAwesome 5</code></a> from Fonticons, Inc. (v5.15.3 offering <em>1598</em> free and <em>7848</em> pro icons)</li>\n<li><a href=\"https://fontawesome.com\" rel=\"nofollow\"><code>FontAwesome 6</code></a> designed by Fonticons, Inc. (v6.1.2 featuring <em>2016</em> free and <em>16150</em> pro icons)</li>\n<li><a href=\"https://github.com/kenangundogan/fontisto\"><code>Fontisto</code></a> created by Kenan Gündoğan (v3.0.4 featuring <em>615</em> icons)</li>\n<li><a href=\"http://zurb.com/playground/foundation-icon-fonts-3\" rel=\"nofollow\"><code>Foundation</code></a> by ZURB, Inc. (v3.0 with <em>283</em> icons)</li>\n<li><a href=\"https://ionicons.com/\" rel=\"nofollow\"><code>Ionicons</code></a> crafted by Ionic (v7.1.0 containing <em>1338</em> icons)</li>\n<li><a href=\"https://fonts.google.com/icons/\" rel=\"nofollow\"><code>MaterialIcons</code></a> by Google, Inc. (v4.0.0 featuring <em>2189</em> icons)</li>\n<li><a href=\"https://materialdesignicons.com/\" rel=\"nofollow\"><code>MaterialCommunityIcons</code></a> from MaterialDesignIcons.com (v6.5.95 including <em>6596</em> icons)</li>\n<li><a href=\"http://octicons.github.com\"><code>Octicons</code></a> designed by Github, Inc. (v16.3.1 with <em>250</em> icons)</li>\n<li><a href=\"http://zocial.smcllns.com/\" rel=\"nofollow\"><code>Zocial</code></a> by Sam Collins (v1.4.0 with <em>100</em> icons)</li>\n<li><a href=\"https://simplelineicons.github.io/\" rel=\"nofollow\"><code>SimpleLineIcons</code></a> crafted by Sabbir &amp; Contributors (v2.5.5 with <em>189</em> icons)</li>\n</ul>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Installation</h2><a id=\"user-content-installation\" class=\"anchor\" aria-label=\"Permalink: Installation\" href=\"#installation\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<ol dir=\"auto\">\n<li>Install the package via npm:\n<div class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"npm install --save react-native-vector-icons\"><pre>npm install --save react-native-vector-icons</pre></div>\n</li>\n<li>Depending on the platform you're targeting (iOS/Android/Windows), follow the appropriate setup instructions.</li>\n<li>If you're planning to use FontAwesome 5 or 6 icons, refer to these guides: <a href=\"/oblador/react-native-vector-icons/blob/master/FONTAWESOME5.md\">FontAwesome 5</a> | <a href=\"/oblador/react-native-vector-icons/blob/master/FONTAWESOME6.md\">FontAwesome 6</a></li>\n</ol>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">iOS Setup</h3><a id=\"user-content-ios-setup\" class=\"anchor\" aria-label=\"Permalink: iOS Setup\" href=\"#ios-setup\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">To use the bundled icons on iOS, follow these steps:</p>\n<ul dir=\"auto\">\n<li>\n<p dir=\"auto\">Navigate to <code>node_modules/react-native-vector-icons</code> and drag the <code>Fonts</code> folder (or select specific fonts) into your Xcode project.</p>\n<ul dir=\"auto\">\n<li>Make sure your app is checked under \"Add to targets,\" and if adding the whole folder, check \"Create groups.\"</li>\n<li>Not familiar with Xcode? Check out this <a href=\"https://medium.com/@vimniky/how-to-use-vector-icons-in-your-react-native-project-8212ac6a8f06\" rel=\"nofollow\">article</a>.</li>\n</ul>\n</li>\n<li>\n<p dir=\"auto\">Edit <code>Info.plist</code> and add a property called <strong>Fonts provided by application</strong> (or <strong>UIAppFonts</strong> if Xcode autocomplete is not working):</p>\n<ul dir=\"auto\">\n<li>\n<details><summary>List of all available fonts to copy &amp; paste in Info.plist</summary>\n<div class=\"highlight highlight-text-xml notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"&lt;key&gt;UIAppFonts&lt;/key&gt;\n&lt;array&gt;\n &lt;string&gt;AntDesign.ttf&lt;/string&gt;\n &lt;string&gt;Entypo.ttf&lt;/string&gt;\n &lt;string&gt;EvilIcons.ttf&lt;/string&gt;\n &lt;string&gt;Feather.ttf&lt;/string&gt;\n &lt;string&gt;FontAwesome.ttf&lt;/string&gt;\n &lt;string&gt;FontAwesome5_Brands.ttf&lt;/string&gt;\n &lt;string&gt;FontAwesome5_Regular.ttf&lt;/string&gt;\n &lt;string&gt;FontAwesome5_Solid.ttf&lt;/string&gt;\n &lt;string&gt;FontAwesome6_Brands.ttf&lt;/string&gt;\n &lt;string&gt;FontAwesome6_Regular.ttf&lt;/string&gt;\n &lt;string&gt;FontAwesome6_Solid.ttf&lt;/string&gt;\n &lt;string&gt;Foundation.ttf&lt;/string&gt;\n &lt;string&gt;Ionicons.ttf&lt;/string&gt;\n &lt;string&gt;MaterialIcons.ttf&lt;/string&gt;\n &lt;string&gt;MaterialCommunityIcons.ttf&lt;/string&gt;\n &lt;string&gt;SimpleLineIcons.ttf&lt;/string&gt;\n &lt;string&gt;Octicons.ttf&lt;/string&gt;\n &lt;string&gt;Zocial.ttf&lt;/string&gt;\n &lt;string&gt;Fontisto.ttf&lt;/string&gt;\n&lt;/array&gt;\"><pre>&lt;<span class=\"pl-ent\">key</span>&gt;UIAppFonts&lt;/<span class=\"pl-ent\">key</span>&gt;\n&lt;<span class=\"pl-ent\">array</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;AntDesign.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;Entypo.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;EvilIcons.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;Feather.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;FontAwesome.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;FontAwesome5_Brands.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;FontAwesome5_Regular.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;FontAwesome5_Solid.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;FontAwesome6_Brands.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;FontAwesome6_Regular.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;FontAwesome6_Solid.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;Foundation.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;Ionicons.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;MaterialIcons.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;MaterialCommunityIcons.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;SimpleLineIcons.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;Octicons.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;Zocial.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n &lt;<span class=\"pl-ent\">string</span>&gt;Fontisto.ttf&lt;/<span class=\"pl-ent\">string</span>&gt;\n&lt;/<span class=\"pl-ent\">array</span>&gt;</pre></div>\n</details></li>\n</ul>\n\n<p dir=\"auto\">Above step might look something like this:</p>\n<p dir=\"auto\"><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://cloud.githubusercontent.com/assets/378279/12421498/2db1f93a-be88-11e5-89c8-2e563ba6251a.png\"><img src=\"https://cloud.githubusercontent.com/assets/378279/12421498/2db1f93a-be88-11e5-89c8-2e563ba6251a.png\" alt=\"XCode screenshot\" style=\"max-width: 100%;\"></a></p>\n</li>\n<li>\n<p dir=\"auto\">In Xcode, select your project in the navigator, choose your app's target, go to the <strong>Build Phases</strong> tab, and under <strong>Copy Bundle Resources</strong>, add the copied fonts.</p>\n</li>\n<li>\n<p dir=\"auto\">When using auto linking, it will automatically add all fonts to the <strong>Build Phases</strong>, <strong>Copy Pods Resources</strong>. Which will end up in your bundle.\nTo avoid that, create a <code>react-native.config.js</code> file at the root of your react-native project with:</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\" module.exports = {\n dependencies: {\n 'react-native-vector-icons': {\n platforms: {\n ios: null,\n },\n },\n },\n };\"><pre> <span class=\"pl-smi\">module</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">exports</span> <span class=\"pl-c1\">=</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">dependencies</span>: <span class=\"pl-kos\">{</span>\n <span class=\"pl-s\">'react-native-vector-icons'</span>: <span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">platforms</span>: <span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">ios</span>: <span class=\"pl-c1\">null</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-kos\">}</span><span class=\"pl-kos\">;</span></pre></div>\n</li>\n</ul>\n<p dir=\"auto\"><em>Note: Recompile your project after adding new fonts.</em></p>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Android Setup</h3><a id=\"user-content-android-setup\" class=\"anchor\" aria-label=\"Permalink: Android Setup\" href=\"#android-setup\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<div class=\"markdown-heading\" dir=\"auto\"><h4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Option: With Gradle (recommended)</h4><a id=\"user-content-option-with-gradle-recommended\" class=\"anchor\" aria-label=\"Permalink: Option: With Gradle (recommended)\" href=\"#option-with-gradle-recommended\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">To make font management smoother on Android, use this method:</p>\n<ul dir=\"auto\">\n<li>\n<p dir=\"auto\">Edit <code>android/app/build.gradle</code> (NOT <code>android/build.gradle</code>) and add:</p>\n<div class=\"highlight highlight-source-groovy-gradle notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"apply from: file(&quot;../../node_modules/react-native-vector-icons/fonts.gradle&quot;)\"><pre>apply <span class=\"pl-c1\">from</span>: file(<span class=\"pl-s\"><span class=\"pl-pds\">\"</span>../../node_modules/react-native-vector-icons/fonts.gradle<span class=\"pl-pds\">\"</span></span>)</pre></div>\n<p dir=\"auto\">To customize the fonts being copied, use:</p>\n<div class=\"highlight highlight-source-groovy-gradle notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"project.ext.vectoricons = [\n iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Specify font files\n]\n\napply from: file(&quot;../../node_modules/react-native-vector-icons/fonts.gradle&quot;)\n\"><pre>project<span class=\"pl-k\">.</span>ext<span class=\"pl-k\">.</span>vectoricons <span class=\"pl-k\">=</span> [\n <span class=\"pl-c1\">iconFontNames</span>: [ <span class=\"pl-s\"><span class=\"pl-pds\">'</span>MaterialIcons.ttf<span class=\"pl-pds\">'</span></span>, <span class=\"pl-s\"><span class=\"pl-pds\">'</span>EvilIcons.ttf<span class=\"pl-pds\">'</span></span> ] <span class=\"pl-c\"><span class=\"pl-c\">//</span> Specify font files</span>\n]\n\napply <span class=\"pl-c1\">from</span>: file(<span class=\"pl-s\"><span class=\"pl-pds\">\"</span>../../node_modules/react-native-vector-icons/fonts.gradle<span class=\"pl-pds\">\"</span></span>)\n</pre></div>\n</li>\n</ul>\n<details>\n<summary>Monorepo configuration</summary>\n\n<br>\nIf working in a monorepo, point to the correct paths of the `fonts.gradle` script and of the Font files, relative to the android/app/build.gradle file. Example structure:\n<div class=\"snippet-clipboard-content notranslate position-relative overflow-auto\" data-snippet-clipboard-copy-content=\"your-monorepo/\n├─ node_modules/\n│ ├─ react-native-vector-icons\n├─ apps/\n│ ├─ YourApp/\n│ │ ├─ android/\n│ │ │ ├─ app/\n│ │ │ │ ├─ build.gradle\"><pre lang=\"text\" class=\"notranslate\"><code>your-monorepo/\n├─ node_modules/\n│ ├─ react-native-vector-icons\n├─ apps/\n│ ├─ YourApp/\n│ │ ├─ android/\n│ │ │ ├─ app/\n│ │ │ │ ├─ build.gradle\n</code></pre></div>\n<p dir=\"auto\">Update paths like:</p>\n<div class=\"highlight highlight-source-diff notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"project.ext.vectoricons = [\n+ iconFontsDir: &quot;../../../../node_modules/react-native-vector-icons/Fonts&quot;,\n iconFontNames: [&quot;YourFont.ttf&quot;, &quot;...&quot;]\n]\n\n- apply from: &quot;../../node_modules/react-native-vector-icons/fonts.gradle&quot;\n+ apply from: &quot;../../../../node_modules/react-native-vector-icons/fonts.gradle\"><pre>project.ext.vectoricons = [\n<span class=\"pl-mi1\"><span class=\"pl-mi1\">+</span> iconFontsDir: \"../../../../node_modules/react-native-vector-icons/Fonts\",</span>\n iconFontNames: [\"YourFont.ttf\", \"...\"]\n]\n\n<span class=\"pl-md\"><span class=\"pl-md\">-</span> apply from: \"../../node_modules/react-native-vector-icons/fonts.gradle\"</span>\n<span class=\"pl-mi1\"><span class=\"pl-mi1\">+</span> apply from: \"../../../../node_modules/react-native-vector-icons/fonts.gradle</span></pre></div>\n<p dir=\"auto\"><g-emoji class=\"g-emoji\" alias=\"warning\">⚠️</g-emoji> Reported <a href=\"https://github.com/oblador/react-native-vector-icons/issues/1281#issuecomment-1363201537\" data-hovercard-type=\"issue\" data-hovercard-url=\"/oblador/react-native-vector-icons/issues/1281/hovercard\">issues</a> have arisen when utilizing RNVI versions earlier than 9.0.0 within a monorepo context. Therefore, it's advisable to ensure your RNVI version is 9.0.0 or later.</p>\n</details>\n<div class=\"markdown-heading\" dir=\"auto\"><h4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Option: Manual Integration</h4><a id=\"user-content-option-manual-integration\" class=\"anchor\" aria-label=\"Permalink: Option: Manual Integration\" href=\"#option-manual-integration\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">To manually integrate the library, follow these steps:</p>\n<ul dir=\"auto\">\n<li>Copy the contents from the <code>Fonts</code> folder and paste them into <code>android/app/src/main/assets/fonts</code> (ensure the folder name is lowercase, i.e., <code>fonts</code>).</li>\n</ul>\n<div class=\"markdown-heading\" dir=\"auto\"><h4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Integrating Library for <code>getImageSource</code> Support</h4><a id=\"user-content-integrating-library-for-getimagesource-support\" class=\"anchor\" aria-label=\"Permalink: Integrating Library for getImageSource Support\" href=\"#integrating-library-for-getimagesource-support\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">The following steps are optional and are only necessary if you intend to utilize the <code>Icon.getImageSource</code> function.</p>\n<ul dir=\"auto\">\n<li>\n<p dir=\"auto\">Edit the <code>android/settings.gradle</code> file as shown below:</p>\n<div class=\"highlight highlight-source-diff notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"rootProject.name = 'MyApp'\n\ninclude ':app'\n\n+ include ':react-native-vector-icons'\n+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')\"><pre>rootProject.name = 'MyApp'\n\ninclude ':app'\n\n<span class=\"pl-mi1\"><span class=\"pl-mi1\">+</span> include ':react-native-vector-icons'</span>\n<span class=\"pl-mi1\"><span class=\"pl-mi1\">+</span> project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')</span></pre></div>\n</li>\n<li>\n<p dir=\"auto\">Edit the <code>android/app/build.gradle</code> (located in the <strong>app</strong> folder) as shown below:</p>\n<div class=\"highlight highlight-source-diff notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"apply plugin: 'com.android.application'\n\nandroid {\n ...\n}\n\ndependencies {\n implementation fileTree(dir: &quot;libs&quot;, include: [&quot;*.jar&quot;])\n //noinspection GradleDynamicVersion\n implementation &quot;com.facebook.react:react-native:+&quot; // From node_modules\n\n+ implementation project(':react-native-vector-icons')\n}\"><pre>apply plugin: 'com.android.application'\n\nandroid {\n ...\n}\n\ndependencies {\n implementation fileTree(dir: \"libs\", include: [\"*.jar\"])\n //noinspection GradleDynamicVersion\n implementation \"com.facebook.react:react-native:+\" // From node_modules\n\n<span class=\"pl-mi1\"><span class=\"pl-mi1\">+</span> implementation project(':react-native-vector-icons')</span>\n}</pre></div>\n</li>\n<li>\n<p dir=\"auto\">Edit your <code>MainApplication.java</code> (located deep within <code>android/app/src/main/java/...</code>) as shown below (note that there are <code>two</code> places to edit):</p>\n<div class=\"highlight highlight-source-diff notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"package com.myapp;\n\n+ import com.oblador.vectoricons.VectorIconsPackage;\n\n....\n\n @Override\n protected List&lt;ReactPackage&gt; getPackages() {\n return Arrays.&lt;ReactPackage&gt;asList(\n new MainReactPackage()\n+ , new VectorIconsPackage()\n );\n }\"><pre>package com.myapp;\n\n<span class=\"pl-mi1\"><span class=\"pl-mi1\">+</span> import com.oblador.vectoricons.VectorIconsPackage;</span>\n\n....\n\n @Override\n protected List&lt;ReactPackage&gt; getPackages() {\n return Arrays.&lt;ReactPackage&gt;asList(\n new MainReactPackage()\n<span class=\"pl-mi1\"><span class=\"pl-mi1\">+</span> , new VectorIconsPackage()</span>\n );\n }</pre></div>\n</li>\n</ul>\n<p dir=\"auto\">Please note that this optional step is necessary only if your <strong>react-native app doesn't support auto-linking</strong>; otherwise, you can skip this.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">macOS Setup</h3><a id=\"user-content-macos-setup\" class=\"anchor\" aria-label=\"Permalink: macOS Setup\" href=\"#macos-setup\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">via <a href=\"https://github.com/microsoft/react-native-macos\"><code>react-native-macos</code></a></p>\n<p dir=\"auto\">To set up the library on your macOS project using <code>react-native-macos</code>, follow these steps:</p>\n<ol dir=\"auto\">\n<li>\n<p dir=\"auto\">Browse to the <code>node_modules/react-native-vector-icons</code> folder and drag the <code>Fonts</code> folder into your project in Xcode. Ensure that your app is checked under \"Add to targets,\" and select \"Create folder references\" when prompted.</p>\n</li>\n<li>\n<p dir=\"auto\">Edit your <code>Info.plist</code> and include a new property named <strong>Application fonts resource path</strong> (or <code>ATSApplicationFontsPath</code> if Xcode's autocomplete isn't functioning or you're not using Xcode). Set the value of this property to <code>Fonts</code>.</p>\n</li>\n</ol>\n<p dir=\"auto\"><em>Please note that after adding new fonts, you need to recompile your project. Also, make sure that the <code>Fonts</code> folder is present under the <strong>Copy Bundle Resources</strong> section within the <strong>Build Phases</strong> of your Xcode project.</em></p>\n<p dir=\"auto\">These steps will effectively integrate the vector icons library into your macOS project while utilizing the <code>react-native-macos</code> framework.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Windows Setup</h3><a id=\"user-content-windows-setup\" class=\"anchor\" aria-label=\"Permalink: Windows Setup\" href=\"#windows-setup\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">via <a href=\"https://github.com/microsoft/react-native-windows\"><code>react-native-windows</code></a></p>\n<p dir=\"auto\">To set up the library on your Windows project using <code>react-native-windows</code>, follow these steps:</p>\n<ol dir=\"auto\">\n<li>\n<p dir=\"auto\">In the top-level projects (<code>/windows/project-name/Assets</code>), copy and paste the font files.</p>\n</li>\n<li>\n<p dir=\"auto\">Open your solution in Visual Studio:</p>\n<p dir=\"auto\">a. Right-click the Assets folder in your solution.\nb. Select <strong>Add &gt; Existing Item</strong>.\nc. Browse and select the fonts that you copied into <code>/windows/project-name/assets</code>.\nd. Click <strong>Add</strong>.</p>\n</li>\n</ol>\n<p dir=\"auto\"><em>Please note that after adding new fonts, you need to recompile your project.</em></p>\n<p dir=\"auto\">By following these steps, you'll seamlessly integrate the vector icons library into your Windows project, leveraging the <code>react-native-windows</code> framework.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Web Setup</h3><a id=\"user-content-web-setup\" class=\"anchor\" aria-label=\"Permalink: Web Setup\" href=\"#web-setup\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">To integrate the library with your web project using <a href=\"https://webpack.js.org/\" rel=\"nofollow\">webpack</a>, follow these steps:</p>\n<ol dir=\"auto\">\n<li>\n<p dir=\"auto\">In your webpack configuration file, add a section to handle TTF files using <code>url-loader</code> or <code>file-loader</code>:</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"{\n test: /\\.ttf$/,\n loader: &quot;url-loader&quot;, // or directly file-loader\n include: path.resolve(__dirname, &quot;node_modules/react-native-vector-icons&quot;),\n}\"><pre><span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">test</span>: <span class=\"pl-pds\"><span class=\"pl-c1\">/</span>\\.ttf$<span class=\"pl-c1\">/</span></span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">loader</span>: <span class=\"pl-s\">\"url-loader\"</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// or directly file-loader</span>\n <span class=\"pl-c1\">include</span>: <span class=\"pl-s1\">path</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">resolve</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">__dirname</span><span class=\"pl-kos\">,</span> <span class=\"pl-s\">\"node_modules/react-native-vector-icons\"</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">,</span>\n<span class=\"pl-kos\">}</span></pre></div>\n</li>\n<li>\n<p dir=\"auto\">In your JavaScript entry point, consume the font files and inject the necessary style tag:</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\" // Use the prebuilt version of RNVI located in the dist folder\n import Icon from 'react-native-vector-icons/dist/FontAwesome';\n\n // Generate the required CSS\n import iconFont from 'react-native-vector-icons/Fonts/FontAwesome.ttf';\n const iconFontStyles = `@font-face {\n src: url(${iconFont});\n font-family: FontAwesome;\n }`;\n\n // Create a stylesheet\n const style = document.createElement('style');\n style.type = 'text/css';\n\n // Append the iconFontStyles to the stylesheet\n if (style.styleSheet) {\n style.styleSheet.cssText = iconFontStyles;\n } else {\n style.appendChild(document.createTextNode(iconFontStyles));\n }\n\n // Inject the stylesheet into the document head\n document.head.appendChild(style);\"><pre> <span class=\"pl-c\">// Use the prebuilt version of RNVI located in the dist folder</span>\n <span class=\"pl-k\">import</span> <span class=\"pl-v\">Icon</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'react-native-vector-icons/dist/FontAwesome'</span><span class=\"pl-kos\">;</span>\n\n <span class=\"pl-c\">// Generate the required CSS</span>\n <span class=\"pl-k\">import</span> <span class=\"pl-s1\">iconFont</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'react-native-vector-icons/Fonts/FontAwesome.ttf'</span><span class=\"pl-kos\">;</span>\n <span class=\"pl-k\">const</span> <span class=\"pl-s1\">iconFontStyles</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s\">`@font-face {</span>\n<span class=\"pl-s\"> src: url(<span class=\"pl-s1\"><span class=\"pl-kos\">${</span><span class=\"pl-s1\">iconFont</span><span class=\"pl-kos\">}</span></span>);</span>\n<span class=\"pl-s\"> font-family: FontAwesome;</span>\n<span class=\"pl-s\"> }`</span><span class=\"pl-kos\">;</span>\n\n <span class=\"pl-c\">// Create a stylesheet</span>\n <span class=\"pl-k\">const</span> <span class=\"pl-s1\">style</span> <span class=\"pl-c1\">=</span> <span class=\"pl-smi\">document</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">createElement</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'style'</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n <span class=\"pl-s1\">style</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">type</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s\">'text/css'</span><span class=\"pl-kos\">;</span>\n\n <span class=\"pl-c\">// Append the iconFontStyles to the stylesheet</span>\n <span class=\"pl-k\">if</span> <span class=\"pl-kos\">(</span><span class=\"pl-s1\">style</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">styleSheet</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-s1\">style</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">styleSheet</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">cssText</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s1\">iconFontStyles</span><span class=\"pl-kos\">;</span>\n <span class=\"pl-kos\">}</span> <span class=\"pl-k\">else</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-s1\">style</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">appendChild</span><span class=\"pl-kos\">(</span><span class=\"pl-smi\">document</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">createTextNode</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">iconFontStyles</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n <span class=\"pl-kos\">}</span>\n\n <span class=\"pl-c\">// Inject the stylesheet into the document head</span>\n <span class=\"pl-smi\">document</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">head</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">appendChild</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">style</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n</li>\n</ol>\n<p dir=\"auto\">By following these steps, you will seamlessly integrate the vector icons library into your web project using <a href=\"https://webpack.js.org/\" rel=\"nofollow\">webpack</a>, enabling you to effortlessly use the icons within your web application.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Upgrading</h2><a id=\"user-content-upgrading\" class=\"anchor\" aria-label=\"Permalink: Upgrading\" href=\"#upgrading\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Upgrading this package often requires the font files linked to your projects to be updated as well. If the automatic linking works for you, running this again should update the fonts. Otherwise you need to follow the steps outlined in the <a href=\"#installation\">installation</a> section.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"><code>Icon</code> Component</h2><a id=\"user-content-icon-component\" class=\"anchor\" aria-label=\"Permalink: Icon Component\" href=\"#icon-component\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">You can either use one of the bundled icons above or roll your own custom font.</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import Icon from 'react-native-vector-icons/FontAwesome';\nconst myIcon = &lt;Icon name=&quot;rocket&quot; size={30} color=&quot;#900&quot; /&gt;;\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-v\">Icon</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'react-native-vector-icons/FontAwesome'</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">myIcon</span> <span class=\"pl-c1\">=</span> <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">Icon</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"rocket\"</span> <span class=\"pl-c1\">size</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-c1\">30</span><span class=\"pl-kos\">}</span> <span class=\"pl-c1\">color</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"#900\"</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span><span class=\"pl-kos\">;</span></pre></div>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Properties</h3><a id=\"user-content-properties\" class=\"anchor\" aria-label=\"Permalink: Properties\" href=\"#properties\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Any <a href=\"https://reactnative.dev/docs/text.html\" rel=\"nofollow\">Text property</a> and the following:</p>\n<table>\n<thead>\n<tr>\n<th>Prop</th>\n<th>Description</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><strong><code>size</code></strong></td>\n<td>Size of the icon, can also be passed as <code>fontSize</code> in the style object.</td>\n<td><code>12</code></td>\n</tr>\n<tr>\n<td><strong><code>name</code></strong></td>\n<td>What icon to show, see Icon Explorer app or one of the links above.</td>\n<td><em>None</em></td>\n</tr>\n<tr>\n<td><strong><code>color</code></strong></td>\n<td>Color of the icon.</td>\n<td><em>Inherited</em></td>\n</tr>\n</tbody>\n</table>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Static Methods</h3><a id=\"user-content-static-methods\" class=\"anchor\" aria-label=\"Permalink: Static Methods\" href=\"#static-methods\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<table>\n<thead>\n<tr>\n<th>Prop</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><strong><code>getFontFamily</code></strong></td>\n<td>Returns the font family that is currently used to retrieve icons as text. Usage: <code>const fontFamily = Icon.getFontFamily()</code></td>\n</tr>\n<tr>\n<td><strong><code>getImageSource</code></strong></td>\n<td>Returns a promise that resolving to the source of a bitmap version of the icon for use with <code>Image</code> component et al. Usage: <code>const source = await Icon.getImageSource(name, size, color)</code></td>\n</tr>\n<tr>\n<td><strong><code>getImageSourceSync</code></strong></td>\n<td>Same as <code>getImageSource</code> but synchronous. Usage: <code>const source = Icon.getImageSourceSync(name, size, color)</code></td>\n</tr>\n<tr>\n<td><strong><code>getRawGlyphMap</code></strong></td>\n<td>Returns the raw glyph map of the icon set. Usage: <code>const glyphMap = Icon.getRawGlyphMap()</code></td>\n</tr>\n<tr>\n<td><strong><code>hasIcon</code></strong></td>\n<td>Checks if the name is valid in current icon set. Usage: <code>const isNameValid = Icon.hasIcon(name)</code></td>\n</tr>\n</tbody>\n</table>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Styling</h3><a id=\"user-content-styling\" class=\"anchor\" aria-label=\"Permalink: Styling\" href=\"#styling\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Since <code>Icon</code> builds on top of the <code>Text</code> component, most <a href=\"https://reactnative.dev/docs/style.html\" rel=\"nofollow\">style properties</a> will work as expected, you might find it useful to play around with these:</p>\n<ul dir=\"auto\">\n<li><code>backgroundColor</code></li>\n<li><code>borderWidth</code></li>\n<li><code>borderColor</code></li>\n<li><code>borderRadius</code></li>\n<li><code>padding</code></li>\n<li><code>margin</code></li>\n<li><code>color</code></li>\n<li><code>fontSize</code></li>\n</ul>\n<p dir=\"auto\">NOTE: On android <code>Text</code> doesn't currently support <code>border*</code> styles, to circumvent this simply wrap your <code>Icon</code> with a <code>View</code>.</p>\n<p dir=\"auto\">By combining some of these you can create for example :</p>\n<p dir=\"auto\"><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://cloud.githubusercontent.com/assets/378279/7667570/33817554-fc0d-11e4-9ad7-4eb60139cfb7.png\"><img src=\"https://cloud.githubusercontent.com/assets/378279/7667570/33817554-fc0d-11e4-9ad7-4eb60139cfb7.png\" alt=\"type\" style=\"max-width: 100%;\"></a>\n<a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://cloud.githubusercontent.com/assets/378279/7667569/3010dd7e-fc0d-11e4-9696-cb721fe8e98d.png\"><img src=\"https://cloud.githubusercontent.com/assets/378279/7667569/3010dd7e-fc0d-11e4-9696-cb721fe8e98d.png\" alt=\"star\" style=\"max-width: 100%;\"></a></p>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"><code>Icon.Button</code> Component</h2><a id=\"user-content-iconbutton-component\" class=\"anchor\" aria-label=\"Permalink: Icon.Button Component\" href=\"#iconbutton-component\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">A convenience component for creating buttons with an icon on the left side.</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import Icon from 'react-native-vector-icons/FontAwesome';\nconst myButton = (\n &lt;Icon.Button\n name=&quot;facebook&quot;\n backgroundColor=&quot;#3b5998&quot;\n onPress={this.loginWithFacebook}\n &gt;\n Login with Facebook\n &lt;/Icon.Button&gt;\n);\n\nconst customTextButton = (\n &lt;Icon.Button name=&quot;facebook&quot; backgroundColor=&quot;#3b5998&quot;&gt;\n &lt;Text style={{ fontFamily: 'Arial', fontSize: 15 }}&gt;\n Login with Facebook\n &lt;/Text&gt;\n &lt;/Icon.Button&gt;\n);\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-v\">Icon</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'react-native-vector-icons/FontAwesome'</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">myButton</span> <span class=\"pl-c1\">=</span> <span class=\"pl-kos\">(</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-v\">Icon</span><span class=\"pl-kos\">.</span><span class=\"pl-v\">Button</span>\n <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"facebook\"</span>\n <span class=\"pl-c1\">backgroundColor</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"#3b5998\"</span>\n <span class=\"pl-c1\">onPress</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-smi\">this</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">loginWithFacebook</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">&gt;</span>\n Login with Facebook\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-v\">Icon</span><span class=\"pl-kos\">.</span><span class=\"pl-v\">Button</span><span class=\"pl-c1\">&gt;</span>\n<span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">customTextButton</span> <span class=\"pl-c1\">=</span> <span class=\"pl-kos\">(</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-v\">Icon</span><span class=\"pl-kos\">.</span><span class=\"pl-v\">Button</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"facebook\"</span> <span class=\"pl-c1\">backgroundColor</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"#3b5998\"</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">Text</span> <span class=\"pl-c1\">style</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-kos\">{</span> <span class=\"pl-c1\">fontFamily</span>: <span class=\"pl-s\">'Arial'</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">fontSize</span>: <span class=\"pl-c1\">15</span> <span class=\"pl-kos\">}</span><span class=\"pl-kos\">}</span><span class=\"pl-c1\">&gt;</span>\n Login with Facebook\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">Text</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-v\">Icon</span><span class=\"pl-kos\">.</span><span class=\"pl-v\">Button</span><span class=\"pl-c1\">&gt;</span>\n<span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<p dir=\"auto\"><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://cloud.githubusercontent.com/assets/378279/7667568/2e9021b2-fc0d-11e4-8e68-cf91c329a6f4.png\"><img src=\"https://cloud.githubusercontent.com/assets/378279/7667568/2e9021b2-fc0d-11e4-8e68-cf91c329a6f4.png\" alt=\"buttons\" style=\"max-width: 100%;\"></a></p>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Properties</h3><a id=\"user-content-properties-1\" class=\"anchor\" aria-label=\"Permalink: Properties\" href=\"#properties-1\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Any <a href=\"https://reactnative.dev/docs/text.html\" rel=\"nofollow\"><code>Text</code></a>, <a href=\"https://reactnative.dev/docs/touchablehighlight.html\" rel=\"nofollow\"><code>TouchableHighlight</code></a> or <a href=\"https://reactnative.dev/docs/touchablewithoutfeedback.html\" rel=\"nofollow\"><code>TouchableWithoutFeedback</code></a> property in addition to these:</p>\n<table>\n<thead>\n<tr>\n<th>Prop</th>\n<th>Description</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><strong><code>color</code></strong></td>\n<td>Text and icon color, use <code>iconStyle</code> or nest a <code>Text</code> component if you need different colors.</td>\n<td><code>white</code></td>\n</tr>\n<tr>\n<td><strong><code>size</code></strong></td>\n<td>Icon size.</td>\n<td><code>20</code></td>\n</tr>\n<tr>\n<td><strong><code>iconStyle</code></strong></td>\n<td>Styles applied to the icon only, good for setting margins or a different color. <em>Note: use <code>iconStyle</code> for margins or expect unstable behaviour.</em></td>\n<td><code>{marginRight: 10}</code></td>\n</tr>\n<tr>\n<td><strong><code>backgroundColor</code></strong></td>\n<td>Background color of the button.</td>\n<td><code>#007AFF</code></td>\n</tr>\n<tr>\n<td><strong><code>borderRadius</code></strong></td>\n<td>Border radius of the button, set to <code>0</code> to disable.</td>\n<td><code>5</code></td>\n</tr>\n<tr>\n<td><strong><code>onPress</code></strong></td>\n<td>A function called when the button is pressed.</td>\n<td><em>None</em></td>\n</tr>\n</tbody>\n</table>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Usage as PNG Image/Source Object</h2><a id=\"user-content-usage-as-png-imagesource-object\" class=\"anchor\" aria-label=\"Permalink: Usage as PNG Image/Source Object\" href=\"#usage-as-png-imagesource-object\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Convenient way to plug this in into other components that rely on bitmap images rather than scalable vector icons. Takes the arguments <code>name</code>, <code>size</code> and <code>color</code> as described above.</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"Icon.getImageSource('user', 20, 'red').then(source =&gt;\n this.setState({ userIcon: source })\n);\"><pre><span class=\"pl-v\">Icon</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">getImageSource</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'user'</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">20</span><span class=\"pl-kos\">,</span> <span class=\"pl-s\">'red'</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">then</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">source</span> <span class=\"pl-c1\">=&gt;</span>\n <span class=\"pl-smi\">this</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">setState</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">{</span> <span class=\"pl-c1\">userIcon</span>: <span class=\"pl-s1\">source</span> <span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span>\n<span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<p dir=\"auto\">Alternatively you may use the synchronous method <code>Icon.getImageSourceSync</code> to avoid rendering glitches. Keep in mind that this method is blocking and might incur performance penalties. Subsequent calls will use cache however.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Multi-Style Fonts</h2><a id=\"user-content-multi-style-fonts\" class=\"anchor\" aria-label=\"Permalink: Multi-Style Fonts\" href=\"#multi-style-fonts\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Some fonts today use multiple styles, FontAwesome 5 for example, which is supported by this library. The usage is pretty much the same as the standard <code>Icon</code> component:</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import Icon from 'react-native-vector-icons/FontAwesome5';\n\nconst myIcon1 = &lt;Icon name=&quot;comments&quot; size={30} color=&quot;#900&quot; /&gt;; // Defaults to regular\nconst myIcon2 = &lt;Icon name=&quot;comments&quot; size={30} color=&quot;#900&quot; solid /&gt;;\nconst myIcon3 = &lt;Icon name=&quot;comments&quot; size={30} color=&quot;#900&quot; light /&gt;; // Only in FA5 Pro\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-v\">Icon</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'react-native-vector-icons/FontAwesome5'</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">myIcon1</span> <span class=\"pl-c1\">=</span> <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">Icon</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"comments\"</span> <span class=\"pl-c1\">size</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-c1\">30</span><span class=\"pl-kos\">}</span> <span class=\"pl-c1\">color</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"#900\"</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// Defaults to regular</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">myIcon2</span> <span class=\"pl-c1\">=</span> <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">Icon</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"comments\"</span> <span class=\"pl-c1\">size</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-c1\">30</span><span class=\"pl-kos\">}</span> <span class=\"pl-c1\">color</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"#900\"</span> <span class=\"pl-c1\">solid</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">myIcon3</span> <span class=\"pl-c1\">=</span> <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">Icon</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"comments\"</span> <span class=\"pl-c1\">size</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-c1\">30</span><span class=\"pl-kos\">}</span> <span class=\"pl-c1\">color</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"#900\"</span> <span class=\"pl-c1\">light</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// Only in FA5 Pro</span></pre></div>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Static methods</h3><a id=\"user-content-static-methods-1\" class=\"anchor\" aria-label=\"Permalink: Static methods\" href=\"#static-methods-1\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">All static methods from <code>Icon</code> is supported by multi-styled fonts.</p>\n<table>\n<thead>\n<tr>\n<th>Prop</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><strong><code>getFontFamily</code></strong></td>\n<td>Returns the font family that is currently used to retrieve icons as text. Usage: <code>const fontFamily = Icon.getFontFamily(style)</code></td>\n</tr>\n<tr>\n<td><strong><code>getImageSource</code></strong></td>\n<td>Returns a promise that resolving to the source of a bitmap version of the icon for use with <code>Image</code> component et al. Usage: <code>const source = await Icon.getImageSource(name, size, color)</code></td>\n</tr>\n<tr>\n<td><strong><code>getImageSourceSync</code></strong></td>\n<td>Same as <code>getImageSource</code> but synchronous. Usage: <code>const source = Icon.getImageSourceSync(name, size, color)</code></td>\n</tr>\n<tr>\n<td><strong><code>getRawGlyphMap</code></strong></td>\n<td>Returns the raw glyph map of the icon set. Usage: <code>const glyphMap = Icon.getRawGlyphMap(style)</code></td>\n</tr>\n<tr>\n<td><strong><code>hasIcon</code></strong></td>\n<td>Checks if the name is valid in current icon set. Usage: <code>const isNameValid = Icon.hasIcon(name, style)</code></td>\n</tr>\n<tr>\n<td><strong><code>getStyledIconSet</code></strong></td>\n<td>Use this to get a <code>Icon</code> component for a single style. Usage. <code>const StyledIcon = Icon.getStyledIconSet(style)</code></td>\n</tr>\n</tbody>\n</table>\n<p dir=\"auto\">If no style argument is passed (or if it's invalid) the methods will default to a pre-defineds fallback.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Components</h3><a id=\"user-content-components\" class=\"anchor\" aria-label=\"Permalink: Components\" href=\"#components\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\"><code>Icon.Button</code> is supported, usage is just like <code>Icon</code>:</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import Icon from 'react-native-vector-icons/FontAwesome5';\nconst myButton = (\n &lt;Icon.Button name=&quot;facebook&quot; onPress={this.loginWithFacebook} solid&gt;\n Login with Facebook\n &lt;/Icon.Button&gt;\n);\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-v\">Icon</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'react-native-vector-icons/FontAwesome5'</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">myButton</span> <span class=\"pl-c1\">=</span> <span class=\"pl-kos\">(</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-v\">Icon</span><span class=\"pl-kos\">.</span><span class=\"pl-v\">Button</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"facebook\"</span> <span class=\"pl-c1\">onPress</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-smi\">this</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">loginWithFacebook</span><span class=\"pl-kos\">}</span> <span class=\"pl-c1\">solid</span><span class=\"pl-c1\">&gt;</span>\n Login with Facebook\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-v\">Icon</span><span class=\"pl-kos\">.</span><span class=\"pl-v\">Button</span><span class=\"pl-c1\">&gt;</span>\n<span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Custom Fonts</h2><a id=\"user-content-custom-fonts\" class=\"anchor\" aria-label=\"Permalink: Custom Fonts\" href=\"#custom-fonts\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"><code>createIconSet(glyphMap, fontFamily[, fontFile])</code></h3><a id=\"user-content-createiconsetglyphmap-fontfamily-fontfile\" class=\"anchor\" aria-label=\"Permalink: createIconSet(glyphMap, fontFamily[, fontFile])\" href=\"#createiconsetglyphmap-fontfamily-fontfile\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Returns your own custom font based on the <code>glyphMap</code> where the key is the icon name and the value is either a UTF-8 character or it's character code. <code>fontFamily</code> is the name of the font <strong>NOT</strong> the filename. Open the font in Font Book.app or similar to learn the name. Optionally pass the third <code>fontFile</code> argument for android support, it should be the custom font file name.</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { createIconSet } from 'react-native-vector-icons';\nconst glyphMap = { 'icon-name': 1234, test: '∆' };\nconst Icon = createIconSet(glyphMap, 'FontName', 'font-name.ttf');\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-kos\">{</span> <span class=\"pl-s1\">createIconSet</span> <span class=\"pl-kos\">}</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'react-native-vector-icons'</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">glyphMap</span> <span class=\"pl-c1\">=</span> <span class=\"pl-kos\">{</span> <span class=\"pl-s\">'icon-name'</span>: <span class=\"pl-c1\">1234</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">test</span>: <span class=\"pl-s\">'∆'</span> <span class=\"pl-kos\">}</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-v\">Icon</span> <span class=\"pl-c1\">=</span> <span class=\"pl-en\">createIconSet</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">glyphMap</span><span class=\"pl-kos\">,</span> <span class=\"pl-s\">'FontName'</span><span class=\"pl-kos\">,</span> <span class=\"pl-s\">'font-name.ttf'</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"><code>createIconSetFromFontello(config[, fontFamily[, fontFile]])</code></h3><a id=\"user-content-createiconsetfromfontelloconfig-fontfamily-fontfile\" class=\"anchor\" aria-label=\"Permalink: createIconSetFromFontello(config[, fontFamily[, fontFile]])\" href=\"#createiconsetfromfontelloconfig-fontfamily-fontfile\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Convenience method to create a custom font based on a <a href=\"http://fontello.com\" rel=\"nofollow\">fontello</a> config file. Don't forget to import the font as described above and drop the <code>config.json</code> somewhere convenient in your project.</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { createIconSetFromFontello } from 'react-native-vector-icons';\nimport fontelloConfig from './config.json';\nconst Icon = createIconSetFromFontello(fontelloConfig);\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-kos\">{</span> <span class=\"pl-s1\">createIconSetFromFontello</span> <span class=\"pl-kos\">}</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'react-native-vector-icons'</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">import</span> <span class=\"pl-s1\">fontelloConfig</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'./config.json'</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-v\">Icon</span> <span class=\"pl-c1\">=</span> <span class=\"pl-en\">createIconSetFromFontello</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">fontelloConfig</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"><code>createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])</code></h3><a id=\"user-content-createiconsetfromicomoonconfig-fontfamily-fontfile\" class=\"anchor\" aria-label=\"Permalink: createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])\" href=\"#createiconsetfromicomoonconfig-fontfamily-fontfile\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { createIconSetFromIcoMoon } from 'react-native-vector-icons';\nimport icoMoonConfig from './selection.json';\nconst Icon = createIconSetFromIcoMoon(\n icoMoonConfig,\n 'LineAwesome',\n 'line-awesome.ttf'\n);\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-kos\">{</span> <span class=\"pl-s1\">createIconSetFromIcoMoon</span> <span class=\"pl-kos\">}</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'react-native-vector-icons'</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">import</span> <span class=\"pl-s1\">icoMoonConfig</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'./selection.json'</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-v\">Icon</span> <span class=\"pl-c1\">=</span> <span class=\"pl-en\">createIconSetFromIcoMoon</span><span class=\"pl-kos\">(</span>\n <span class=\"pl-s1\">icoMoonConfig</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-s\">'LineAwesome'</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-s\">'line-awesome.ttf'</span>\n<span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<p dir=\"auto\">Make sure you're using the <em>Download</em> option in <a href=\"https://icomoon.io/app\" rel=\"nofollow\">IcoMoon</a>, and use the <code>.json</code> file that's included in the <code>.zip</code> you've downloaded. You'll also need to import the <code>.ttf</code> font file into your project, following the instructions above.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"><code>createMultiStyleIconSet(styles [, options])</code></h3><a id=\"user-content-createmultistyleiconsetstyles--options\" class=\"anchor\" aria-label=\"Permalink: createMultiStyleIconSet(styles [, options])\" href=\"#createmultistyleiconsetstyles--options\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { createMultiStyleIconSet } from 'react-native-vector-icons';\n\n/*\n * This is just example code, you are free to\n * design your glyphmap and styles to your liking\n */\n\nimport glyphmap from './glyphmap.json';\n/*\n * glyphmap = {\n * &quot;style1&quot;: [\n * &quot;hello&quot;,\n * &quot;world&quot;\n * ],\n * &quot;style2&quot;: [\n * &quot;foo&quot;,\n * &quot;bar&quot;\n * ]\n * }\n */\n\nconst glyphKeys = Object.keys(glyphmap); /* [&quot;style1&quot;, &quot;style2&quot;] */\nconst options = {\n defaultStyle: 'style1',\n glyphValidator: (name, style) =&gt; glyphKeys.indexOf(name) !== -1,\n fallbackFamily: (name) =&gt; {\n for (let i = 0; i &lt; glyphKeys.length; i++) {\n const style = glyphKeys[i];\n if (glyphmap[style].indexOf(name) !== -1) {\n return style;\n }\n }\n\n /* Always return some family */\n return glyphKeys[0];\n }\n};\n\n/*\n * The styles object consits of keys, which will be\n * used as the styles later, and objects which are\n * used as style objects for the font. The style\n * should have unique characteristics for each font\n * in order to ensure that the right one will be\n * chosen. FontAwesome 5 uses font weight since\n * 5.7.0 in order to diffirentiate the styles but\n * other properties (like fontFamily) can be used.\n * It's just a standard RN style object.\n */\nconst styles = {\n style1: {\n fontWeight: '700'\n },\n style2: {\n fontWeight: '100'\n }\n};\n\nconst Icon = createMultiStyleIconSet(styles, options);\n\n/* Uses default style (style1) */\n&lt;Icon name={'hello'} /&gt;\n&lt;Icon name={'world'} style1 /&gt;\n/* Default style is style1 but this will fall back to style2 */\n&lt;Icon name={'foo'} /&gt;\n/* This will also fall back to style2 */\n&lt;Icon name={'foo'} style1 /&gt;\n/* Regular use of style2 */\n&lt;Icon name={'bar'} style2 /&gt;\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-kos\">{</span> <span class=\"pl-s1\">createMultiStyleIconSet</span> <span class=\"pl-kos\">}</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'react-native-vector-icons'</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-c\">/*</span>\n<span class=\"pl-c\"> * This is just example code, you are free to</span>\n<span class=\"pl-c\"> * design your glyphmap and styles to your liking</span>\n<span class=\"pl-c\"> */</span>\n\n<span class=\"pl-k\">import</span> <span class=\"pl-s1\">glyphmap</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'./glyphmap.json'</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-c\">/*</span>\n<span class=\"pl-c\"> * glyphmap = {</span>\n<span class=\"pl-c\"> * \"style1\": [</span>\n<span class=\"pl-c\"> * \"hello\",</span>\n<span class=\"pl-c\"> * \"world\"</span>\n<span class=\"pl-c\"> * ],</span>\n<span class=\"pl-c\"> * \"style2\": [</span>\n<span class=\"pl-c\"> * \"foo\",</span>\n<span class=\"pl-c\"> * \"bar\"</span>\n<span class=\"pl-c\"> * ]</span>\n<span class=\"pl-c\"> * }</span>\n<span class=\"pl-c\"> */</span>\n\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">glyphKeys</span> <span class=\"pl-c1\">=</span> <span class=\"pl-v\">Object</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">keys</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">glyphmap</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">/* [\"style1\", \"style2\"] */</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">options</span> <span class=\"pl-c1\">=</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">defaultStyle</span>: <span class=\"pl-s\">'style1'</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-en\">glyphValidator</span>: <span class=\"pl-kos\">(</span><span class=\"pl-s1\">name</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">style</span><span class=\"pl-kos\">)</span> <span class=\"pl-c1\">=&gt;</span> <span class=\"pl-s1\">glyphKeys</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">indexOf</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">name</span><span class=\"pl-kos\">)</span> <span class=\"pl-c1\">!==</span> <span class=\"pl-c1\">-</span><span class=\"pl-c1\">1</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-en\">fallbackFamily</span>: <span class=\"pl-kos\">(</span><span class=\"pl-s1\">name</span><span class=\"pl-kos\">)</span> <span class=\"pl-c1\">=&gt;</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-k\">for</span> <span class=\"pl-kos\">(</span><span class=\"pl-k\">let</span> <span class=\"pl-s1\">i</span> <span class=\"pl-c1\">=</span> <span class=\"pl-c1\">0</span><span class=\"pl-kos\">;</span> <span class=\"pl-s1\">i</span> <span class=\"pl-c1\">&lt;</span> <span class=\"pl-s1\">glyphKeys</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">length</span><span class=\"pl-kos\">;</span> <span class=\"pl-s1\">i</span><span class=\"pl-c1\">++</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-k\">const</span> <span class=\"pl-s1\">style</span> <span class=\"pl-c1\">=</span> <span class=\"pl-s1\">glyphKeys</span><span class=\"pl-kos\">[</span><span class=\"pl-s1\">i</span><span class=\"pl-kos\">]</span><span class=\"pl-kos\">;</span>\n <span class=\"pl-k\">if</span> <span class=\"pl-kos\">(</span><span class=\"pl-s1\">glyphmap</span><span class=\"pl-kos\">[</span><span class=\"pl-s1\">style</span><span class=\"pl-kos\">]</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">indexOf</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">name</span><span class=\"pl-kos\">)</span> <span class=\"pl-c1\">!==</span> <span class=\"pl-c1\">-</span><span class=\"pl-c1\">1</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-k\">return</span> <span class=\"pl-s1\">style</span><span class=\"pl-kos\">;</span>\n <span class=\"pl-kos\">}</span>\n <span class=\"pl-kos\">}</span>\n\n <span class=\"pl-c\">/* Always return some family */</span>\n <span class=\"pl-k\">return</span> <span class=\"pl-s1\">glyphKeys</span><span class=\"pl-kos\">[</span><span class=\"pl-c1\">0</span><span class=\"pl-kos\">]</span><span class=\"pl-kos\">;</span>\n <span class=\"pl-kos\">}</span>\n<span class=\"pl-kos\">}</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-c\">/*</span>\n<span class=\"pl-c\"> * The styles object consits of keys, which will be</span>\n<span class=\"pl-c\"> * used as the styles later, and objects which are</span>\n<span class=\"pl-c\"> * used as style objects for the font. The style</span>\n<span class=\"pl-c\"> * should have unique characteristics for each font</span>\n<span class=\"pl-c\"> * in order to ensure that the right one will be</span>\n<span class=\"pl-c\"> * chosen. FontAwesome 5 uses font weight since</span>\n<span class=\"pl-c\"> * 5.7.0 in order to diffirentiate the styles but</span>\n<span class=\"pl-c\"> * other properties (like fontFamily) can be used.</span>\n<span class=\"pl-c\"> * It's just a standard RN style object.</span>\n<span class=\"pl-c\"> */</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">styles</span> <span class=\"pl-c1\">=</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">style1</span>: <span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">fontWeight</span>: <span class=\"pl-s\">'700'</span>\n <span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">style2</span>: <span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">fontWeight</span>: <span class=\"pl-s\">'100'</span>\n <span class=\"pl-kos\">}</span>\n<span class=\"pl-kos\">}</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-k\">const</span> <span class=\"pl-v\">Icon</span> <span class=\"pl-c1\">=</span> <span class=\"pl-en\">createMultiStyleIconSet</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">styles</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">options</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-c\">/* Uses default style (style1) */</span>\n<span class=\"pl-c1\">&lt;</span><span class=\"pl-v\">Icon</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-s\">'hello'</span><span class=\"pl-kos\">}</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n<span class=\"pl-c1\">&lt;</span><span class=\"pl-v\">Icon</span> <span class=\"pl-s1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-s\">'world'</span><span class=\"pl-kos\">}</span> <span class=\"pl-s1\">style1</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n<span class=\"pl-c\">/* Default style is style1 but this will fall back to style2 */</span>\n<span class=\"pl-c1\">&lt;</span><span class=\"pl-v\">Icon</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-s\">'foo'</span><span class=\"pl-kos\">}</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n<span class=\"pl-c\">/* This will also fall back to style2 */</span>\n<span class=\"pl-c1\">&lt;</span><span class=\"pl-v\">Icon</span> <span class=\"pl-s1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-s\">'foo'</span><span class=\"pl-kos\">}</span> <span class=\"pl-s1\">style1</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n<span class=\"pl-c\">/* Regular use of style2 */</span>\n<span class=\"pl-c1\">&lt;</span><span class=\"pl-v\">Icon</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-s\">'bar'</span><span class=\"pl-kos\">}</span> <span class=\"pl-c1\">style2</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span></pre></div>\n<table>\n<thead>\n<tr>\n<th>option</th>\n<th>Description</th>\n<th>default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>defaultStyle</td>\n<td>The name of the style to be used if no style is supplied during rendering.</td>\n<td><code>Object.keys(styles)[0]</code></td>\n</tr>\n<tr>\n<td>fallbackFamily</td>\n<td>Function for selecting a family if a glyph is not available. The function should accept the <code>name</code> of the glyph as a parameter. Returns the name if the family.</td>\n<td><code>(name) =&gt; Object.keys(styles)[0]</code></td>\n</tr>\n<tr>\n<td>glyphValidator</td>\n<td>Function for validating that a glyph is available for a chosen style. It has <code>name</code> and <code>style</code> as parameters, in that order. Returns <code>true</code> if the glyph is valid or <code>false</code> if it's not.</td>\n<td><code>(name, style) =&gt; true</code></td>\n</tr>\n</tbody>\n</table>\n<div class=\"markdown-heading\" dir=\"auto\"><h4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">iOS</h4><a id=\"user-content-ios\" class=\"anchor\" aria-label=\"Permalink: iOS\" href=\"#ios\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">You have to manually make a reference of your <code>.ttf</code> on your xcodeproj <code>Resources</code> folder and in <code>Info.plist</code>.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Animation</h2><a id=\"user-content-animation\" class=\"anchor\" aria-label=\"Permalink: Animation\" href=\"#animation\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">React Native comes with an amazing animation library called <a href=\"https://reactnative.dev/docs/animated.html\" rel=\"nofollow\"><code>Animated</code></a>. To use it with an icon, simply create an animated component with this line: <code>const AnimatedIcon = Animated.createAnimatedComponent(Icon)</code>. You can also use the higher level animation library <a href=\"https://github.com/oblador/react-native-animatable\">react-native-animatable</a>.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Usage Examples</h2><a id=\"user-content-usage-examples\" class=\"anchor\" aria-label=\"Permalink: Usage Examples\" href=\"#usage-examples\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">IconExplorer</h3><a id=\"user-content-iconexplorer\" class=\"anchor\" aria-label=\"Permalink: IconExplorer\" href=\"#iconexplorer\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Try the <code>IconExplorer</code> project in <code>Examples/IconExplorer</code> folder, there you can also search for any icon.</p>\n<p dir=\"auto\"><a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://cloud.githubusercontent.com/assets/378279/8903470/a9fe6b46-3458-11e5-901f-98b7b676d0d3.png\"><img src=\"https://cloud.githubusercontent.com/assets/378279/8903470/a9fe6b46-3458-11e5-901f-98b7b676d0d3.png\" alt=\"Screenshot of IconExplorer\" style=\"max-width: 100%;\"></a></p>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Basic Example</h3><a id=\"user-content-basic-example\" class=\"anchor\" aria-label=\"Permalink: Basic Example\" href=\"#basic-example\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import Icon from 'react-native-vector-icons/Ionicons';\n\nfunction ExampleView(props) {\n return &lt;Icon name=&quot;ios-person&quot; size={30} color=&quot;#4F8EF7&quot; /&gt;;\n}\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-v\">Icon</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'react-native-vector-icons/Ionicons'</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-k\">function</span> <span class=\"pl-v\">ExampleView</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">props</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-k\">return</span> <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">Icon</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"ios-person\"</span> <span class=\"pl-c1\">size</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-c1\">30</span><span class=\"pl-kos\">}</span> <span class=\"pl-c1\">color</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"#4F8EF7\"</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-kos\">}</span></pre></div>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">TabBar</h2><a id=\"user-content-tabbar\" class=\"anchor\" aria-label=\"Permalink: TabBar\" href=\"#tabbar\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Since <a href=\"https://reactnative.dev/docs/tabbarios.html\" rel=\"nofollow\"><code>TabBarIOS</code></a> was removed from core in favor of <a href=\"https://reactnative.dev/docs/tabbarios.html\" rel=\"nofollow\">@react-navigation/bottom-tabs</a>, it is also removed as a convenience component from this library. Simply use the <code>Icon</code> instead, but don't forget to import and link to this project as described above first.</p>\n<p dir=\"auto\">Below is an <a href=\"https://reactnavigation.org/docs/bottom-tab-navigator/#example\" rel=\"nofollow\">example</a> taken from <code>react-navigation</code>:</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';\n\nconst Tab = createBottomTabNavigator();\n\nfunction MyTabs() {\n return (\n &lt;Tab.Navigator\n initialRouteName=&quot;Feed&quot;\n screenOptions={{\n activeTintColor: '#e91e63',\n }}\n &gt;\n &lt;Tab.Screen\n name=&quot;Feed&quot;\n component={Feed}\n options={{\n tabBarLabel: 'Home',\n tabBarIcon: ({ color, size }) =&gt; (\n &lt;MaterialCommunityIcons name=&quot;home&quot; color={color} size={size} /&gt;\n ),\n }}\n /&gt;\n &lt;Tab.Screen\n name=&quot;Notifications&quot;\n component={Notifications}\n options={{\n tabBarLabel: 'Updates',\n tabBarIcon: ({ color, size }) =&gt; (\n &lt;MaterialCommunityIcons name=&quot;bell&quot; color={color} size={size} /&gt;\n ),\n tabBarBadge: 3,\n }}\n /&gt;\n &lt;Tab.Screen\n name=&quot;Profile&quot;\n component={Profile}\n options={{\n tabBarLabel: 'Profile',\n tabBarIcon: ({ color, size }) =&gt; (\n &lt;MaterialCommunityIcons name=&quot;account&quot; color={color} size={size} /&gt;\n ),\n }}\n /&gt;\n &lt;/Tab.Navigator&gt;\n );\n}\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-kos\">{</span> <span class=\"pl-s1\">createBottomTabNavigator</span> <span class=\"pl-kos\">}</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'@react-navigation/bottom-tabs'</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">import</span> <span class=\"pl-v\">MaterialCommunityIcons</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'react-native-vector-icons/MaterialCommunityIcons'</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-k\">const</span> <span class=\"pl-v\">Tab</span> <span class=\"pl-c1\">=</span> <span class=\"pl-en\">createBottomTabNavigator</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-k\">function</span> <span class=\"pl-v\">MyTabs</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-k\">return</span> <span class=\"pl-kos\">(</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-v\">Tab</span><span class=\"pl-kos\">.</span><span class=\"pl-v\">Navigator</span>\n <span class=\"pl-c1\">initialRouteName</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"Feed\"</span>\n <span class=\"pl-c1\">screenOptions</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">activeTintColor</span>: <span class=\"pl-s\">'#e91e63'</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-kos\">}</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-v\">Tab</span><span class=\"pl-kos\">.</span><span class=\"pl-v\">Screen</span>\n <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"Feed\"</span>\n <span class=\"pl-c1\">component</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-v\">Feed</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">options</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">tabBarLabel</span>: <span class=\"pl-s\">'Home'</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-en\">tabBarIcon</span>: <span class=\"pl-kos\">(</span><span class=\"pl-kos\">{</span> color<span class=\"pl-kos\">,</span> size <span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span> <span class=\"pl-c1\">=&gt;</span> <span class=\"pl-kos\">(</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">MaterialCommunityIcons</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"home\"</span> <span class=\"pl-c1\">color</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-s1\">color</span><span class=\"pl-kos\">}</span> <span class=\"pl-c1\">size</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-s1\">size</span><span class=\"pl-kos\">}</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-kos\">)</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-kos\">}</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-v\">Tab</span><span class=\"pl-kos\">.</span><span class=\"pl-v\">Screen</span>\n <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"Notifications\"</span>\n <span class=\"pl-c1\">component</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-v\">Notifications</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">options</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">tabBarLabel</span>: <span class=\"pl-s\">'Updates'</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-en\">tabBarIcon</span>: <span class=\"pl-kos\">(</span><span class=\"pl-kos\">{</span> color<span class=\"pl-kos\">,</span> size <span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span> <span class=\"pl-c1\">=&gt;</span> <span class=\"pl-kos\">(</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">MaterialCommunityIcons</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"bell\"</span> <span class=\"pl-c1\">color</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-s1\">color</span><span class=\"pl-kos\">}</span> <span class=\"pl-c1\">size</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-s1\">size</span><span class=\"pl-kos\">}</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-kos\">)</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">tabBarBadge</span>: <span class=\"pl-c1\">3</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-kos\">}</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-v\">Tab</span><span class=\"pl-kos\">.</span><span class=\"pl-v\">Screen</span>\n <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"Profile\"</span>\n <span class=\"pl-c1\">component</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-v\">Profile</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">options</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">tabBarLabel</span>: <span class=\"pl-s\">'Profile'</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-en\">tabBarIcon</span>: <span class=\"pl-kos\">(</span><span class=\"pl-kos\">{</span> color<span class=\"pl-kos\">,</span> size <span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span> <span class=\"pl-c1\">=&gt;</span> <span class=\"pl-kos\">(</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">MaterialCommunityIcons</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"account\"</span> <span class=\"pl-c1\">color</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-s1\">color</span><span class=\"pl-kos\">}</span> <span class=\"pl-c1\">size</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-s1\">size</span><span class=\"pl-kos\">}</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-kos\">)</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-kos\">}</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-v\">Tab</span><span class=\"pl-kos\">.</span><span class=\"pl-v\">Navigator</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-kos\">}</span></pre></div>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">ToolbarAndroid</h3><a id=\"user-content-toolbarandroid\" class=\"anchor\" aria-label=\"Permalink: ToolbarAndroid\" href=\"#toolbarandroid\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Since <a href=\"https://github.com/react-native-community/toolbar-android\"><code>ToolbarAndroid</code></a> was removed from core, it is also removed as a convenience component from this library. Simply use <code>getImageSourceSync</code> instead, but don't forget to import and link to this project as described above first.</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import ToolbarAndroid from '@react-native-community/toolbar-android';\nimport Icon from 'react-native-vector-icons/Ionicons';\n\nconst navIcon = Icon.getImageSourceSync('md-arrow-back', 24, 'white');\nconst overflowIcon = Icon.getImageSourceSync('md-more', 24, 'white');\nconst settingsIcon = Icon.getImageSourceSync('md-settings', 30, 'white');\nconst twitterIcon = Icon.getImageSourceSync('logo-twitter', 25, '#4099FF');\n\nfunction ToolbarView(props) {\n return (\n &lt;ToolbarAndroid\n title=&quot;Home&quot;\n titleColor=&quot;white&quot;\n navIcon={navIcon}\n onIconClicked={props.navigator.pop}\n actions={[\n {\n title: 'Settings',\n icon: settingsIcon,\n show: 'always',\n },\n {\n title: 'Follow me on Twitter',\n icon: twitterIcon,\n show: 'ifRoom',\n },\n ]}\n overflowIcon={overflowIcon}\n /&gt;\n );\n}\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-v\">ToolbarAndroid</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'@react-native-community/toolbar-android'</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">import</span> <span class=\"pl-v\">Icon</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'react-native-vector-icons/Ionicons'</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">navIcon</span> <span class=\"pl-c1\">=</span> <span class=\"pl-v\">Icon</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">getImageSourceSync</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'md-arrow-back'</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">24</span><span class=\"pl-kos\">,</span> <span class=\"pl-s\">'white'</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">overflowIcon</span> <span class=\"pl-c1\">=</span> <span class=\"pl-v\">Icon</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">getImageSourceSync</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'md-more'</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">24</span><span class=\"pl-kos\">,</span> <span class=\"pl-s\">'white'</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">settingsIcon</span> <span class=\"pl-c1\">=</span> <span class=\"pl-v\">Icon</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">getImageSourceSync</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'md-settings'</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">30</span><span class=\"pl-kos\">,</span> <span class=\"pl-s\">'white'</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">const</span> <span class=\"pl-s1\">twitterIcon</span> <span class=\"pl-c1\">=</span> <span class=\"pl-v\">Icon</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">getImageSourceSync</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'logo-twitter'</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">25</span><span class=\"pl-kos\">,</span> <span class=\"pl-s\">'#4099FF'</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-k\">function</span> <span class=\"pl-v\">ToolbarView</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">props</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-k\">return</span> <span class=\"pl-kos\">(</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">ToolbarAndroid</span>\n <span class=\"pl-c1\">title</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"Home\"</span>\n <span class=\"pl-c1\">titleColor</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"white\"</span>\n <span class=\"pl-c1\">navIcon</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-s1\">navIcon</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">onIconClicked</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-s1\">props</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">navigator</span><span class=\"pl-kos\">.</span><span class=\"pl-c1\">pop</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">actions</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-kos\">[</span>\n <span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">title</span>: <span class=\"pl-s\">'Settings'</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">icon</span>: <span class=\"pl-s1\">settingsIcon</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">show</span>: <span class=\"pl-s\">'always'</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">title</span>: <span class=\"pl-s\">'Follow me on Twitter'</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">icon</span>: <span class=\"pl-s1\">twitterIcon</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">show</span>: <span class=\"pl-s\">'ifRoom'</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-kos\">}</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-kos\">]</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">overflowIcon</span><span class=\"pl-c1\">=</span><span class=\"pl-kos\">{</span><span class=\"pl-s1\">overflowIcon</span><span class=\"pl-kos\">}</span>\n <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-kos\">}</span></pre></div>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Inline Icons</h3><a id=\"user-content-inline-icons\" class=\"anchor\" aria-label=\"Permalink: Inline Icons\" href=\"#inline-icons\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import { Text } from 'react-native';\nimport Icon from 'react-native-vector-icons/Ionicons';\n\nfunction ExampleView(props) {\n return (\n &lt;Text&gt;\n Lorem &lt;Icon name=&quot;ios-book&quot; color=&quot;#4F8EF7&quot; /&gt; Ipsum\n &lt;/Text&gt;\n );\n}\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-kos\">{</span> <span class=\"pl-v\">Text</span> <span class=\"pl-kos\">}</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'react-native'</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">import</span> <span class=\"pl-v\">Icon</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'react-native-vector-icons/Ionicons'</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-k\">function</span> <span class=\"pl-v\">ExampleView</span><span class=\"pl-kos\">(</span><span class=\"pl-s1\">props</span><span class=\"pl-kos\">)</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-k\">return</span> <span class=\"pl-kos\">(</span>\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">Text</span><span class=\"pl-c1\">&gt;</span>\n Lorem <span class=\"pl-c1\">&lt;</span><span class=\"pl-ent\">Icon</span> <span class=\"pl-c1\">name</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"ios-book\"</span> <span class=\"pl-c1\">color</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"#4F8EF7\"</span> <span class=\"pl-c1\">/</span><span class=\"pl-c1\">&gt;</span> Ipsum\n <span class=\"pl-c1\">&lt;</span><span class=\"pl-c1\">/</span><span class=\"pl-ent\">Text</span><span class=\"pl-c1\">&gt;</span>\n <span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-kos\">}</span></pre></div>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Generating Your Own Icon Set from a CSS File</h2><a id=\"user-content-generating-your-own-icon-set-from-a-css-file\" class=\"anchor\" aria-label=\"Permalink: Generating Your Own Icon Set from a CSS File\" href=\"#generating-your-own-icon-set-from-a-css-file\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">If you already have an icon font with associated CSS file then you can easily generate a icon set with the <code>generate-icon</code> script.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Example usage:</h3><a id=\"user-content-example-usage\" class=\"anchor\" aria-label=\"Permalink: Example usage:\" href=\"#example-usage\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<div class=\"snippet-clipboard-content notranslate position-relative overflow-auto\" data-snippet-clipboard-copy-content=\"./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon &gt; Components/MyIcon.js\"><pre class=\"notranslate\"><code>./node_modules/.bin/generate-icon path/to/styles.css --componentName=MyIcon --fontFamily=myicon &gt; Components/MyIcon.js\n</code></pre></div>\n<div class=\"markdown-heading\" dir=\"auto\"><h3 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Options</h3><a id=\"user-content-options\" class=\"anchor\" aria-label=\"Permalink: Options\" href=\"#options\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Any flags not listed below, like <code>--componentName</code> and <code>--fontFamily</code>, will be passed on to the template.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"><code>-p</code>, <code>--prefix</code></h4><a id=\"user-content--p---prefix\" class=\"anchor\" aria-label=\"Permalink: -p, --prefix\" href=\"#-p---prefix\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">CSS selector prefix [default: \".icon-\"]</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"><code>-t</code>, <code>--template</code></h4><a id=\"user-content--t---template\" class=\"anchor\" aria-label=\"Permalink: -t, --template\" href=\"#-t---template\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Template in JS template string format [default: \"./template/iconSet.tpl\"]</p>\n<p dir=\"auto\">For default template please provide <code>--componentName</code> and <code>--fontFamily</code>.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"><code>-o</code>, <code>--output</code></h4><a id=\"user-content--o---output\" class=\"anchor\" aria-label=\"Permalink: -o, --output\" href=\"#-o---output\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Save output to file, defaults to STDOUT</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\"><a href=\"https://github.com/oblador/react-native-vector-icons/releases\">Changelog</a></h2><a id=\"user-content-changelog\" class=\"anchor\" aria-label=\"Permalink: Changelog\" href=\"#changelog\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Troubleshooting</h2><a id=\"user-content-troubleshooting\" class=\"anchor\" aria-label=\"Permalink: Troubleshooting\" href=\"#troubleshooting\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<div class=\"markdown-heading\" dir=\"auto\"><h4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">The icons show up as a crossed out box on Android</h4><a id=\"user-content-the-icons-show-up-as-a-crossed-out-box-on-android\" class=\"anchor\" aria-label=\"Permalink: The icons show up as a crossed out box on Android\" href=\"#the-icons-show-up-as-a-crossed-out-box-on-android\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<ul dir=\"auto\">\n<li>Make sure you've copied the font to <code>android/app/src/main/assets/fonts</code>.</li>\n<li>Delete the build folder with <code>rm -rf android/app/build</code>.</li>\n<li>Recompile the project.</li>\n</ul>\n<div class=\"markdown-heading\" dir=\"auto\"><h4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Red screen with \"Unrecognized font family\" error on iOS</h4><a id=\"user-content-red-screen-with-unrecognized-font-family-error-on-ios\" class=\"anchor\" aria-label=\"Permalink: Red screen with &quot;Unrecognized font family&quot; error on iOS\" href=\"#red-screen-with-unrecognized-font-family-error-on-ios\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<ul dir=\"auto\">\n<li>Make sure you've added manually the reference of your <code>.ttf</code> on your xcodeproj <code>Resources</code> folder.</li>\n<li>Check that the font you are trying to use appears in <code>Info.plist</code>, if you've added the whole folder and it's blue in color, then you need to add it to the path.</li>\n<li>Check that the font is copied in the <em>Copy Bundle Resources</em> in <em>Build Phases</em>.</li>\n<li>Delete the build folder with <code>rm -rf ios/build</code></li>\n<li>Recompile the project.</li>\n</ul>\n<div class=\"markdown-heading\" dir=\"auto\"><h4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Android build fails on Windows for no good reason</h4><a id=\"user-content-android-build-fails-on-windows-for-no-good-reason\" class=\"anchor\" aria-label=\"Permalink: Android build fails on Windows for no good reason\" href=\"#android-build-fails-on-windows-for-no-good-reason\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Both npm and android file hierarchies tend to get very deep and even worse when you combine them. Since Windows file system has a max length, long file name addresses will result in numerous errors including <code>Execution failed for task ':react-native-vector-icons:processReleaseResources'</code>. So try to keep the path to your project folder as short as possible.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Wrong icons are shown after upgrading this package</h4><a id=\"user-content-wrong-icons-are-shown-after-upgrading-this-package\" class=\"anchor\" aria-label=\"Permalink: Wrong icons are shown after upgrading this package\" href=\"#wrong-icons-are-shown-after-upgrading-this-package\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">You probably didn't update the font files linked to your native project after upgrading. However, this only applies to Android targets since iOS bundles the fonts when building the app (try to clean your build from Xcode if the problem exists). On android you can relink the project or you manually update the fonts. To have them automatically synced use the <a href=\"https://github.com/oblador/react-native-vector-icons#option-with-gradle-recommended\">gradle approach</a>.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h4 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">Some icons are missing after upgrading this package</h4><a id=\"user-content-some-icons-are-missing-after-upgrading-this-package\" class=\"anchor\" aria-label=\"Permalink: Some icons are missing after upgrading this package\" href=\"#some-icons-are-missing-after-upgrading-this-package\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">Sometimes vendors decides to remove some icons from newer releases, this has nothing to do with this package. If you depend on an older version of a font you can add it as a <a href=\"#custom-fonts\">custom font</a>.</p>\n<div class=\"markdown-heading\" dir=\"auto\"><h2 tabindex=\"-1\" class=\"heading-element\" dir=\"auto\">License</h2><a id=\"user-content-license\" class=\"anchor\" aria-label=\"Permalink: License\" href=\"#license\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a></div>\n<p dir=\"auto\">This project is licenced under the <a href=\"http://opensource.org/licenses/mit-license.html\" rel=\"nofollow\">MIT License</a>.</p>\n<p dir=\"auto\">Any bundled fonts are copyright to their respective authors and mostly under MIT or <a href=\"http://scripts.sil.org/OFL\" rel=\"nofollow\">SIL OFL</a>.</p>\n</article>",
"loaded": true,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": [
{
"level": 1,
"text": "React Native Vector Icons",
"anchor": "react-native-vector-icons",
"htmlText": "React Native Vector Icons"
},
{
"level": 2,
"text": "Table of Contents",
"anchor": "table-of-contents",
"htmlText": "Table of Contents"
},
{
"level": 2,
"text": "Sponsorship",
"anchor": "sponsorship",
"htmlText": "Sponsorship"
},
{
"level": 2,
"text": "Bundled Icon Sets",
"anchor": "bundled-icon-sets",
"htmlText": "Bundled Icon Sets"
},
{
"level": 2,
"text": "Installation",
"anchor": "installation",
"htmlText": "Installation"
},
{
"level": 3,
"text": "iOS Setup",
"anchor": "ios-setup",
"htmlText": "iOS Setup"
},
{
"level": 3,
"text": "Android Setup",
"anchor": "android-setup",
"htmlText": "Android Setup"
},
{
"level": 4,
"text": "Option: With Gradle (recommended)",
"anchor": "option-with-gradle-recommended",
"htmlText": "Option: With Gradle (recommended)"
},
{
"level": 4,
"text": "Option: Manual Integration",
"anchor": "option-manual-integration",
"htmlText": "Option: Manual Integration"
},
{
"level": 4,
"text": "Integrating Library for getImageSource Support",
"anchor": "integrating-library-for-getimagesource-support",
"htmlText": "Integrating Library for getImageSource Support"
},
{
"level": 3,
"text": "macOS Setup",
"anchor": "macos-setup",
"htmlText": "macOS Setup"
},
{
"level": 3,
"text": "Windows Setup",
"anchor": "windows-setup",
"htmlText": "Windows Setup"
},
{
"level": 3,
"text": "Web Setup",
"anchor": "web-setup",
"htmlText": "Web Setup"
},
{
"level": 2,
"text": "Upgrading",
"anchor": "upgrading",
"htmlText": "Upgrading"
},
{
"level": 2,
"text": "Icon Component",
"anchor": "icon-component",
"htmlText": "Icon Component"
},
{
"level": 3,
"text": "Properties",
"anchor": "properties",
"htmlText": "Properties"
},
{
"level": 3,
"text": "Static Methods",
"anchor": "static-methods",
"htmlText": "Static Methods"
},
{
"level": 3,
"text": "Styling",
"anchor": "styling",
"htmlText": "Styling"
},
{
"level": 2,
"text": "Icon.Button Component",
"anchor": "iconbutton-component",
"htmlText": "Icon.Button Component"
},
{
"level": 3,
"text": "Properties",
"anchor": "properties-1",
"htmlText": "Properties"
},
{
"level": 2,
"text": "Usage as PNG Image/Source Object",
"anchor": "usage-as-png-imagesource-object",
"htmlText": "Usage as PNG Image/Source Object"
},
{
"level": 2,
"text": "Multi-Style Fonts",
"anchor": "multi-style-fonts",
"htmlText": "Multi-Style Fonts"
},
{
"level": 3,
"text": "Static methods",
"anchor": "static-methods-1",
"htmlText": "Static methods"
},
{
"level": 3,
"text": "Components",
"anchor": "components",
"htmlText": "Components"
},
{
"level": 2,
"text": "Custom Fonts",
"anchor": "custom-fonts",
"htmlText": "Custom Fonts"
},
{
"level": 3,
"text": "createIconSet(glyphMap, fontFamily[, fontFile])",
"anchor": "createiconsetglyphmap-fontfamily-fontfile",
"htmlText": "createIconSet(glyphMap, fontFamily[, fontFile])"
},
{
"level": 3,
"text": "createIconSetFromFontello(config[, fontFamily[, fontFile]])",
"anchor": "createiconsetfromfontelloconfig-fontfamily-fontfile",
"htmlText": "createIconSetFromFontello(config[, fontFamily[, fontFile]])"
},
{
"level": 3,
"text": "createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])",
"anchor": "createiconsetfromicomoonconfig-fontfamily-fontfile",
"htmlText": "createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])"
},
{
"level": 3,
"text": "createMultiStyleIconSet(styles [, options])",
"anchor": "createmultistyleiconsetstyles--options",
"htmlText": "createMultiStyleIconSet(styles [, options])"
},
{
"level": 4,
"text": "iOS",
"anchor": "ios",
"htmlText": "iOS"
},
{
"level": 2,
"text": "Animation",
"anchor": "animation",
"htmlText": "Animation"
},
{
"level": 2,
"text": "Usage Examples",
"anchor": "usage-examples",
"htmlText": "Usage Examples"
},
{
"level": 3,
"text": "IconExplorer",
"anchor": "iconexplorer",
"htmlText": "IconExplorer"
},
{
"level": 3,
"text": "Basic Example",
"anchor": "basic-example",
"htmlText": "Basic Example"
},
{
"level": 2,
"text": "TabBar",
"anchor": "tabbar",
"htmlText": "TabBar"
},
{
"level": 3,
"text": "ToolbarAndroid",
"anchor": "toolbarandroid",
"htmlText": "ToolbarAndroid"
},
{
"level": 3,
"text": "Inline Icons",
"anchor": "inline-icons",
"htmlText": "Inline Icons"
},
{
"level": 2,
"text": "Generating Your Own Icon Set from a CSS File",
"anchor": "generating-your-own-icon-set-from-a-css-file",
"htmlText": "Generating Your Own Icon Set from a CSS File"
},
{
"level": 3,
"text": "Example usage:",
"anchor": "example-usage",
"htmlText": "Example usage:"
},
{
"level": 3,
"text": "Options",
"anchor": "options",
"htmlText": "Options"
},
{
"level": 4,
"text": "-p, --prefix",
"anchor": "-p---prefix",
"htmlText": "-p, --prefix"
},
{
"level": 4,
"text": "-t, --template",
"anchor": "-t---template",
"htmlText": "-t, --template"
},
{
"level": 4,
"text": "-o, --output",
"anchor": "-o---output",
"htmlText": "-o, --output"
},
{
"level": 2,
"text": "Changelog",
"anchor": "changelog",
"htmlText": "Changelog"
},
{
"level": 2,
"text": "Troubleshooting",
"anchor": "troubleshooting",
"htmlText": "Troubleshooting"
},
{
"level": 4,
"text": "The icons show up as a crossed out box on Android",
"anchor": "the-icons-show-up-as-a-crossed-out-box-on-android",
"htmlText": "The icons show up as a crossed out box on Android"
},
{
"level": 4,
"text": "Red screen with \"Unrecognized font family\" error on iOS",
"anchor": "red-screen-with-unrecognized-font-family-error-on-ios",
"htmlText": "Red screen with \"Unrecognized font family\" error on iOS"
},
{
"level": 4,
"text": "Android build fails on Windows for no good reason",
"anchor": "android-build-fails-on-windows-for-no-good-reason",
"htmlText": "Android build fails on Windows for no good reason"
},
{
"level": 4,
"text": "Wrong icons are shown after upgrading this package",
"anchor": "wrong-icons-are-shown-after-upgrading-this-package",
"htmlText": "Wrong icons are shown after upgrading this package"
},
{
"level": 4,
"text": "Some icons are missing after upgrading this package",
"anchor": "some-icons-are-missing-after-upgrading-this-package",
"htmlText": "Some icons are missing after upgrading this package"
},
{
"level": 2,
"text": "License",
"anchor": "license",
"htmlText": "License"
}
],
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Foblador%2Freact-native-vector-icons"
}
},
{
"displayName": "LICENSE",
"repoName": "react-native-vector-icons",
"refName": "master",
"path": "LICENSE",
"preferredFileType": "license",
"tabName": "MIT",
"richText": null,
"loaded": false,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": null,
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Foblador%2Freact-native-vector-icons"
}
}
],
"overviewFilesProcessingTime": 123.711205
}
},
"appPayload": {
"helpUrl": "https://docs.github.com",
"findFileWorkerPath": "/assets-cdn/worker/find-file-worker-a007d7f370d6.js",
"findInFileWorkerPath": "/assets-cdn/worker/find-in-file-worker-d0f0ff069004.js",
"githubDevUrl": null,
"enabled_features": {
"code_nav_ui_events": false,
"copilot_conversational_ux": false,
"react_blob_overlay": false,
"copilot_conversational_ux_embedding_update": false,
"copilot_popover_file_editor_header": true,
"copilot_smell_icebreaker_ux": true,
"copilot_workspace": false
}
}
}
}
{
"accept-ranges": "bytes",
"cache-control": "max-age=0, private, must-revalidate",
"content-encoding": "gzip",
"content-security-policy": "default-src 'none'; base-uri 'self'; child-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com api.githubcopilot.com objects-origin.githubusercontent.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com copilot-workspace.githubnext.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/",
"content-type": "text/html; charset=utf-8",
"date": "Mon, 22 Apr 2024 10:09:08 GMT",
"etag": "352965a8f7b91846af5a3ad79f8770bc",
"referrer-policy": "no-referrer-when-downgrade",
"server": "GitHub.com",
"set-cookie": "logged_in=no; Path=/; Domain=github.com; Expires=Tue, 22 Apr 2025 10:09:08 GMT; HttpOnly; Secure; SameSite=Lax",
"strict-transport-security": "max-age=31536000; includeSubdomains; preload",
"transfer-encoding": "chunked",
"vary": "X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, Accept-Encoding, Accept, X-Requested-With",
"x-content-type-options": "nosniff",
"x-frame-options": "deny",
"x-github-request-id": "E394:230C25:9F8A7B1:DFB0CE0:66263744",
"x-xss-protection": "0"
}