lucide/docs/guide/react-native/getting-started.md

title, description

title	description
Getting started - React Native	This guide will help you get started with Lucide in your React Native project.

<script setup> import OverviewLink from '../../.vitepress/theme/components/base/OverviewLink.vue' import OverviewLinkGrid from '../../.vitepress/theme/components/base/OverviewLinkGrid.vue' import { reactNativeSidebar } from '../../.vitepress/sidebar/react-native' </script>

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:

::: code-group

pnpm add lucide-react-native

yarn add lucide-react-native

npm install lucide-react-native

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: