Heroicons for React Native

Install

npm install @sidekickicons/react-native react-native-svg

In an Expo app, install react-native-svg with npx expo install react-native-svg instead, so its version matches your SDK.

Usage

Import icons from the directory of the style you want. Heroicons and Sidekickicons come from the same package, so you can mix them freely.

import { ChartBarIcon, CrownIcon } from "@sidekickicons/react-native/24/outline";
import { View } from "react-native";

export function Example() {
  return (
    <View style={{ flexDirection: "row", gap: 8 }}>
      <ChartBarIcon color="#64748b" />
      <CrownIcon size={32} color="#4f46e5" />
    </View>
  );
}

Component names are the icon name in PascalCase followed by Icon: crown is CrownIcon.

Props

• size: the width and height. Defaults to the style's size: 24, 20 or 16.
• color: the icon's color. On the web, icons also take the surrounding text color when no color is set.
• Any other react-native-svg Svg prop, such as style.

Accessibility

Icons are hidden from screen readers, so give the button or link around an icon a label:

<Pressable accessibilityRole="button" accessibilityLabel="Upgrade">
  <CrownIcon color="#4f46e5" />
</Pressable>

TypeScript

The package comes with types. IconComponent and IconProps can be imported from the package root, for example to pass icons as props:

import type { IconComponent } from "@sidekickicons/react-native";

type TabProps = {
  icon: IconComponent;
  label: string;
};

Switching from react-native-heroicons

react-native-heroicons hasn't been updated since January 2024. Its size and color props work the same way here, so usually only the imports change:

// Before
import { SparklesIcon } from "react-native-heroicons/outline";

// After
import { SparklesIcon } from "@sidekickicons/react-native/24/outline";