Registry / web-framework / lucide-react-native

lucide-react-native

library1.8.0jsnpmunverified

lucide-react-native is the official React Native implementation of the Lucide icon library. It provides a comprehensive collection of highly customizable SVG icons specifically designed for use in mobile applications. The library is currently at version 1.8.0, reflecting a stable and mature codebase since its V1 release. It maintains a consistent and relatively fast release cadence, with minor versions often published weekly or bi-weekly, primarily to introduce new icons and deliver minor fixes across the broader Lucide ecosystem. Key differentiators include its extensive and continually expanding icon set, its lightweight nature, full TypeScript support, and the ability to customize icon properties such as size, color, and stroke width directly as component props. It serves as a modern, community-driven alternative to older icon sets, offering enhanced flexibility, tree-shaking capabilities, and a consistent design language well-suited for contemporary React Native projects.

web-framework

npm install lucide-react-native

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · LUCIDE-REACT-NATIV

lucide-react-native

web-frameworkjavascriptv1.8.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Activity

✓ import { Activity } from 'lucide-react-native';

✗ const Activity = require('lucide-react-native').Activity;

Primary way to import individual icon components. Prefer named imports for tree-shaking benefits. CommonJS 'require' syntax is generally not supported or recommended for this ESM-first library.

Bell

✓ import { Bell } from 'lucide-react-native';

✗ import Bell from 'lucide-react-native/Bell';

Icons are exported individually as named exports from the main package entry point. Direct deep imports like `lucide-react-native/Bell` are incorrect.

LucideIcon

✓ import type { LucideIcon } from 'lucide-react-native';

✗ import { LucideIcon } from 'lucide-react-native';

Use `import type` for importing the TypeScript type definition for an icon component, especially when using 'isolatedModules' or similar TypeScript configurations.

This example demonstrates how to import and render various Lucide icons in a React Native application, applying custom colors, sizes, and stroke widths.

import React from 'react'; import { SafeAreaView, Text, StyleSheet } from 'react-native'; import { Activity, Bell, Settings } from 'lucide-react-native'; // Ensure react-native-svg is installed and linked correctly. // For bare React Native projects, run: npm install react-native-svg && cd ios && pod install const App = () => { return ( <SafeAreaView style={styles.container}> <Text style={styles.title}>Lucide React Native Icons</Text> <Activity color="#007bff" size={48} strokeWidth={2.5} style={styles.icon} /> <Bell color="crimson" size={36} fill="rgba(220, 20, 60, 0.2)" style={styles.icon} /> <Settings color="green" size={50} style={styles.icon} /> <Text style={styles.description}>These icons are fully customizable SVG components.</Text> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f4f8', padding: 20, }, title: { fontSize: 24, fontWeight: 'bold', marginBottom: 30, color: '#333', }, icon: { marginVertical: 15, }, description: { marginTop: 30, fontSize: 16, color: '#555', textAlign: 'center' } }); export default App;

Debug

Known issues

breakingThe `lucide-react-native` package depends heavily on `react-native-svg` as a peer dependency. Failure to install and properly link `react-native-svg` will result in runtime errors and icons not rendering.

fix

Ensure `react-native-svg` is installed (`npm install react-native-svg` or `yarn add react-native-svg`) and follow its linking instructions, especially for bare React Native projects (`cd ios && pod install`).

affects: >=1.0.0

gotchaLike other modern React Native packages, `lucide-react-native` is designed for ESM (ECMAScript Modules). Using CommonJS `require()` statements for importing icons can lead to module resolution issues or incorrect bundling.

fix

Always use ES module `import` statements (e.g., `import { Activity } from 'lucide-react-native';`) for best compatibility and tree-shaking.

affects: >=1.0.0

gotchaPrior to version 1.1.0, some module resolution issues related to `preserveModulesRoot` could occur in specific bundler configurations, potentially leading to build failures or incorrect imports.

fix

Upgrade to `lucide-react-native@1.1.0` or newer to benefit from improved module resolution fixes. If encountering issues on older versions, review bundler configurations (e.g., Metro) for module path resolution.

affects: 1.0.0 - 1.0.2

Errors

Common errors & fixes

Invariant Violation: requireNativeComponent: "RNSVGPath" was not found in the UIManager.

The `react-native-svg` library, which is a peer dependency, is not correctly installed, linked, or initialized in the native project.

fix

Install `react-native-svg` (`npm install react-native-svg` or `yarn add react-native-svg`). For iOS, navigate to your `ios` directory and run `pod install`. Restart your Metro bundler and re-build your native application.

TypeError: (0, _lucide_react_native__WEBPACK_IMPORTED_MODULE_2__.Activity) is not a function

This error typically indicates an incorrect import statement, where a named export is being treated as a default export, or a CommonJS `require` call is failing to resolve the ES Module exports.

fix

Ensure you are using named ES module imports: `import { Activity } from 'lucide-react-native';`. Double-check for typos in icon names or extra curly braces.

Icons not visible or appear as empty squares in Android/iOS.

This usually points to a problem with `react-native-svg` not being linked or configured correctly, preventing the SVG assets from rendering.

fix

Verify that `react-native-svg` is installed and properly linked (especially after React Native upgrades or changing build environments). Clear Metro cache (`npm start -- --reset-cache`) and rebuild your application.

Upgrade

Version history

1.8.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency required by React Native.

react-nativerequiredCore peer dependency for any React Native library.

react-native-svgrequiredEssential for rendering SVG icons in React Native environments. Must be installed and linked separately.

Agent activity

28 hits · last 30 days

node

Resources

githubhttps://github.com/lucide-icons/lucide ↗

packagehttps://www.npmjs.com/package/lucide-react-native ↗

homepagehttps://lucide.dev ↗