Integrating Lucide Icons with Tailwind CSS

While using built-in styling props works, integrating icons directly with Tailwind CSS utility classes provides better layout control.

1. Controlling Dimensions and Colors

To style Lucide Icons with Tailwind, pass utility classes to the component className prop. Under the hood, these classes apply styles directly to the compiled SVG element:

import { Heart } from "lucide-react";

function SocialButton() {
  return (
    // Style icon width, height, and color via utility classes
    <Heart className="w-6 h-6 text-red-500 hover:text-red-600 transition" />
  );
}

• w-6 h-6 translates to a size of 1.5rem (24px).
• text-red-500 sets the SVG path stroke outline color to red.

2. Adjusting Stroke Width with Tailwind

Tailwind provides utilities to control the SVG stroke width property directly:

• stroke-1 (stroke-width: 1)
• stroke-2 (stroke-width: 2)

import { Info } from "lucide-react";

function InfoPanel() {
  return (
    // Set stroke width to thin line
    <Info className="w-5 h-5 text-blue-600 stroke-1" />
  );
}

3. Responsive and Interactive States

Since Tailwind classes control the icon styles, you can easily add responsive shifts or interactive hover states:

import { Settings } from "lucide-react";

function SettingsButton() {
  return (
    <button className="flex items-center gap-2 p-2 hover:bg-gray-100 rounded">
      {/* Icon spins on hover and grows on medium displays */}
      <Settings className="w-5 h-5 md:w-6 md:h-6 text-gray-500 transition-transform group-hover:rotate-45" />
      <span>Settings</span>
    </button>
  );
}