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:
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 24×24 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 24×24, but they can also be displayed smaller e.g. 20×20 (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?