Skip to main content

SF Symbols

Content​

The preferable way to show icons on iOS is to use SF Symbols.

Browsing icons​

All icons are stored as enum with names in /resources/symbols/sfSymbols. It contains mostly all the 3 100 icons.

To take a look at them without using them you can open SF Symbols App on macOS.

Using icons in navigation​

BottomTab​

react-native-navigation currently supports SF Symbols as icon in bottomTab:

Main.options = {
  bottomTab: {
    sfSymbol: SFSymbols["app.gift"],
    sfSelectedSymbol: SFSymbols["app.gift.fill"],
  },
};

It also applies same effect properties as Icon ones, like selectedIconColor or iconColor, see more properties here.

BackButton​

SF Symbol can also be applied directly as topBar's backButton like so:

Main.options = {
  topBar: {
    backButton: {
      sfSymbol: SFSymbols["arrow.backward.circle"],
    },
  },
};

Using icons as components​

Usage of SF Symbols as components made possible by react-native-sfsymbols.

You can use it directly like so:

<SFSymbol 
    name={SFSymbol["thermometer.sun.fill"]}
    size={16} 
    multicolor={false}
/>

But it will be shown only on iOS, which is not desired.

To work with both iOS and Android, there's IconPlatform component, which shows SF Symbols on iOS and Material Icons on Android, it works next way:

<IconPlatform 
    iosName={SFSymbols["thermometer.sun.fill"]}
    androidName={"star-rate"}
    size={32} 
    resizeMode={"contain"} 
    style={styles.clauseIcon}
/>