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: 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-svgis 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 |
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