What stroke width Instagram is using for its icons and how to get same results?Super-thin UI Trend: Is there a name for this “beyond 'flat'” style?What's the best approach when designing website/app UI icons in Photoshop?How can I make more consistent icons by controlling the ratio of icon using grid?Create a custom stroke with an exact pattern of many different square and rectangular dashesProblem with bold line in pattern after I export file from Illustrator into PhotoshopHow to render icons with crisp edges in IllustratorLine quality issues in GIMPCan I have layers with different pixel resolution in Photoshop?Why do edges get blur for font outlines and shapes?White lines when I'm coloring a shape with darker colors in Illustrator
How come Arya Stark didn't burn in Game of Thrones Season 8 Episode 5
Divisor Rich and Poor Numbers
Why is the marginal distribution/marginal probability described as "marginal"?
Pedaling at different gear ratios on flat terrain: what's the point?
Would life always name the light from their sun "white"
How does this piece of code determine array size without using sizeof( )?
How can I fix the label locations on my tikzcd diagram?
What is this rubber on gear cables
Why didn't Daenerys' advisers suggest assassinating Cersei?
Why doesn't Iron Man's action affect this person in Endgame?
Is there an academic word that means "to split hairs over"?
Do high-wing aircraft represent more difficult engineering challenges than low-wing aircraft?
Why is so much ransomware breakable?
What formula to chose a nonlinear formula?
Failing students when it might cause them economic ruin
Holding rent money for my friend which amounts to over $10k?
Given 0s on Assignments with suspected and dismissed cheating?
Why use a retrograde orbit?
When the match time is called, does the current turn end immediately?
How can I make dummy text (like lipsum) grey?
Would it be fair to use 1d30 (instead of rolling 2d20 and taking the higher die) for advantage rolls?
How does the Heat Metal spell interact with a follow-up Frostbite spell?
Single word that parallels "Recent" when discussing the near future
refer string as a field API name
What stroke width Instagram is using for its icons and how to get same results?
Super-thin UI Trend: Is there a name for this “beyond 'flat'” style?What's the best approach when designing website/app UI icons in Photoshop?How can I make more consistent icons by controlling the ratio of icon using grid?Create a custom stroke with an exact pattern of many different square and rectangular dashesProblem with bold line in pattern after I export file from Illustrator into PhotoshopHow to render icons with crisp edges in IllustratorLine quality issues in GIMPCan I have layers with different pixel resolution in Photoshop?Why do edges get blur for font outlines and shapes?White lines when I'm coloring a shape with darker colors in Illustrator
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, image 2 is Instagram example, image 3 is 2px stroke
adobe-illustrator icon stroke pixel outline
asked May 11 at 10:54
YounessYouness
383
New contributor
Youness is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
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, image 2 is Instagram example, image 3 is 2px stroke
adobe-illustrator icon stroke pixel outline
asked May 11 at 10:54
YounessYouness
383
New contributor
Youness is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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.
– Danielillo
May 11 at 10:57
add a comment |
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, image 2 is Instagram example, image 3 is 2px stroke
adobe-illustrator icon stroke pixel outline
asked May 11 at 10:54
YounessYouness
383
New contributor
Youness is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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, image 2 is Instagram example, image 3 is 2px stroke
adobe-illustrator icon stroke pixel outline
adobe-illustrator icon stroke pixel outline
asked May 11 at 10:54
YounessYouness
383
New contributor
Youness is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked May 11 at 10:54
YounessYouness
383
New contributor
Youness is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited May 11 at 11:27
Youness
asked May 11 at 10:54
YounessYouness
383
New contributor
Youness is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked May 11 at 10:54
YounessYouness
383
asked May 11 at 10:54
YounessYouness
383
383
New contributor
Youness is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Youness is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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.
– Danielillo
May 11 at 10:57
add a comment |
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.
– Danielillo
May 11 at 10:57
1
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.
– Danielillo
May 11 at 10:57
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.
– Danielillo
May 11 at 10:57
add a comment |
1 Answer
1
active
oldest
votes
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:
- 1px
- 1px black + 2px grey
- 2px
This is the second icon structure:
answered May 11 at 11:46
DanielilloDanielillo
26.9k13887
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 at 13:00
Glad to help...
– Danielillo
May 11 at 13:01
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "174"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Youness is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgraphicdesign.stackexchange.com%2fquestions%2f124503%2fwhat-stroke-width-instagram-is-using-for-its-icons-and-how-to-get-same-results%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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:
- 1px
- 1px black + 2px grey
- 2px
This is the second icon structure:
answered May 11 at 11:46
DanielilloDanielillo
26.9k13887
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 at 13:00
Glad to help...
– Danielillo
May 11 at 13:01
add a comment |
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:
- 1px
- 1px black + 2px grey
- 2px
This is the second icon structure:
answered May 11 at 11:46
DanielilloDanielillo
26.9k13887
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 at 13:00
Glad to help...
– Danielillo
May 11 at 13:01
add a comment |
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:
- 1px
- 1px black + 2px grey
- 2px
This is the second icon structure:
answered May 11 at 11:46
DanielilloDanielillo
26.9k13887
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:
- 1px
- 1px black + 2px grey
- 2px
This is the second icon structure:
answered May 11 at 11:46
DanielilloDanielillo
26.9k13887
edited May 11 at 18:13
answered May 11 at 11:46
DanielilloDanielillo
26.9k13887
answered May 11 at 11:46
DanielilloDanielillo
26.9k13887
answered May 11 at 11:46
DanielilloDanielillo
26.9k13887
26.9k13887
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 at 13:00
Glad to help...
– Danielillo
May 11 at 13:01
add a comment |
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 at 13:00
Glad to help...
– Danielillo
May 11 at 13:01
2
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 at 13:00
Thanks Danielillo, it worked! I used as in your example 1px + 1.3px all black and it gave a fantastic result.
– Youness
May 11 at 13:00
Glad to help...
– Danielillo
May 11 at 13:01
Glad to help...
– Danielillo
May 11 at 13:01
add a comment |
Youness is a new contributor. Be nice, and check out our Code of Conduct.
Youness is a new contributor. Be nice, and check out our Code of Conduct.
Youness is a new contributor. Be nice, and check out our Code of Conduct.
Youness is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Graphic Design Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgraphicdesign.stackexchange.com%2fquestions%2f124503%2fwhat-stroke-width-instagram-is-using-for-its-icons-and-how-to-get-same-results%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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.
– Danielillo
May 11 at 10:57