How to create and simplify your icon component library in Figma

Managing a large library of icons in Figma can get messy. But guess what? It doesn’t have to be.

You can take your icons from looking like this —

to this —

— in only a few steps.

1. Create each icon as its own component

Don’t create a single icon component with loads of variants. This will ultimately slow down your file and make it cumbersome to add new icons.

Instead, create each icon as its own component. This will eliminate the need for variants entirely.

Cons to creating icons as variants:

• There’s no easy way to categorize icons if you have large number of variants
• When selecting a variant from the dropdown, each icon appears in the order it was created which makes it difficult to scan the list (you can drag to reorder when editing the variant properties but this becomes hard to manage)
• You can’t see an image of each icon so you have to rely on the name alone for identification