# React Native Integration

Bring beautiful, scalable SVG icons to your **React Native** projects with the official [`@lineiconshq/react-native-lineicons`](https://www.npmjs.com/package/@lineiconshq/react-native-lineicons) package. Use **Free** or **Pro** Lineicons instantly and customize their **size, color, stroke width, and styles** with simple props.

**Step-1:** First, you have to install Lineicons React Native NPM Package -

```
npm install @lineiconshq/react-native-lineicons @lineiconshq/free-icons react-native-svg
```

```
yarn add @lineiconshq/react-native-lineicons @lineiconshq/free-icons react-native-svg
```

> **Note:** `react-native-svg` is required as a peer dependency.

For **iOS (React Native CLI)** users, install pods:

```
cd ios && pod install
```

## Usage

```
import { Lineicons } from '@lineiconshq/react-native-lineicons';
import { Home2Outlined } from '@lineiconshq/free-icons';

export default function App() {
  return <Lineicons icon={Home2Outlined} size={32} color="#007AFF" strokeWidth={2} />;
}
```

## `<Lineicons />`

| Prop            | Type                    | Default                    | Description                                   |
|-----------------|-------------------------|----------------------------|-----------------------------------------------|
| `icon`          | `IconData`             | — _(required)_            | Icon object to render.                       |
| `size`          | `number | string`       | `24`                      | Icon size (pixels or any CSS size unit).    |
| `color`         | `string`                | `currentColor`           | Icon color (hex, rgb, or named colors).      |
| `strokeWidth`   | `number`               | `1.5`                     | Stroke width for stroke icons.                |
| `style`         | `ViewStyle`            | —                          | Extra React Native style props.               |
| `...otherProps` | `SvgProps`             | —                          | Any additional `react-native-svg` props.     |

* * *

## Icon Styles Available

- **Stroke** — clean outlines with adjustable stroke width
- **Solid** — fully filled icons
- **Duotone** — layered two-tone icons
- **Bulk** — bold icons with background shapes
- **Outlined** — alternative outline style

[Vue Integration](/content/docs/integrations/vue/index.html) [Svelte Integration](/content/docs/integrations/svelte/index.html)