Width of stroke in an SVG icon

Question

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

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

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?

Answer 1

To answer your question - you can use 1-pixel strokes but...

• beware use on dark backgrounds (esp. non axis aligned elements)
• don't use 1-pixel strokes for all icon components - mix it up
• consider mixing up foreground and background strokes
• ensure pixel aligned stroke edges
• be consistent

More details:

I also find that designing SVG icons to suit a target size of around 20 to 25 pixels can lead to the same questions over stroke width (or rectangle size).

At this size, 2-pixel strokes can indeed appear heavyweight or 'chunky' and lacking resolution. While it is of course possible to design a set of icons like this, if you have a large suite of icons to design, or you have 'interesting' concepts to convey in iconic form, then you'll quickly run unto the problem of not having enough space to draw what you want using 2-pixel strokes.

On the other hand, if you have icons that appear on both dark and light backgrounds, you'll probably find that while 2-pixel strokes look chunky on a light background, then conversely 1-pixel strokes will appear harder to see on dark backgrounds (similar to text).

As a compromise, I prefer to use 1 pixel strokes for an outline shape and a mixture of 1 and 2 pixel strokes to differentiate the character of different parts of the icon, including differentiation of foreground and background elements within the icon. For example - three 1-pixel strokes set 3 pixels apart generates a spacing of 2 pixels between strokes: do you consider that as 1 pixel foreground strokes or 2-pixel background strokes?

Once I have a style for a suite of icons, it quickly becomes apparent when one of the icons is underweight or overweight, and perhaps therein lies the crux of the matter - which is that when you have your whole suite of icons - do they provide the sense of a consistent and holistic approach to the icon design? Do they work together, and do they work within the larger context of your application? And can you extend the style to new icons as required?

Answer 2

Every graphic designer, designs icons using pixel perfect aesthetic for this reason the icons are designed with size 24 × 24 but actual size of art is 20 × 20 px with 2 px safe space on everyside. These can be scaled up to 64 × 64 px. For larger size the icons being used are detailed, not outlined.

About stroke, most of Designer and Developer don't use icons with strokes. I know those looks like stroke but those are compound path (solid path) with width 2dp which is equivalent to 2px.

Answer 3

You can do whatever you want, is not like you have to follow Material Design to the A, it's just a guideline. Personally, I think it's meant to die relatively soon, as all other previous design systems, a lot of people and designers are tired of the "oh, look, just ANOTHER MD design!" feeling.

Anyways, on to your specific question: I think your question is one that many people made BEFORE Material Design, with the introduction of line icons on iOS 7. Many UX designers wondered if looks were worth some accessibility issues. In some way, I think MD icon guidelines is the implicit answer to that question. While those line icons were (are) beautiful, elegant and sleek, they clearly have accessibility issues. MD icons are more strong from a visual point of view, and easier to identify at first sight than the ORIGINAL SET of line icons. By now, iOS adjusted them and mixes it with filled icons as well in order to improve accessibility. Nowadays all tests we ran or that we found online, for both styles, are more or less a match.

In short: you can do whatever you want as long as you test it.

But...

All the above being said, you want no labels, you want to make icons less prominent and you also want to make them thinner. I don't know what are the specifications of this project, but at first sight it looks like you should pay more attention to usability and accessibility. If you don't need that navigation, simply don't use it. If you need it, I'd recommend to use a proper navigation bar following proper UX principles. At least, as close to principles as you can.