Overview

Linear Admin (Next.js) uses Lucid Icons as the default icons library for all of it’s icon requirements.

Lucide is an open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects.

Icons

Basic usage

Browse the Lucide Icons website to find the icon you want to use.

Let’s say you want to use the search icon. You can use the following sample HTML to display the icon.

import { Search } from "lucide-react";

export const SearchPage = () => {
  return (
    <div>
      <Search size={32} />

      ...
    </div>
  );
};

Styling

Lucid icons comes with the following props that you can use to customize the icons:

color

The color can be adjusted by passing the color prop to the element.

<Search color="red" />

size

By default, the size of all icons is 24px by 24px. The size is adjustable using the size prop and CSS.

<Search size={32} />

strokeWidth

All icons are designed with SVG elements using strokes. These have a default stroke width of 2px.

The strokeWidth can be adjusted to create a different look of the icons.

<Search strokeWidth={4} />