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

---
title: Getting started - React
description: This guide will help you get started with Lucide in your React project.
---
<script setup>
import OverviewLink from '../../.vitepress/theme/components/base/OverviewLink.vue'
import OverviewLinkGrid from '../../.vitepress/theme/components/base/OverviewLinkGrid.vue'
import { reactSidebar } from '../../.vitepress/sidebar/react'
</script>

# Getting started

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

## Installation

::: code-group

```sh [pnpm]
pnpm add lucide-react
```

```sh [yarn]
yarn add lucide-react
```

```sh [npm]
npm install lucide-react
```

```sh [bun]
bun add lucide-react
```

:::

## Importing your first icon

Lucide is built with ES Modules, so it's completely tree-shakable.

Each icon can be imported as a React component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.

```jsx
import { Camera } from 'lucide-react';
// Usage
const App = () => {
  return <Camera />;
};
export default App;
```

### Importing a single icon

You can also import one icon at a time. This skips the icon barrel, which matters when modules are resolved at runtime (server-side rendering, for example), and only loads a small type declaration instead of the full one.

```tsx
import Camera from 'lucide-react/icons/camera';
import type { LucideProps } from 'lucide-react/types';
```

These per-icon entry points are ES modules only. `require()` of one works on Node.js 20.19 and 22.12 or newer; on older versions, import the icon from the package root instead.

## 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            |
| `nonScalingStroke` | *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](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).

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

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

<OverviewLinkGrid>
  <OverviewLink v-for="item in reactSidebar[1].items" :key="item.link" :href="item.link" :title="item.text" :desc="item.desc"/>
</OverviewLinkGrid>