Basic Styling: Color, Size, and Stroke Width

Lucide Icons are native SVG elements wrapped in framework components. This wrapper provides key props to control style attributes without writing extra CSS.

1. Controlling Icon Size (size)

The size prop controls both the CSS width and height properties of the SVG element simultaneously. You can pass numbers (which map to pixels) or standard string values:

import { Play } from "lucide-react";

function VideoPlayer() {
  return (
    <div>
      {/* 24px width and height (Default size) */}
      <Play />

      {/* 16px width and height */}
      <Play size={16} />

      {/* 48px width and height */}
      <Play size={48} />
    </div>
  );
}

2. Setting Icon Color (color)

The color prop sets the CSS SVG stroke attribute, which determines the outline color of the vector paths:

import { CheckCircle } from "lucide-react";

function StatusMessage() {
  return (
    <div>
      {/* Renders red check circle outline */}
      <CheckCircle color="red" />

      {/* Renders custom hex color outline */}
      <CheckCircle color="#10b981" />
    </div>
  );
}

3. Adjusting Stroke Width (strokeWidth)

The strokeWidth prop determines the thickness of the vector outline paths. This allows you to customize the icon visual weight to match light or bold typography layouts:

import { Search } from "lucide-react";

function SearchInput() {
  return (
    <div>
      {/* Delicate thin lines (stroke width: 1px) */}
      <Search strokeWidth={1} />

      {/* Default standard style (stroke width: 2px) */}
      <Search strokeWidth={2} />

      {/* Chunky bold lines (stroke width: 3px) */}
      <Search strokeWidth={3} />
    </div>
  );
}