The big idea: icons in Figma should be components, or they're future cleanup
There are two kinds of Figma files: ones where icons are components and ones where someone will eventually spend a weekend fixing the icons. The setup that scales takes about an hour once, and here's the whole thing:
1. One icon page, flat components. Every icon is a component on a dedicated page, named to match your code (edition #6: trash-outline-24 in Figma and in the repo). Not nested six frames deep, not scattered across product pages.
2. Standardize the container, not just the glyph. Every component is the same frame size (24×24) with the glyph keyline-aligned inside (edition #1). This is what makes swap magic work — when containers match, swapping icons never nudges your layout.
3. Instance swap is the entire payoff. Designers never detach, never re-paste: select an icon instance, swap via the instance menu (or make the glyph an instance-swap property on your button/input components — then icons swap from the properties panel without entering the component). Changed your mind about a metaphor across 40 screens? Swap the component once; every instance follows.
4. Color via a single style. Set glyph fills to your icon-default variable/style, not hardcoded hex (edition #5). Dark mode and theming become a variable flip instead of an archaeology project.
5. Publish as a library — even for a team of one. Publishing gives you versioning, and update notifications when an icon changes, which is your edition-#6 "changes are expensive" policy, enforced by tooling.
The 2-minute bootstrap: you don’t need to build the components by hand. The IconBuddy Figma plugin drops icons in as clean editable vectors — pull your working set (your project collection from edition #2), select all, Ctrl/Cmd+Alt+K each into components on your icon page, publish. Done before the standup ends.
60-second tip
Audit trick: in Figma, select any icon and check the layer panel. If you see Vector 847 inside Group 12 inside Frame 3, you're looking at pasted-SVG debt. Fifteen minutes of componentizing your top 20 icons pays for itself the first time someone asks "can we try a different settings icon?"
Steal this: the Icon Library Starter (.fig)
A ready-made Figma file: the component page structure, 24px keyline grid baked into a component template, an example set wired with instance-swap properties on button/input/nav components, and naming pre-matched to the edition-#6 convention. Duplicate, swap in your family, publish.
Before you go
What's your team's most embarrassing Figma icon crime? (Vector 847 confessions welcome.) Reply — anonymized best answers next week, when we close out season one with the big question: how do you actually develop taste?
— Iconic, by IconBuddy
Some links may be affiliate links — we earn a commission at no extra cost to you. We only recommend tools we actually use.