Lineicons React — Official Lineicons Integration for React
Official React components for Lineicons. Add beautifully crafted SVG icons (Free & Pro) to your React apps with full TypeScript and tree-shaking support.
Installation
Free Icons
npm install @lineiconshq/react-lineicons @lineiconshq/free-icons
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-lineicons
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 React from "react";
import { Lineicons } from "@lineiconshq/react-lineicons";
import {
Home2Outlined,
CloudBolt1Bulk,
CloudBolt1Outlined,
CloudBolt1Duotone,
CloudBolt1Solid,
} from "@lineiconshq/free-icons";
function App() {
return (
<div>
<Lineicons
icon={Home2Outlined}
size={24}
color="blue"
strokeWidth={1.5}
/>
<Lineicons icon={CloudBolt1Bulk} size={40} color="orange" />
<Lineicons icon={CloudBolt1Outlined} size={50} color="blue" />
<Lineicons icon={CloudBolt1Duotone} size={30} color="green" />
<Lineicons icon={CloudBolt1Solid} size={24} />
</div>
);
}
export default App;
Pro Icon Example
import React from "react";
import { Lineicons } from "@lineiconshq/react-lineicons";
import { AlarmError } from "@lineiconshq-pro/core-solid";
import { Aeroplane2 } from "@lineiconshq-pro/core-stroke";
import { Achievement } from "@lineiconshq-pro/core-duotone";
import { Apple, Baby, Earthquake } from "@lineiconshq-pro/core-bulk";
import { BadgeBolt2, StrategyFlowChart } from "@lineiconshq-pro/core-outlined";
function App() {
return (
<div style={{ display: "flex", gap: "16px" }}>
<Lineicons icon={AlarmError} size={24} color="#28a745" />
<Lineicons icon={Achievement} size={24} color="#6f42c1" />
<Lineicons icon={Aeroplane2} size={24} color="#dc3545" />
<Lineicons icon={Apple} size={24} color="#dc3545" />
<Lineicons icon={Baby} size={24} color="#dc3545" />
<Lineicons icon={BadgeBolt2} size={24} color="#dc3545" />
<Lineicons icon={Earthquake} size={24} color="#dc3545" />
<Lineicons icon={StrategyFlowChart} size={24} color="#dc3545" />
</div>
);
}
export default App;
Props
All icons support these props:
interface LineiconsProps extends React.SVGProps<SVGSVGElement> {
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
size?: number | string; // Icon size (default: 24)
color?: string; // Icon color (default: 'currentColor')
strokeWidth?: number | string; // Stroke width for stroke icons (default: 1.5)
className?: string; // Optional CSS class
}
| Prop | Type | Default | Description |
|---|---|---|---|
icon |
React.ComponentType<SVGProps<SVGSVGElement>> |
— (required) | The icon component to render. |
size |
number | string |
24 |
Icon size in pixels or any CSS size unit. |
color |
string |
currentColor |
Icon color. |
strokeWidth |
number |
1.5 |
Stroke width for outlined icons. |
className |
string |
— | Optional CSS class. |
All other valid SVG props are also supported.
Available Icon Styles
| Style | Package | Description |
|---|---|---|
| Solid | @lineicons-pro/core-solid |
Filled style icons with solid colors. |
| Bulk | @lineicons-pro/core-bulk |
Bold, filled style icons. |
| Duotone | @lineicons-pro/core-duotone |
Two-tone style icons with primary and secondary colors. |
| Stroke | @lineicons-pro/core-stroke |
Stroke style icons with customizable stroke width. |
| Outlined | @lineicons-pro/core-outlined |
Outlined style icons. |
TypeScript Support
Fully typed — includes definitions for the Lineicons component, IconData interface, and all icon exports.