Iam a new beginner and Iam learning Figma. Please Help me how to create Icon Library in Figma
If you’re new to icon design in general, you can start by recreating designs you see online or in other icon libraries. I’m no expert in icons but for the icon libraries that I had to mantain i’ve learned a few things that I wish i’d know earlier; here are some tips for you:
- Establish a default icon size (Mine’s 24 x 24) and don’t change it under any circumstance, this will affect in the long run, your instances can always be resized anyways.
- Define a stroke size to use for the lines, decide if the endpoints are going to be round or square and draw your icons accordingly.
- When creating the icons, always save an editable frame of your icon (without the strokes outlined) for future changes if needed.
- For “flattening” the icons to their final possible svg output, try to avoid problems or bugs that can happen when outlining strokes by deactivating “Snap to pixel grid” and nudge ever so slightly the conflicting point and try flatten it again.
- Once converted begin cleaning up the vector (you can use shift + backspace to delete a point while mantaining the flow of the curve).
- Rename the layer of the icon (it should only be one layer if you want color change to work) to an “standarized” name and select one default color from your library for every icon regardless of their use in the future, this means: convert each line to a outlined vector with colored fill applied instead of colored stroke.
- Set the constrains of the icon to “scale” on both dimensions and use the plugin “Fill Rule Editor” to audit each icon and make sure every icon has the same fill rule and consistent drawing direction to ensure proper svg and iconfont conversion
- Set the background of all your icons to none and order them in your file, you can rename them with slashes “/” to group them in categories
- One key aspect in this whole process is to try to mantain consistency and a hard set of “rules” both for the design aspect as well as for your icon library documentation, frames and order.
- Always test your icons before publishing, test the color change and retention within other components, the resizing aspect of it and that each icon has its vector renamed and color correctly applied.
- Convert each icon to a component, not as variants. You can use variants for “bolder” versions of your icons, but is crucial to mantain the same naming structure for the variants.
If you have further questions let me know and happy designing.
2 Likes
@Derek_Avila Hi Derek! I had a question maybe you could help me answer. Lets say i’ve created an icon library, and I take an icon from it into a component. Within that component i want every icon from my library to have a strokewidth of 2 px, but in the library the icons have been applied with 1 px strokewidth.
My question is, is there a way to create the icon library so that when I take an icon component out of it and apply a new stroke width and color to that specific component, and then change that very icon component to another icon in the right panel inside figma WHILE containing the newly applied color and stroke width?
In a library i have created, it seems that some icons keep the applied changes (stroke width and color or size maybe) while some of them doesn’t? I suspect you should be able to create a library like this but I haven’t figured out how yet. This would be so nice to learn how to do.
Yes, you can do that, Only make sure that you name the vector layer the same across all icons. That way it will retain properties across your instances
You could also create variants for every icon, so that you can choose the default thickness more rapidly
@Derek_Avila Thanks, I happened to figure this out actually! This is an insanely time efficient way to create icon libraries. But now I have a new question which I don’t find too much spoken about here online.
When creating icons in figma, I stumble across a problem that if the icon contains any round elements, lets say there is a wavy element in the icon, the stroke alot of the times turn invisible. Actually, its fully possible to create a wavy element, you’ll stumble across the problem but by moving the points just a tiny tiny bit it will work out, but then when you scale the icon it will all be messed up again.
Maybe you’ve found away to get around this problem. You seem to know alot about creating icons in figma so thought i’d reach out to you! I’ll attach some images down below:
