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:
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