Icons are a foundational part of any design system. They're tiny, language-independent, symbols that help us understand and navigate digital products. Each one acts as a small building block to create bigger, more complex components. In this article, we'll go over how to set up your icons, use them in designs, and hand them off for development.
Before we get started, let's go over the different types of icons.
Actionable icons: These icons are clickable and can trigger an action. They can open something, close something, or navigate the user to a new location.
Informational icons: These icons are not clickable. They describe or highlight information the user needs to know. They can replace text, add emphasis, or make a design more accessible.
Create an organized, consistent set of icons before you start designing any other components in your design system. This speeds up your workflow, makes your designs more consistent, and enables you to scale your website or product.
For most web projects, we recommend using a large, established icon library. Obscure icon libraries usually have a limited selection with no icon font support. And creating your own custom icons takes a LOT of time and skill to get right.
Here's a collection of established icon libraries with a large selection of SVG icons, multiple fill/stroke states, and font support. Choose one that best matches your brand.
Add icons from the library you've selected as SVG files. This allows you to edit the icon's vector color and size. Add the icons by downloading then dragging and dropping them into your file, or by selecting them in a plugin (most recommended).
Download icons from the web onto your computer, then drag and drop them into your Figma file.
Install an icon plugin, open the plugin in your file, then drag and drop the icon(s) into your file.
Customize icon size, color, and resizing behavior. This makes designing with your icons much faster because fewer overrides need to be made while designing. It also helps keep your designs consistent.
Once added, SVG icons will appear as a square frame with a vector inside. Resize each frame to match your default icon size. Choose a default icon size that is divisible by 4 or 8 so your icons will align with your base unit (e.g. 16x16, 20x20, 24x24).
Each frame should contain a small amount of internal padding on all sides (e.g. 2px). This ensures all icons appear evenly sized/spaced despite being different shapes. The same logic applies to adding more or less kerning around different type characters.
Customize the fill color of every icon vector to match your branding. For example, update every icon from black to your default gray style. Also, update stateful icons to show their "active" color by default (e.g. radio buttons and checkboxes).
Set the constraints for every icon vector to "scale/scale" so it grows and shrinks along with the size of its frame. This way each icon can change size and maintain the perfect ratio between size and padding.
Turn every icon into a main component to use instances of them across your designs. This makes finding, adding, and swapping icons easier. It also makes bulk updates to your icons MUCH faster. For example, changing an icon's color. Edit the one main component rather than hunting down every icon in your designs.
Once your icons have been set up you're ready to start using instances of them in your designs. They can be used as singular elements or nested inside larger components.
Instances are a copy of their main components. They can be found and added from the Asset Panel and swapped out in a number of different ways.
Find the desired icon in the Asset Panel. From here, drag and drop an instance of it into your designs.
Drag and drop the new icon over the original icon while holding the "option" key. Any style/size overrides to the original icon will persist.
Select the nested icon, then choose a new icon in the Instance Menu. Any style/size overrides to the original icon persist.
Select the icon and update its type or state by choosing a different property value.
Customize icon instances by applying size and color overrides. These overrides only affect the instance and do not update the main component. To apply overrides, edit the size of the icon or select the icon vector and choose a new fill color.
Use icons as atoms and nest them inside of other, more complex components. For example, nest an arrow icon inside of a button.
When it's time to handoff the designs, developers can inspect and export icons as needed from the Figma file. To make things even easier for them prepare the icon assets in advance. This can be done by exporting all the icons, creating a spritesheet, or using an icon font (most recommended).
Export icons as an SVG, PNG, or JPEG. To export icons, select each of their frames and click the "+" symbol next to "Export" in the Design Panel. Then choose your preferred format and select "Export X layers". Select the "+" symbol multiple times to export multiple different formats at once.
SVG is an XML-based vector graphic. It allows exports to have a transparent background and scale up/down without any loss of quality. SVGs can also be represented in scripts or code, making them the best choice for the web.
PNG is a lossless bitmap format. It allows the export to have a transparent background and maintain high quality when compressed. This is the next best choice for the web.
JPEG is a lossy compression of an image. It cannot have a transparent background and its dimensions are fixed making the quality lower. For this reason, it is not recommended for the web.
Use an icon spritesheet if using multiple icons without an icon font for faster loading time. A spritesheet is a single image that includes all the icons in use with specific X and Y positions. These positions are then used to display the correct icon in the correct place.
Using an icon font is the most recommended way to use icons. They take advantage of the typographic rendering capabilities of modern browsers. This allows developers to incorporate icons with only a few lines of code. It is easier, takes up less space, and looks great. When choosing an icon library, look for one with a supported icon font (see list above).
Now it's your turn. Check out our Figma Freebies for hands-on learning. Each one uses all the icon best practices described above. Practice customizing, overriding, nesting, and swapping the icons.