Why I don't use icon fonts in Figma

Getting font-based icons into Figma text layers requires multiple steps, including leaving Figma to browse a glyph library, selecting an icon, copying a tiny inline rendering, and pasting it back into a text layer. Official plugins for Font Awesome and Material Icons place selected icons as SVG paths on the canvas inside frames rather than enabling direct keyboard pasting into text layers. Using Material’s icon font can feel faster by typing glyph names, but it depends on memorizing exact names. When glyphs are available as SVG components, visual previews and fuzzy search can be supported through keywords stored in component descriptions, allowing control over search behavior.

"Getting an icon into Figma takes a lot of work. Figma's own docs (which use Font Awesome as an example) describe this as a 7-step process. The worst of which involve leaving Figma to go to FA's website... browsing their collection of glyphs, selecting the right one (which opens a modal-ouch)... copying a teeny tiny inline rendering of that icon to your clipboard... and coming back to your text layer in Figma to paste it in. Woof."

"If I was working with SVG paths that were stored as components, I could just pull instances directly into my designs. But that's not the case. When you select an icon in FA's plugin, it places it on the canvas as an SVG path inside of a frame. Google's official Material Icons Figma plugin behaves the same way."

"There's something about this workflow that feels faster and more satisfying than the one above. But that doesn't mean it's great. For this to work, I'd have to memorize the exact names of glyphs. When I want a glyph I don't have memorized, I still have to use either the font-creator's plugin, or a gallery on an official website to browse my options and learn new icons' names."

"If I was working with SVGs stored as main components, I'd get the visual previews and have "fuzzy search" available via keywords stored in the component descriptions. What's more, those keywords are mine (or my design system's) to control. I mean, just look at the difference in experience for overriding icons within a component:"

Read at Alicepackarddesign