How to create pixel perfect Icons in XD?

Community Beginner ,
Jan 05, 2022 Jan 05, 2022

Copy link to clipboard

Copied

 

Screen Shot 2022-01-05 at 12.33.19 PM.png

 

 

Hello, 

I'm struggling to create icons that scale up without losing their properties or looking different from the size it was created. I'd appreciate some help. TIA.

1. Should the icons be designed at the smallest size? if so, what should be the dimensions?

2. While creating outlined stroke icons, does it matter how the stroke is aligned (out, in, or centered)? Should the stroke be converted into fill before exporting to avoid losing the properties while scaling up?

3. Should I create icons in Ai to avoid pixelation or in digital design apps like XD, sketch, or Figma?

4. To get pixel-perfect icons, does each shape that makes up the icon need to be a whole number, or the shape created after the boolean operation should be a whole number?

5. Lastly, when creating a family of icons, do all the icons have to be the same stroke weight?

 

<Title renamed by moderator>

Views

359

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Jan 05, 2022 Jan 05, 2022

Hi @PriyR , I personally never created an icon set but edited some icons I downloaded to match an existing set etc Let me try to answer your questions and share my opinions: 

1- I think the best practices for icons in various sizes is as icons get bigger, adding more details, smaller icons can't have much detail since it's not going to be clearly visible, and common practice is not going below 16X16 px.

2- Now thinking, center aligned stroke makes more sense since it'd be appropriate for most of

...

Likes

Translate

Translate
Adobe Community Professional ,
Jan 05, 2022 Jan 05, 2022

Copy link to clipboard

Copied

Hi @PriyR , I personally never created an icon set but edited some icons I downloaded to match an existing set etc Let me try to answer your questions and share my opinions: 

1- I think the best practices for icons in various sizes is as icons get bigger, adding more details, smaller icons can't have much detail since it's not going to be clearly visible, and common practice is not going below 16X16 px.

2- Now thinking, center aligned stroke makes more sense since it'd be appropriate for most of the designs (especially for smaller sizes, not filling in some gaps that are required etc) I'd certainly suggest converting them to fill to create a more flexible set. 

3- Since XD is also a vector based tool, there isn't going to be a pixelation but the tool's focus is not icon design, so I don't think professional icon designers are creating their sets in XD, AI is the best tool to create such designs. As I said I do edit sometimes icons in XD (althoug those are minor edits like adding some storke etc to make an icon match with an existing set I'm using etc, as I said, for more complex edits I use AI)

4- It sounds like it'd be better for shapes to be whole numbers.

5- Since point of an icon set is to be consistent, I'd say yes, the stroke widths need to be same.

 

Hope this helps 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jan 06, 2022 Jan 06, 2022

Copy link to clipboard

Copied

LATEST

@AkinGn Thank you so much. I really appreciate your help. This clarifies my doubt 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines