# Change the Heroicons SVG stroke width in React

> How to change the stroke width of Heroicons in a React app to render thinner icons, simply by setting the stroke-width CSS property on the svg path element.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2021-07-11 | Topics: [React](https://flaviocopes.com/tags/react/) | Canonical: https://flaviocopes.com/react-heroicons-stroke-width/

I was using [Heroicons](https://heroicons.com) in a [Next.js](https://flaviocopes.com/nextjs/) app and they conveniently package the icons as [React](https://flaviocopes.com/react/) components.

One thing I wanted to do was customize the stroke width, so they rendered thinner.

I looked how to do that within the [JSX](https://flaviocopes.com/jsx/), maybe with a [prop](https://flaviocopes.com/react-props/), but I couldn't find a way.

I could import the [SVG](https://flaviocopes.com/svg/) directly from the site, but I liked the React components approach.

For some reason I assumed setting a global [CSS](https://flaviocopes.com/css) property directly didn't work, as it was hardcoded in the SVG, but it actually worked:

```css
svg path {
  stroke-width: 1;
}
```