Width of stroke in an SVG icon

I'd like to use the "material" icons -- https://material.io/tools/icons/?style=outline

They look a bit cartoonish to me, e.g. here they are on a black top-bar:

enter image description here

Their design guidelines say, for outlined icons,

To maintain legibility, the recommended stroke weight is 2dp for most icons.

2dp outlined icons remain readable across sizes and applications.

My question is -- if I'll only display these icons at their recommended 24x24 size -- can I (might it be good or bad) to edit the SVG to reduce the stroke width to 1?

My guess is:

  • They'll look better, less eye-catching -- i.e. less distracting from the page content
  • They'll still be readable/recognisable
  • The design guideline says 2dp, because it says that although the icons are best viewed at 24x24, but they can also be displayed smaller e.g. 20x20 (which I don't need)

It seems to me that e.g. the borders which you create using CSS, with a 1px width, are all quite visible.

Is there a reason why that mightn't be true too of an SVG icon -- i.e. 1 is enough?

Here's what it looks like on mouse-over, i.e. on :hover -- I simply change the backgroud-color and brighten the fill:

enter image description here

Here it is zoomed and with a pixel-grid superimposed:

enter image description here

I think it's obvious that e.g. the strokes of the mouse-over text, created by the browser (i.e. "Discussions"), is one pixel wide -- and that, i.e. text, is meant to be legible.

Is there a reason to beware that that -- i.e. "1px stroke width is legible" -- wouldn't be equally true of SVG icon content as it is of text?

Tags: