{"id":11258,"library":"lucide-react-native","title":"Lucide Icons for React Native","description":"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.","status":"active","version":"1.8.0","language":"javascript","source_language":"en","source_url":"https://github.com/lucide-icons/lucide","tags":["javascript","Lucide","React Native","Feather","Icons","Icon","SVG","Feather Icons","Fontawesome","typescript"],"install":[{"cmd":"npm install lucide-react-native","lang":"bash","label":"npm"},{"cmd":"yarn add lucide-react-native","lang":"bash","label":"yarn"},{"cmd":"pnpm add lucide-react-native","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required by React Native.","package":"react","optional":false},{"reason":"Core peer dependency for any React Native library.","package":"react-native","optional":false},{"reason":"Essential for rendering SVG icons in React Native environments. Must be installed and linked separately.","package":"react-native-svg","optional":false}],"imports":[{"note":"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.","wrong":"const Activity = require('lucide-react-native').Activity;","symbol":"Activity","correct":"import { Activity } from 'lucide-react-native';"},{"note":"Icons are exported individually as named exports from the main package entry point. Direct deep imports like `lucide-react-native/Bell` are incorrect.","wrong":"import Bell from 'lucide-react-native/Bell';","symbol":"Bell","correct":"import { Bell } from 'lucide-react-native';"},{"note":"Use `import type` for importing the TypeScript type definition for an icon component, especially when using 'isolatedModules' or similar TypeScript configurations.","wrong":"import { LucideIcon } from 'lucide-react-native';","symbol":"LucideIcon","correct":"import type { LucideIcon } from 'lucide-react-native';"}],"quickstart":{"code":"import React from 'react';\nimport { SafeAreaView, Text, StyleSheet } from 'react-native';\nimport { Activity, Bell, Settings } from 'lucide-react-native';\n\n// Ensure react-native-svg is installed and linked correctly.\n// For bare React Native projects, run: npm install react-native-svg && cd ios && pod install\n\nconst App = () => {\n  return (\n    <SafeAreaView style={styles.container}>\n      <Text style={styles.title}>Lucide React Native Icons</Text>\n      <Activity color=\"#007bff\" size={48} strokeWidth={2.5} style={styles.icon} />\n      <Bell color=\"crimson\" size={36} fill=\"rgba(220, 20, 60, 0.2)\" style={styles.icon} />\n      <Settings color=\"green\" size={50} style={styles.icon} />\n      <Text style={styles.description}>These icons are fully customizable SVG components.</Text>\n    </SafeAreaView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#f0f4f8',\n    padding: 20,\n  },\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    marginBottom: 30,\n    color: '#333',\n  },\n  icon: {\n    marginVertical: 15,\n  },\n  description: {\n    marginTop: 30,\n    fontSize: 16,\n    color: '#555',\n    textAlign: 'center'\n  }\n});\n\nexport default App;","lang":"typescript","description":"This example demonstrates how to import and render various Lucide icons in a React Native application, applying custom colors, sizes, and stroke widths."},"warnings":[{"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`).","message":"The `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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Always use ES module `import` statements (e.g., `import { Activity } from 'lucide-react-native';`) for best compatibility and tree-shaking.","message":"Like 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Prior 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.","severity":"gotcha","affected_versions":"1.0.0 - 1.0.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The `react-native-svg` library, which is a peer dependency, is not correctly installed, linked, or initialized in the native project.","error":"Invariant Violation: requireNativeComponent: \"RNSVGPath\" was not found in the UIManager."},{"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.","cause":"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.","error":"TypeError: (0, _lucide_react_native__WEBPACK_IMPORTED_MODULE_2__.Activity) is not a function"},{"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.","cause":"This usually points to a problem with `react-native-svg` not being linked or configured correctly, preventing the SVG assets from rendering.","error":"Icons not visible or appear as empty squares in Android/iOS."}],"ecosystem":"npm"}