Change the Heroicons SVG stroke width in React

To render Heroicons with a thinner line in React, set the stroke-width CSS property on the SVG path elements. A CSS rule overrides the value hardcoded in the icon, so you don’t need to touch the components at all.

Here’s how I found out.

I was using Heroicons in a Next.js app and they conveniently package the icons as 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, maybe with a prop, but I couldn’t find a way.

I could import the SVG directly from the site, but I liked the React components approach.

For some reason I assumed setting a global CSS property directly didn’t work, as it was hardcoded in the SVG, but it actually worked:

svg path {
  stroke-width: 1;
}

Why does this work?

The outline icons ship with a stroke-width attribute hardcoded on their path elements. That’s what I thought would win.

But in SVG, attributes like stroke-width are presentation attributes, and they sit at the very bottom of the CSS cascade. Any matching CSS rule beats them, no matter how low its specificity.

So a plain svg path selector is enough to override the value baked into the icon.

You can use decimal values too. stroke-width: 0.8 renders an even thinner line.

Scope the selector

The rule above targets every SVG path on the page. That includes logos, illustrations, and any other icon set you use. You probably don’t want that.

A class keeps the change contained:

.icon-thin path {
  stroke-width: 1;
}

The Heroicons components forward props to the underlying svg element, so you can pass className directly:

<PencilIcon className='icon-thin' />

Now only the icons you mark get the thinner stroke.

Watch out for solid icons

Heroicons come in two sets: outline and solid.

Only the outline icons are drawn with strokes. The solid ones are filled shapes, so stroke-width has no effect on them.

If you apply this technique and nothing changes, check which set you imported. Switching to the outline variant fixes it.