Changing the Heroicons SVG Stroke Width in React

I recently came across the Heroicons library while working on a Next.js app. I was impressed by the convenience of using the icons as React components. However, I wanted to customize the stroke width of the icons to make them thinner.

At first, I tried to achieve this within the JSX code by using a prop, but I couldn’t find a way to do it. Then, I considered importing the SVG directly from the Heroicons website, but I preferred the React components approach.

Interestingly, I discovered that setting a global CSS property directly could actually modify the stroke width of the Heroicons SVG:

1
2
3

svg path {
  stroke-width: 1;
}

By applying this CSS rule, I was able to achieve the desired thinner stroke width for the Heroicons in my React app.

Tags: Heroicons, React, Next.js, SVG, JSX, CSS