Skip to main content
C
chrd
Participant
January 24, 2018
Answered

IcoMoon and Font Awesome 5 icons in Adobe Xd?

  • January 24, 2018
  • 2 replies
  • 6835 views

Hello!

I've recently just started using Adobe Xd and love it so far. Was able to mock up a wireframe super quick! My question regards to using the free icons from both IcoMoon and Font Awesome. How would I go about importing these assets? I can't seem to figure out how or what format to use. Is it possible to use them as SVGs or would they have to be PNG or layers in Adobe's programs like PSD or AI?

Thanks!

This topic has been closed for replies.
Correct answer Peter_Flynn

SVG is the best format to use when importing into XD, since then you can be guaranteed it will render crisply for every device (different devices use different pixel-density screens).  SVG is also more editable, for example if you wanted to change the color of the icon after importing it into XD, or customize the shape.

Icon fonts should also work fine in XD -- that's the next best thing to importing SVG.  It still renders crisply on all devices, and you can customize the color as long as you're ok with the entire icon being all the same color.  But it'll be a little clunkier to work with for snapping/resizing, and you can't do more in-depth customization of the icon's appearance.

Pixel-based (raster) assets like PNG are the least ideal for icons.  You'll want as large a PNG image as you can get, to ensure the icon doesn't look fuzzy on high-DPI devices like newer iPhones.  And you won't be able to change the icon's color in XD -- you'll need an image editor like Photoshop to do that.

If you're importing photographic images or product screenshots into XD, then you'll have to use a raster format like PNG or JPEG -- but that's fine, since that's the use case those formats do best at.

Hope that helps clear up the pros & cons of different formats!

2 replies

K
kikibres
Inspiring
May 1, 2018

How do I install Font Awesome 5 with Adobe XD?

    P
    Adobe Employee
    Peter_FlynnCorrect answer
    Adobe Employee
    January 25, 2018

    SVG is the best format to use when importing into XD, since then you can be guaranteed it will render crisply for every device (different devices use different pixel-density screens).  SVG is also more editable, for example if you wanted to change the color of the icon after importing it into XD, or customize the shape.

    Icon fonts should also work fine in XD -- that's the next best thing to importing SVG.  It still renders crisply on all devices, and you can customize the color as long as you're ok with the entire icon being all the same color.  But it'll be a little clunkier to work with for snapping/resizing, and you can't do more in-depth customization of the icon's appearance.

    Pixel-based (raster) assets like PNG are the least ideal for icons.  You'll want as large a PNG image as you can get, to ensure the icon doesn't look fuzzy on high-DPI devices like newer iPhones.  And you won't be able to change the icon's color in XD -- you'll need an image editor like Photoshop to do that.

    If you're importing photographic images or product screenshots into XD, then you'll have to use a raster format like PNG or JPEG -- but that's fine, since that's the use case those formats do best at.

    Hope that helps clear up the pros & cons of different formats!

      C
      chrdAuthor
      Participant
      January 25, 2018

      Thank you Peter! This was extremely insightful and just what I was looking for.

        P
        Adobe Employee
        Peter_Flynn
        Adobe Employee
        January 25, 2018

        You're welcome! Glad you found that info helpful.

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