react-native-vector-icons

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

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

import { createBottomTabNavigator } from '@amazon-devices/react-navigation/bottom-tabs';
import MaterialCommunityIcons from '@amazon-devices/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: 'ホーム',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: '更新情報',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="bell" color={color} size={size} />
          ),
          tabBarBadge: 3,
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'プロフィール',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

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

import Icon from '@amazon-devices/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>
);

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

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

const myIcon1 = <Icon name="comments" size={30} color="#900" />; // デフォルトのレギュラーを使用
const myIcon2 = <Icon name="comments" size={30} color="#900" solid />;
const myIcon3 = <Icon name="comments" size={30} color="#900" light />; // FA5 Proのみ

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

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

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

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

import { createMultiStyleIconSet } from '@amazon-devices/react-native-vector-icons';

/*
 * これはあくまでもサンプルコードです。好みに応じて
 * 自由にグリフマップとスタイルをデザインできます。
 */

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;
      }
    }

    /* 常に何らかのファミリーを返します */
    return glyphKeys[0];
  }
};

/*
 * stylesオブジェクトは、後でスタイルとして使用される
 * キーと、フォントに適用するスタイルオブジェクト
 * として使用されるオブジェクトで構成されます。適切な
 * スタイルが選択されるように、スタイルにはフォント
 * ごとに固有の特性を含める必要があります。
 * FontAwesome 5では、5.7.0からスタイルを区別する
 * ためにフォントの太さを使用していますが、その他の
 * プロパティ（fontFamilyなど）も使用できます。
 * これは標準のRNスタイルオブジェクトです。
 */
const styles = {
  style1: {
    fontWeight: '700'
  },
  style2: {
    fontWeight: '100'
  }
};

const Icon = createMultiStyleIconSet(styles, options);

/* デフォルトのスタイル（style1）を使用します */
<Icon name={'hello'} />
<Icon name={'world'} style1 />
/* デフォルトのスタイルはstyle1ですが、これはstyle2にフォールバックします */
<Icon name={'foo'} />
/* これもstyle2にフォールバックします */
<Icon name={'foo'} style1 />
/* style2を普通に使用します */
<Icon name={'bar'} style2 />