I often see people create components of icons, while I have the ‘luxury’ of using an icon font, such as FontAwesome. I’m experienced, but wouldn’t call myself a Figma Expert (or Sketch, for that matter). Therefor I was wondering about the pros and cons in the discussion of icons vs icon-font? For example in Buttons, form items or other reusable components, why should I revert to somewhat flattened icons, when I can have an icon font that’s more dynamic?
Question
Why should I create icon-components when I have an icon-font?
I have always think of this from the perspective of how it would be implemented. If you are using some sort of a component or svg setup for icons in production, make components in Figma. If you are using an icon font in production, might be easier to use that instead.
I’ve never really been a big fan of icon fonts personally for a bunch of reasons, both in production and Figma. In Figma I just find being able to hit Shift + I or Opt + 2 and search for an icon, and drag it in, to be much faster, and easier to swap when used in nested components. In production I think there are a bunch of good arguments too:
- There is a chance you load a big heavy icon font where you only use a small subset of icons
- I lie pixel perfect icons at specific sizes, its really easy for that to get out of control when tied to infinite amount of font sizes.
- Can get lots of CSS control over stroke and fill properties with svgs, and they are arguably easier to make more accessible with title and description attributes. Can even animate svg.
- You can also inline svgs depending on how they are implemented which can reduce http requests. In fact there are lots of flexible options on how you can implement, via an img tag, inline, or even encoded as a data URI into a stylesheet.
TLDR: I am a big fan of aligning on the same approach in both design and production. Not sure if this helps!
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.