Back to list
Reactlucide-reactIconsSVGTailwind

[React][Lib] Lightweight Icons with lucide-react

Replace heavy icon fonts and hand-managed SVGs with tree-shaken Lucide React components - size, color, and Tailwind styling via props and className.

1. Environment

  • OS: Windows 11 / macOS
  • Frontend library: React.js (v18+)
  • Icon library: lucide-react
  • Terminal: PowerShell (Windows) / zsh (macOS)

2. Problem

Older ways of adding icons come with serious downsides:

  • Heavy font icons (Font Awesome, etc.): A few icons still pull a large web-font file. Load time suffers, and icons sometimes flash as empty boxes (|–.
  • Hand-managed SVG files: Wrapping each .svg as a component looks fine until you hit 50|–00 icons. File sprawl grows, and changing color or size dynamically gets awkward.

3. Cause

Font-based icon packs usually cannot tree-shake. Showing one search icon still downloads thousands of unused glyphs before paint.

Raw SVG files also bloat JSX, and icons from different designers often disagree on stroke width and corner radius - so the UI loses visual consistency.

4. Solution

1) Install lucide-react

# npm
npm install lucide-react

# yarn
yarn add lucide-react

# pnpm (recommended)
pnpm add lucide-react

2) Basic usage

Look up names on lucide.dev, then import only what you need as components (tree-shaking friendly):

import React from 'react';
import { Camera, Heart, Settings } from 'lucide-react';

function IconExample() {
  return (
    <div>
      {/* Default size is 24px */}
      <Camera />
    </div>
  );
}

3) Customize with props and Tailwind

Treat size, color, and strokeWidth like normal HTML/React props. With Tailwind, classes such as text-blue-500 also tint the icon:

function CustomIcon() {
  return (
    <div style={{ display: 'flex', gap: '20px' }}>
      {/* Size, color, stroke */}
      <Heart color="red" size={48} strokeWidth={2.5} />

      {/* CSS / Tailwind className works fully */}
      <Settings className="h-8 w-8 animate-spin text-blue-500" />
    </div>
  );
}

5. Summary

lucide-react is a common frontend default that fixes both performance and maintenance.

Only icons you import ship in the final bundle, and it pairs cleanly with Tailwind CSS.

Icon fonts (e.g. Font Awesome) lucide-react
Rendering Text font (can break) SVG components (stable)
Bundle size Downloads unused icons too Only imported icons
Styling Mostly CSS Props and/or className

Related posts