React Native

@hubtoolify/icons-react-native has a component for every free icon, in the Line style, for apps built with React Native or Expo. Icons are drawn with react-native-svg, so they work on iOS, Android and React Native Web. Nothing is parsed at run time: each icon ships as a ready-made tree of react-native-svg elements. TypeScript types are included.

Install#

The package needs react-native-svg 13 or later, React 18 or later and React Native 0.69 or later. In a bare React Native app, run npx pod-install afterwards for iOS.

npm install @hubtoolify/icons-react-native react-native-svg

# Expo: let Expo pick the react-native-svg that matches your SDK
npx expo install react-native-svg
npm install @hubtoolify/icons-react-native

Use#

Import each icon from its own path. The default export is named Hti plus the icon's name in PascalCase: arrow-up-right becomes HtiArrowUpRight. Find names in the icon library.

import HtiHome from '@hubtoolify/icons-react-native/icons/home';
import HtiCalendarCheck from '@hubtoolify/icons-react-native/icons/calendar-check';

<HtiHome />
<HtiHome variant="solid" size={32} color="#1766f2" />
<HtiCalendarCheck variant="duotone" secondaryColor="#ffd23f" secondaryOpacity={0.9} />
<HtiHome strokeWidth={2} title="Home" />

Why one import per icon#

Metro, the bundler React Native and Expo use, does not drop unused exports. Importing from the package root works, and only the icons you use are built, but every icon's code goes into the app. Import by path, as above, to ship only the icons you use.

// Works, but puts every icon's code in the app bundle
import { HtiHome, HtiSearch } from '@hubtoolify/icons-react-native';

Props#

Any other Svg prop (style, testID, onPress) is passed through, and a ref reaches the Svg. Every instance gets its own mask ids, so the same icon can appear any number of times on a screen.

Icon-only buttons#

Label the button and leave the icon hidden, so a screen reader reads the button once:

import { Pressable } from 'react-native';
import HtiSearch from '@hubtoolify/icons-react-native/icons/search';

<Pressable onPress={openSearch} accessibilityRole="button" accessibilityLabel="Search">
  <HtiSearch size={22} />
</Pressable>

Tab bars#

React Navigation passes the tab's colour and size to tabBarIcon. Switching to Solid for the focused tab is a common pattern (from 2.0.0 Solid is in the Pro package):

import HtiHome from '@hubtoolify/icons-react-native/icons/home';
import HtiSettings from '@hubtoolify/icons-react-native/icons/settings';

<Tab.Screen
  name="Home"
  component={HomeScreen}
  options={{
    tabBarIcon: ({ color, size, focused }) => (
      <HtiHome variant={focused ? 'solid' : 'line'} color={color} size={size} />
    ),
  }}
/>

Dark mode#

import { useColorScheme } from 'react-native';

const ink = useColorScheme() === 'dark' ? '#f4f4f5' : '#18181b';
<HtiHome color={ink} />

Pro styles#

With a Pro plan, @hubtoolify-pro/icons-react-native has every Pro style except 3D, with Solid and Duotone from 2.0.0. Import each icon by style and name. There is no index per style, for the same Metro reason. The components take size, color, title, and secondaryColor and secondaryOpacity for the two-tone styles. Jass and Lineal keep their fixed palette, and Duo and Flat start in each icon's own colour. It installs from HubToolify's own registry; see Pro packages.

import HtiHome from '@hubtoolify-pro/icons-react-native/slab/home';
import HtiBell from '@hubtoolify-pro/icons-react-native/sharp-duotone/bell';

<HtiHome size={32} color="#1766f2" />
<HtiBell secondaryColor="#ffd23f" secondaryOpacity={0.6} />