React Integration

Welcome to the React integration section of Lineicons documentation. Here we’ll guide you on how to integrate your React projects and start using Lineicons.

You can effortlessly add a huge range of scalable and customizable icons to your React applications. In this guide, we will walk you through installation, implementation, and customization to ensure the icons go perfectly with your project’s design and functionality.

How to Integrate Lineicons with React Projects

Lineicons provides ready-to-use React components for Lineicons via NPM package for both Free and Pro Icons. Making it easy to add clean, scalable SVG icons to your React or Next.js projects. You can customize size, color, and style with simple props.

Step-1: First, you have to install Lineicons the NPM -

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

Step-2: After installing the package import icon and use anywhere -

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;

API Reference

<Lineicons />

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

All other valid SVG props are supported and passed through.