David Ewins

SF Symbols to Material Symbols

Search for an icon and get the iOS and Android names side by side, with a line you can paste into Expo Router native tabs.

NativeTabs takes an SF Symbol for iOS and a Material Symbol for Android, and I got tired of looking each one up twice. These are 410 pairs I picked by hand for common tab icons. Every name is checked against the same lists the sf and md props are typed from, so the line compiles.

app/(tabs)/_layout.tsx
// SDK 55 to 57. On SDK 58 and later, import from 'expo-router/native-tabs'.
import { NativeTabs } from 'expo-router/unstable-native-tabs'

export default function TabLayout() {
  return (
    <NativeTabs>
      <NativeTabs.Trigger name="index">
        <NativeTabs.Trigger.Icon sf="house.fill" md="home" />
        <NativeTabs.Trigger.Label>Home</NativeTabs.Trigger.Label>
      </NativeTabs.Trigger>
    </NativeTabs>
  )
}

410 of 410 icons. Click one to copy its line.

Notes

The previews are Material Symbols. SF Symbols are Apple's and can't be shown here, so open the SF Symbols app to see one.

The iOS version is the first one that has the symbol. For a different icon when the tab is selected, pass an object, like sf={{ default: 'house', selected: 'house.fill' }}.

Sources