React Native Integration

Bring beautiful, scalable SVG icons to your React Native projects with the official @lineiconshq/react-native-lineicons (opens in a new tab) 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 Svelte Integration