2

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?

  • 1
    To close voters: This isn't about implementation. It's ultimately about accessibility vs. aesthetic design, which does belong here. – maxathousand May 31 at 21:12
  • I'm not asking how to edit the SVG -- I'm asking whether to. I worried that if I do, and it looks good to me on my machine, might it be bad for other people or on other devices? Is it "safe" to use 1 in an SVG icon? Would you, ever? I hesitate to contradict/disobey the design guide (which says 2), given that they know more about design that I do. But am I right in guessing that's mostly or even only so the icon can be reduced, where 1 would become sub-pixel but 2 would still be fairly solid? And what about accessibility? If I take my eyeglasses off, 2px lines don't look less blurred than 1px. – ChrisW May 31 at 21:21
  • I agree with you. I would try to post an answer, but it would basically amount to "test it and see." Many people may find icons half as thick to be nearly impossible to see, but testing with a wide sample of people should reveal whether it's an issue for many or not. Personally, I think the icons look great in your example as they are. Do they highlight a bit on mouseover? I'd think that effect might be lost with a thinner border. – maxathousand May 31 at 21:43
  • @maxathousand I edited to show what mouseover looks like. – ChrisW May 31 at 21:59
  • That looks good. Personally, I think going with a thinner icon might be alright, especially since the hover highlights and has appropriate alt text, but unfortunately I’m just one opinion, and I think trying to test with a diverse audience might be your best bet to see where your aesthetic preferences and usability collide, unless someone else can chime in with some more relevant experience. Good luck! – maxathousand Jun 1 at 4:25
2

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?

0

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.

0

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.

  • 1
    Sorry to be so ignorant but could you reference a description or example of what you mean by "proper UX principles" for "a proper navigation bar"? – ChrisW Jul 1 at 17:05
  • when I say "proper navigation bar" I mean not to hide it, but actually display it and make it easy to find it, because it's exactly that: a navigation bar. As for UX principles, I mean all things you have to consider: usability, accessibility, affordances, etcetera. As an example: there are no labels, and within any context, I can't extract much information out of those icons. I assume it's search, chat, profile, mail (?) in that order, but I'm just assuming. Specially the mail one, without context not sure what does it mean or why is out of the profile (assuming that icon means profile!) – Devin Jul 1 at 20:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.