Best practice with icons: Use component with underlying font vs Import every icon as vector layer?

Ask the community
1

The general consensus for best practice, as well as what I see in most pro UI kits for sale, seems to be importing a huge set of icons as SVG individually in the Figma design system files, and creating one component out of each icon with a vector layer only, and building components using icons based on that.

However, one of the more “traditional” or long standing icon providers, FontAwesome, provides the option to use a simpler component that uses an underlying OS or Figma hosted font to speficy which icon should be displayed (and a custom component can even be made to use Figma styles to simplify it). And then, for hand-off, the same FontAwesome provider has an easy tool to generate custom SVG sprites based on what icons are used overall in the project. So, it would seem win-win ?

So my question is, how do more senior designers feel about this versus the import method ?

As a junior, my concerns are that in the case of FontAwesome we use for example, it is 16000 icons, that are actually about 4000 unique icons available in 4 weights.

Importing all this as individual vector layers will decouple each icon from its similar icons of different weight, and from its name that’s findable on the fontawesome website. also, it might require ajusting bouding boxes etc since all icons aren’t of the same exterior size, while as a font character it is aligned properly in the character bounding box.

Sure, using the icons via the official FontAwesome component represents its own drawbacks, but it allows for easy management of sizes, weights, colors, naming, and still allows developers to make a custom svg spritesheet out of the icons actually used in the designs.

why choose one over the other ? or maybe this choice/concern of method only applies to fontawesome and not any other more professional icons library that’s only delivered as SVGs anyway ?

Serious question to learn and improve, if it’s obvious for the pros, please don’t laugh :slight_smile:

Thanks a lot in advance

1 Like
2

Anyone, would appreciate informed feedback please :slight_smile:

1 Like
3

Don’t know if you’re still concerning about this. From my point of view, I would convert all icons into a custom font icon for ease of use. This font icon should have ligatures, a lot. Just like the popular font awesome.

4

I would stick to a vector set, here is why.

I’d assume to use icon font you’d have to know exact Unicode for it, so most likely you would have to navigate away from Figma, copy the code and get back to paste. Thus having multiple vector components makes it easier to discover what’s in the set, I think of component swap and ability to search by name. It just makes things easier for DS users.

Having multiple stroke weight seems very appealing at first, however you would have to stick to a specific value, don’t believe you would want your icons to use different stoke weights here and there.

5

Also icon font renders ugly on low dpi screens (windows machines all over the worlds).

6

I switched to using the Fontawesome library approach after a couple years of using the individual vector approach and I love it. It makes the ease of maintenance and implementation of icons WAY easier, and for me having access to the entirety of the FA library is valuable, as with every UI I find myself needing new ones that I wouldn’t have thought to include in a vector set. With the FA library approach, adding an icon like that to a file is as simple as typing in the icon name and hitting enter.

7

Thanks for your takes on this !

In my case we use a mixed approach. So inside the design system and in the Figma designs, we use the FontAwesome provided component that is using the font, and this allows to switch the icon in designs by just typing a different icon name into a component instance property, very easy.

But for the actual use in the product, web and mobile, a custom SVG sprite is made based on the icons from FA that are actually used across the designs.

So you get the benefit of easy switching to a different weight or style or actual icon just by browsing the huge FA library online and having an easy previsualization and search engine with filtering etc to select your icons. And you also get the benefit of size optimized and beautiful SVG in the actual product.

What do you think of this approach?

8

I have been using both approaches, and the best choice depends on your needs. If you require scalability, I recommend using font icons. For multi-theming in your design system, font variables can switch based on the theme. While you can achieve some functionality switching icon libraries assigning Boolean values on core variables for different theme, they won’t convert icons precisely from one library to another. With icon fonts, you can map one Unicode character to another across different icon libraries while switching theme/brands.

9

As a designer I love ease of use of font icons. I’ve been using Font Awesome Pro font icon in designs for some time and it was great. Unfortunately couple months ago Figma started behaving weird. Some icons were displayed properly, some were displayed as plain text. Some icons broke when component changed states etc.

It was during a time where we were testing one of our app and needless to say that having icons displayed as text didn’t go well. Because of that we got pressured to transition back to vectors.