Built on top of sweet-sfsymbols for the SF Symbols on iOS as well as expo-vector-icons for the MaterialIcons and MaterialCommunityIcons icon families on other platforms.

• Seamlessly renders SF Symbols on iOS and Material icons everywhere else.
• Select 1 icon name to render the Material Icon and the equivalent SF Symbol.
• Default behavior automatically selects the appropriate icon based on the platform.
• Customizable naming scheme to choose between Material icons and SF Symbols.
• Support for over 573 icons mapped one-to-one between Material icons and SF Symbols and all other SF symbols, Material, and Material Community icons.
• Full control over Sf Symbol via sweet-sfsymbols props and Material or Material Community icons via expo-vector-icon props.

ATTENTION: This library will not work with Expo Go. Create a development build if you haven't already done so.

Requires Expo SDK 46+ and Xcode 15+.

Install the package in your project:

npx expo install @roninoss/icons

Rebuild your project for iOS:

npx expo prebuild -p ios --clean
npx expo run:ios

Or rebuild your project for Android:

npx expo prebuild -p android --clean
npx expo run:android

Basic:

Renders the arrow.up.square.fill SF Symbol on iOS and the arrow-up-box icon from the MaterialCommunityIcons Family otherwise.

<Icon name='arrow-up-box' color={'orange'} />

Material Icon on all platforms:

Renders the arrow-up-box icon from the MaterialCommunityIcons Family on all platforms.

<Icon name='arrow-up-box' color={'orange'} ios={{ useMaterialIcon: true }} />

With sweet-sfsymbols Props:

Renders the sun.max.fill SF Symbol with a native animation on iOS and the arrow-up-box icon from the MaterialCommunityIcons Family without animations otherwise.

<Icon
  name='arrow-up-box'
  color={'orange'}
  ios={{
    name: 'sun.max.fill',
    colors: ['orange'],
    symbolEffect: {
      type: 'pulse',
      isActive: true,
      repeat: true,
      speed: 2,
    },
  }}
/>

With Material Icon Props:

Renders the arrow.up.square.fill SF Symbol on iOS and the alternate-email icon from the MaterialIcons Family otherwise.

<Icon
  name='arrow-up-box'
  color={'orange'}
  materialIcon={{ type: 'MaterialIcons', name: 'alternate-email' }}
/>

With the Sf Symbol Naming Convention:

Renders the phone.fill SF Symbol on iOS and the phone icon from the MaterialCommunityIcons Family otherwise.

<Icon name={'phone.fill'} namingScheme='sfSymbol' />

You can all 573 icons the are mapped 1-to-1 below. However, if the icon you need is missing, you can find all icons here:

• Sf Symbols
• Material Icons: Select the MaterialIcons and MaterialCommunityIcons filters

By default, the Icon accepts a Material Name for the name prop.

To select the name from its SF Symbol Name, add the prop of namingScheme="sfSymbol" to the Icon component.