React Native

@open-symbols/react-native renders the same icon data and engine presets through react-native-svg. Use it when you want live motion, values and triggers in a React Native app.

Install

npm install @open-symbols/react-native @open-symbols/react @open-symbols/core react-native-svg

For Expo, let Expo select the compatible native SVG version:

npm install @open-symbols/react-native @open-symbols/react @open-symbols/core
npx expo install react-native-svg

Follow your app's native dependency setup and rebuild if needed. The declared peer ranges are React Native ≥0.79, React ≥18 and below 20, and react-native-svg ≥15. See the support matrix for the exact tested Expo and React Native configuration.

Render an icon

import { Icon } from "@open-symbols/react-native";
import wifi from "@open-symbols/core/icons/wifi01";

export function ConnectionStatus() {
  return <Icon icon={wifi} size={28} color="#111111" effect="pulse" alt="Connected" />;
}

Import individual definitions to keep unused icons out of the app. Pass a concrete color; React Native has no browser currentColor. size is in dp and weight is measured in the 24-unit viewBox, so the rendered stroke width is weight × size / 24 dp.

trigger="tap", manual handles, paused, isActive, variable values and system reduced motion are supported. Hover does not fire on native. Without alt, the icon is decorative; with alt, it has an accessible image label.

One shared frame loop runs while icons animate and pauses while the app is backgrounded. React Native uses monochrome rendering; transition, replace and duotone are not exposed. For pre-rendered animations or Swift/Android apps, see Lottie.