Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

Icon Design

🔥Tips, resources and discussions to help design great icons

Icon Design / General

Thoughts on half pixels?

Thoughts on half pixels?

Icon Design / GeneralMay 22, 2018 · 3:30am
I am working on a web app ui and have a set of icons that are around 18x18px. The 1px strokes seem a little too subtle and 2px are looking a bit chunky. Is it a bad idea to use half pixels? (I noticed that Trello uses 1.5px strokes on their smaller icons)

May 22, 2018 · 4:16am

its reaalllllyyyy not ideal

  • reply
  • like

I wouldn’t recommend it

like-fill
3
  • reply
  • like

Trello isn’t know for their design 🙃

  • reply
  • like

If you are worried about this I would just commit to 2px and make the colour less pronounced. Usually this means reducing the transparency. Optically this can produce the desired effect.

  • reply
  • like

If you're working in Sketch remember to preview it in the pixel mode so you know how most other people will see it.

  • reply
  • like

Yes, you can use 1.5px without problems. The days of pixel perfection are over 😎

I was wondering the same question last week, so I've asked about it to the Streamline 3.0 beta testers through my mailing list. Around 60 designers/developers answered. The huge majority (I'll say 90%) says they would use half pixel, and a lot of them already do it in their design 👌

  • reply
  • like

Today, most screens are high def, or they will be soon. Being pixel perfect stop you to use a far better stroke wight that bring more legibility, without being too thick (like often with 2px strokes).

  • reply
  • like

The Twitter design team is also exclusively using 1.5px now

  • reply
  • like

Streamline 3.0 will actually use the 3 different weights, like this:

  • reply
  • like
  • reply
  • like

You can see how the 1.5px stroke is more legible

  • reply
  • like

If you're using 1.5px for legibility within an 18px canvas, you might want to simplify your glyph instead.

like-fill
1
  • reply
  • like

Thanks for all the feedback. I'm going to try and go with a slightly larger canvas and use 2px and then compare them with the current 1.5px ones I had going.

like-fill
2
  • reply
  • like
Your message here...

*bold*_italic_`code````codeblock```