Icons are an essential component of every design system. They are little, language-independent symbols that assist us in understanding and navigating digital things. Each one serves as a simple building block for more significant, complicated components. In this tutorial, we’ll go through how to create icons, use them in Figma, and pass them off to developers.
Before we start, let’s go through the various types of icons:
- Informational icons: These icons cannot be clicked. They describe or emphasize facts that the user should be aware of. They can be used to substitute words, emphasize a design, or make it more accessible.
- Actionable icons: These icons are clickable and can be used to initiate an action. They have the ability to open, close, or navigate the user to a different destination.
Setting up icons
Before you begin developing any other components of your design system, create an organized, consistent set of icons. This expedites your process, improves the consistency of your designs, and allows you to grow your website or product.
Choose an icon library
We recommend selecting a large, well-established icon collection for most online projects. Obscure icon libraries often offer a restricted collection and no support for icon fonts. And making your own icons takes a LOT of effort and talent.
Here’s a list of well-known icon libraries that provide a big number of SVG icons, different fill/stroke states, and font capabilities. Choose the one that best represents your brand.
- Font Awesome: Website, Plugin, Font
- Feather: Website, Plugin, Font
- Bootstrap: Website, Plugin, Font
- Remix: Website, File, Font
- Material Design: Website, Plugin, Font
- Boxicons: Website, Plugin, Font
Add icons in your Figma file
Add Free Vector icons from the collection you’ve chosen as SVG files. This enables you to change the vector color and size of the icon. Add the icons by downloading them and then dragging and dropping them into your project, or by choosing them in a plugin (most recommended).
- Add downloaded icons: Drag and drop online icons into your Figma file after downloading them to your PC.
- Add icons from a Figma plugin: Install an icon plugin, open it in your file, and then drag and drop the icon(s) into it.
Customize icons
Change the size, color, and resizing behavior of the icons. This makes creating with your icons considerably faster because fewer overrides are required. It also aids in the consistency of your designs.
- Size each icon: When Free SVG icons are inserted, they will show as a square frame with a vector within. Resize every frame to match the scale of your default icon. Select a preset icon size that is scalable by 4 or 8 so that your icons line with your support frame (e.g. 16×16, 20×20, 24×24).
Every frame should have some internal cushioning on both sides (e.g. 2px). This guarantees that all icons, regardless of form, seem consistently sized and spaced. The same reasoning applies to varying the amount provided around various types of characters.
- Style each icon: To fit your identity, change the fill color of each icon graphic. For example, change all of your icons from black to your standard grey look. Also, change the default color of stateful icons to “active” (e.g. radio buttons and checkboxes).
- Set the resizing behavior: Every icon vector should have its constraints set to “scale/scale” so that it expands and contracts in step with the dimensions of its frame. In this manner, each icon’s size may be adjusted while maintaining the ideal balance between padding and size.
Turn into Main components
Make each icon a primary component so that you may utilize it across your projects. This makes it easy to search, add, and switch icons. It also significantly speeds up mass icon changes. For example, altering the color of an icon. Rather than searching for every icon in your designs, edit the one major component.
- Place all of the icons in an “Icon” frame. This helps to organize your file. It also provides the same nesting structure to the Asset Panel as putting “Icon/” at the start of every name.
- Give each icon a name (e.g. “Close”). For icon categories, use the forward slash (“/”) naming convention (e.g., “Format/Bold”, “Format/Italic”).
- Select all of the icons and then, in the toolbar, select “make multiple components.”
Using icons
After you’ve created your icons, you’re ready to start using them in your designs. They can be utilized as standalone elements or as nested elements inside bigger components.
Add & swap icon instances
Instances are copies of their primary components. They may be accessed and added via the Asset Panel, and they can be switched out in a variety of ways.
- Add icon instance: In the Asset Panel, look for the desired icon. Drag and drop an object of it into your designs from here.
- Swap icon: While holding the “option” key, drag and drop your new icon over the current icon. Any style/size changes made to the original icon will be preserved.
- Swap nested icon: Select the layered icon, then in the Instance Menu, select a new icon. Any style/size changes made to the original icon are retained.
- Swap variant icon: Choose a different value of the property to change the type or condition of the icon.
Apply overrides
Customize the size and color of icon instances to make them your own. These overrides have no effect on the main component and only impact the instance. To apply overrides, change the icon’s size or pick the icon vector and change the fill color.
Developer handoff
When it comes time to give off the designs, developers may check and export icons from the Figma file as needed. Provide the icon assets ahead of time to make things much easier for them. This may be accomplished by exporting all of the icons, making a sprite sheet, or employing an icon font (most recommended).
Export icons
Export icons as SVG, PNG, or JPEG files. To export them, pick each of their frames in the Design Panel and click the “+” symbol next to “Export.” Then, pick your chosen format and “Export X layers.” Select the “+” sign many times to export various formats at once.
- SVG is a vector graphic format that is based on XML. It enables exports to have a translucent backdrop and to scale up and down without losing quality. SVGs are the finest solution for the web since they can also be expressed in scripts or code.
- PNG format is a lossless graphics format. It enables the output to have a translucent backdrop while keeping the quality excellent when compressed. This is the second best option for the web.
- JPEG is a lossy picture compression format. It cannot have a translucent backdrop, and its measurements are fixed, resulting in lesser quality. As a result, it is not suggested for use on the web.
Spritesheet
If you want to use several icons without an icon font, use an icon sprite sheet. A sprite sheet is a single picture that contains all of the icons that are currently in use with particular X and Y coordinates. These coordinates are then utilized to show the appropriate icon in the appropriate location.
Icon font
The most suggested approach to utilize icons is to use an icon font. They make use of the current browser’s typographic representation capabilities. This enables developers to include icons in their applications with only a few lines of code. It is less difficult, takes up less room, and looks fantastic. Look for an icon library that has a supported icon font when selecting one.
Final Thoughts:
This enables you to change the vector color and size of the icon. Add icons from a Figma plugin: Install an icon plugin, open it in your file, and then drag and drop the icon into it. Customize them Change the size, color, and resizing behavior of the icons. Style each icon: To fit your identity, change the fill color of each icon graphic. Place all of the icons in an “Icon” frame. Select all of the icons and then, in the toolbar, select “make multiple components”. Swap variant icon: Choose a different value of the property to change the type or condition of the icon. Apply overrides Customize the size and color of icon instances to make them your own. This may be accomplished by exporting all of the icons, making a sprite sheet, or employing an icon font. Icon font The most suggested approach to utilize icons is to use an icon font.
