IcoMoon and Font Awesome 5 icons in Adobe Xd?

[chrd]

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!

[Peter_Flynn · Accepted solution]

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!

[chrd]

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

[Peter_Flynn]

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

[kikibres]

How do I install Font Awesome 5 with Adobe XD?