https://lucide.dev/guide/advanced/global-styling

I found that just following https://lucide.dev/guide/advanced/global-styling didn't work the way I wanted it to - the style set on .lucide overrode the strokeWidth prop when instantiating icons. I didn't want to set it globally, I just wanted to update the default.

For those using tailwind, the workaround I found was to specify the default in the @base layer:

@layer base {
   /* put in @base so tw util classes can override */
   /* https://lucide.dev/guide/advanced/global-styling */
  .lucide {
    stroke-width: 1.5;
  }
}

And then style the stroke width with the tailwind stroke- classes instead of using the prop, e.g.

<Bell className="stroke-1" />
<Bell className="size-4 stroke-1" /> // with other tw styling instead of props