Skip to main content
P
PriyR
Participant
January 5, 2022
Answered

How to create pixel perfect Icons in XD?

  • January 5, 2022
  • 1 reply
  • 2015 views

 

 

 

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>

    This topic has been closed for replies.
    Correct answer AkinGn

    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 🙂

    1 reply

    AkinGn
    Community Expert
    AkinGnCommunity ExpertCorrect answer
    Community Expert
    January 5, 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 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 🙂

      P
      PriyRAuthor
      Participant
      January 6, 2022

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

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices