Lineicons React — Essential UI Icons for React

Lightweight React components for Lineicons. Easily add scalable SVG icons to your React projects with simple props for size, color, and stroke.

---

Installation

npm install @lineiconshq/react-lineicons @lineiconshq/free-icons

---

Usage

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;

---

Lineicons

interface LineiconsProps extends React.SVGProps<SVGSVGElement> {
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  size?: number | string;
  color?: string;
  strokeWidth?: number;
  className?: string;
}

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.

---

TypeScript Support

Fully typed — includes definitions for the LineIcons component and all icon exports.

---

License

• Free Icons: MIT License

---

Links

• 📖 Documentation
• 💬 Support
• 🔌 Figma Plugin
• 📁 Figma Source