Skip to Content

React Native Integration

Bring beautiful, scalable SVG icons to your React Native projects with the official @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: Install the React Native wrapper, the free icons package, and react-native-svg:

npm install @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} />
  );
}

Using Pro Icons

Pro gives you access to all 31,204 icons and works the same way as the free package.

Pro packages are not on the public npm registry, so npm install @lineiconshq-pro/... on its own will fail. Log in to your Lineicons account and download the package files from the Downloads  page, then install them from a local file.

Download the Pro packages

Log in to your Lineicons account and open Downloads  from the account menu. Download the .tgz file for each style you need: Stroke, Outlined, Solid, Duotone, or Bulk.

Move them into your project

Run this from your project root (change ~/Downloads if you saved the files elsewhere):

mkdir -p vendor/lineicons && mv ~/Downloads/lineiconshq-pro-core-*.tgz vendor/lineicons/

Install the Pro packages

This installs every .tgz file in vendor/lineicons:

npm install ./vendor/lineicons/*.tgz

On Windows, *.tgz is not expanded. List each file path instead, as shown in the Pro Packages guide.

Install the wrapper

Pro icons render through @lineiconshq/react-native-lineicons and react-native-svg, the same packages you use for free icons. Skip this step if you already installed them. On iOS (React Native CLI), run cd ios && pod install afterwards.

npm install @lineiconshq/react-native-lineicons react-native-svg

Use Pro icons

Import icons from the Pro package for the style you want. Pro icon names have no style suffix, so the outlined AlarmError comes from @lineiconshq-pro/core-outlined.

import { Lineicons } from "@lineiconshq/react-native-lineicons";
import { AlarmError } from "@lineiconshq-pro/core-outlined";
 
export default function App() {
  return (
    <Lineicons icon={AlarmError} size={32} color="#007AFF" strokeWidth={2} />
  );
}

To get an icon’s import name, open it on lineicons.com/icons , click Copy Icon Name, and convert it to PascalCase (alarm-error → AlarmError).

Tip: You can install free and Pro packages together. If two imports share a name, rename one on import, for example import { AlarmError as AlarmErrorSolid } from "@lineiconshq-pro/core-solid";.

Commit vendor/lineicons so CI and hosting builds can install it, but only in private repositories. Never publish the .tgz files to npm or push them to a public repo.

For deploying, updating, and troubleshooting, see Pro Packages.

<Lineicons />

PropTypeDefaultDescription
iconIconData— (required)Icon object to render.
sizenumber | string24Icon size (pixels or any CSS size unit).
colorstringcurrentColorIcon color (hex, rgb, or named colors).
strokeWidthnumber1.5Stroke width for stroke icons.
styleViewStyle—Extra React Native style props.
...otherPropsSvgProps—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
Last updated on
Vue IntegrationSvelte Integration