8

I'm designing on Illustrator icons for a new app, when I use 1px stroke and preview on mobile they look very thin and when I use 2px stroke they look a bit bold while Instagram icons look and feel perfect. I tried to reproduce the same but I think they use something around 1.3px stroke which is not pixel perfect for me. Could you explain me if my understanding is wrong and how I can get same result as Instagram icons?

here is an example, hope it helps to understand my point:

Image 1 is 1px stroke:

This is 1px stroke

Image 2 is Instagram example:

This is instagram example

Image 3 is 2px stroke:

This is 2px stroke

| improve this question | |
  • 1
    Hi Youness Mazouz, welcome to GD.SE, could you put some example image icons at the question please. Not all the people who answer here are Instagram users. – user120647 May 11 '19 at 10:57
10

I'm not sure if this is the case, but sometimes the icons are made with a double stroke to mimic a fake stroke width. At the icons below there are three different strokes:

  1. 1px
  2. 1px black + 2px grey
  3. 2px

icons

This is the second icon structure:

icon structure

| improve this answer | |
  • 2
    Thanks Danielillo, it worked! I used as in your example 1px + 1.3px all black and it gave a fantastic result. – Youness May 11 '19 at 13:00
  • Glad to help... – user120647 May 11 '19 at 13:01

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.