LineIcons React Native — Free & Pro Premium Icon Collection
Professional-grade React Native components for LineIcons Free and LineIcons Pro
✨ Features
- 🎨 Multiple Styles — Stroke, Solid, Duotone, Bulk, and Outlined icons
- 📱 React Native Ready — Optimized for mobile performance
- 🧩 Customizable — Control size, color, stroke width, and styles
- 🚀 Tree Shaking — Only bundle the icons you use
- 🧑💻 TypeScript Support — Full type definitions included
- 📦 Lightweight — Minimal bundle size impact
📦 What's Included
This package supports both Free and Pro LineIcons collections for React Native:
- Bulk Icons: Bold, filled style icons (4800 icons)
- Duotone Icons: Two-tone style icons (4808 icons)
- Solid Icons: Filled style icons (4806 icons)
- Stroke Icons: Stroke style icons (4806 icons)
- Outlined Icons: Outlined style icons (4806 icons)
📦 Installation
Free Icons
npm install @lineiconshq/react-native-lineicons @lineiconshq/free-icons react-native-svg
or
yarn add @lineiconshq/react-native-lineicons @lineiconshq/free-icons react-native-svg
Pro Icons (Manual Local Install)
If you have access to LineIcons Pro, install your .tgz icon packages locally.
Option 1: Icons inside lineicons/ folder
npm install @lineiconshq/react-native-lineicons @lineiconshq/free-icons react-native-svg
npm install ./lineicons/@lineicons-pro-core-solid-1.0.0.tgz
npm install ./lineicons/@lineicons-pro-core-bulk-1.0.0.tgz
npm install ./lineicons/@lineicons-pro-core-duotone-1.0.0.tgz
npm install ./lineicons/@lineicons-pro-core-stroke-1.0.0.tgz
npm install ./lineicons/@lineicons-pro-core-outlined-1.0.0.tgz
Option 2: Icons not in lineicons/ folder
npm install ./@lineicons-pro-core-solid-1.0.0.tgz
npm install ./@lineicons-pro-core-bulk-1.0.0.tgz
npm install ./@lineicons-pro-core-duotone-1.0.0.tgz
npm install ./@lineicons-pro-core-stroke-1.0.0.tgz
npm install ./@lineicons-pro-core-outlined-1.0.0.tgz
🚀 Usage
Free Icon Example
import { Lineicons } from "@lineiconshq/react-native-lineicons";
import { Search1Stroke } from "@lineiconshq/free-icons";
export default function App() {
return (
<Lineicons
icon={Search1Stroke}
size={24}
color="#000000"
strokeWidth={2} // Only for stroke icons
/>
);
}
Pro Icon Example
import { Lineicons } from "@lineiconshq/react-native-lineicons";
import { AlarmError } from "@lineiconshq-pro/core-solid";
import { Aeroplane2 } from "@lineiconshq-pro/core-stroke";
import { Achievement } from "@lineiconshq-pro/core-duotone";
import { Apple } from "@lineiconshq-pro/core-bulk";
import { BadgeBolt2 } from "@lineiconshq-pro/core-outlined";
export default function App() {
return (
<>
<Lineicons icon={AlarmError} size={24} color="#000000" />
<Lineicons icon={Achievement} size={24} color="#000000" />
<Lineicons icon={Aeroplane2} size={24} color="#000000" strokeWidth={2} />
<Lineicons icon={Apple} size={24} color="#000000" />
<Lineicons icon={BadgeBolt2} size={24} color="#000000" />
</>
);
}
Advanced Customization
import { Lineicons } from "@lineiconshq/react-native-lineicons";
import { AlarmError } from "@lineiconshq-pro/core-solid";
export default function CustomIcon() {
return (
<Lineicons
icon={AlarmError}
size={48}
color="#007AFF"
strokeWidth={2.5}
style={{
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
}}
opacity={0.8}
// All other react-native-svg Svg props are supported
/>
);
}
📚 Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon |
IconData |
— (required) | Icon object containing SVG path data. |
size |
number | string |
24 |
Icon size (pixels or percentages). |
color |
string |
currentColor |
Icon color (hex, rgb, or named colors). |
strokeWidth |
number |
1.5 |
Stroke width (only for stroke icons). |
style |
ViewStyle |
— | Additional React Native styles. |
...otherProps |
SvgProps |
— | All other props supported by react-native-svg. |
🔧 Requirements
- React Native ≥ 0.60.0
- React ≥ 16.8.0
- react-native-svg ≥ 12.0.0
iOS Setup (React Native CLI)
If using React Native CLI (not Expo):
cd ios && pod install
📱 Platform Support
- ✅ iOS
- ✅ Android
- ✅ Web (via react-native-web)
🛠️ Development
Build Package
npm run build
Development Mode
npm run dev
📚 Resources & Support
⚖️ License
- Free Icons: MIT License
- Pro Icons: Commercial License (see lineicons.com)