Lineicons React - Essential UI Icons for React

Lineicons is the perfect icon library and pack for designers and developers seeking essential icons in React components. With a range of free icons available, it's the ultimate resource for creating beautiful and functional interfaces.

React Components for Lineicons

Explore and Download All 5700+ Icons

Installation

lineicons-react is available as an npm package.

npm install lineicons-react

or

yarn add lineicons-react

Usage

Using SVG icons

To use a SVG icon all you have to do is import it from lineicons-react and use it as shown below.

import { Adobe } from "lineicons-react";

function App() {
  return (
    <div>
      <Adobe style={{ fill: "red", fontSize: "5rem" }} />
    </div>
  );
}

export default App;

Using Icon Font

To use the Icon Font first import the CSS file into your Index.js file

import "lineicons-react/dist/styles/styles.css";

Then Import LineIcon from Lineicon-react and use it. After that add name and variation which is lni for free ones. These are the required props if you want you can add more using the style property.

import { LineIcon } from "lineicons-react";

function App() {
  return (
    <div>
      <LineIcon
        name="adobe"
        variation="lni"
        style={{ fontSize: "1rem", color: "red" }}
      />
    </div>
  );
}

export default App;

Documentation

Lineicons Figma Plugin

Lineicons - Figma Source