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: Install the React wrapper and the free icons package:

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

pnpm add @lineiconshq/react-lineicons @lineiconshq/free-icons

yarn add @lineiconshq/react-lineicons @lineiconshq/free-icons

bun add @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;

Using Pro Icons

Pro gives you access to all 31,204 icons and works the same way as the free package.

mkdir -p vendor/lineicons && mv ~/Downloads/lineiconshq-pro-core-*.tgz vendor/lineicons/

npm install ./vendor/lineicons/*.tgz

pnpm add ./vendor/lineicons/*.tgz

yarn add ./vendor/lineicons/*.tgz

bun add ./vendor/lineicons/*.tgz

npm install @lineiconshq/react-lineicons

pnpm add @lineiconshq/react-lineicons

yarn add @lineiconshq/react-lineicons

bun add @lineiconshq/react-lineicons

import React from "react";
import { Lineicons } from "@lineiconshq/react-lineicons";
import { AlarmError } from "@lineiconshq-pro/core-outlined";
 
function App() {
  return (
    <div>
      <Lineicons
        icon={AlarmError}
        size={24}
        color="blue"
        strokeWidth={1.5}
      />
    </div>
  );
}
 
export default App;

To get an icon’s import name, open it on lineicons.com/icons , click Copy Icon Name, and convert it to PascalCase (alarm-error → AlarmError).

Tip: You can install free and Pro packages together. If two imports share a name, rename one on import, for example import { AlarmError as AlarmErrorSolid } from "@lineiconshq-pro/core-solid";.

For deploying, updating, and troubleshooting, see Pro Packages.

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.