Getting started

This guide will help you get started with Lucide in your React Native project. Make sure you have a React Native environment set up. If you don't have one yet, you can create a new React Native project using React Native CLI, Expo, or any other React Native boilerplate of your choice.

Installation

First, ensure that you have react-native-svg (version between 12 and 15) installed. Then, install the package:

pnpm

pnpm add lucide-react-native

yarn

yarn add lucide-react-native

npm

npm install lucide-react-native

bun

bun add lucide-react-native

Importing your first icon

Lucide is built with ES Modules.

Each icon can be imported as a React component, which renders an react-native-svg element.

import { Camera } from 'lucide-react-native';

// Usage
const App = () => {
  return <Camera />;
};

export default App;

Props

To customize the appearance of an icon, you can use the following props:

name	type	default
size	number	24
color	string	currentColor
strokeWidth	number	2
absoluteStrokeWidth	boolean	false

Because icons render as SVG elements, all standard SVG attributes can also be applied as props. See the list of SVG Presentation Attributes on MDN.

// Usage
const App = () => {
  return <Camera size={48} color="red" strokeWidth={1} />;
};

More examples and details how to use props, continue the guide:

ColorAdjust the color of your iconsSizingAdjust the size of your iconsStroke widthAdjust the stroke width of your icons