4 Ways to Add Icons from Figma to Your Website

Let’s talk about how to add icons to a website from Figma.

Checking the HTML layouts created by layout artists and developers, I often encounter issues with adding icons to a website, which can result in an awkward appearance. Icons are sometimes added as PNG images or replaced with similar ones from Font Awesome. Trust me, navigating this situation can be quite challenging.

In this regard, I would like to make sense of it and share, in sufficient detail, how best to add icons to your website from the Figma layout.

There are plenty of ways, and the choice of a specific method depends on the project itself and the designer who is responsible for the layout.

This is what we are going to talk about!

Method #1: Export the Icons to an SVG Format and Embed Them Either As Code, as an Image or as a CSS Property

For this, we select the icon in Figma and click on export to SVG format, save it to our project, and paste it into our website:

<!-- throught img tag -->
<img src="image/icons/icons-refresh.svg" alt="">

<!-- svg code -->
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="m 421.316,734.84 c -325.7222,0 -421.31990625,100.48 -421.31990625,379.19 v 346.8 c 0,278.74 95.59770625,379.22 421.31990625,379.22 H 1192.67 V 1630.99 H 421.316 c -142.597,0 -176.632,-42.15 -176.632,-170.16 v -74.55 H 1186.21 V 1190.21 H 244.684 v -77.78 c 0,-132.899 32.421,-168.539 176.632,-168.539 H 1192.67 V 734.84 H 421.316" fill="white"/>
</svg>

<!-- css -->
<span class="icons-refresh"></span>

<style>
    .icon-refresh {
        display: inline-block;
        position: relative;
        height: 16px;
        width: 16px;
        background-position: center;
        background-size: 100%;
        background-image: url('image/icons-refresh.svg');
        background-repeat: no-repeat;
    }
</style>

This option is obvious, simple, and works well enough.

However, there are 2 very unpleasant problems with this method

• The first problem is that if we use svg code, the code itself becomes quite large since the icon can be very complex in terms of colors and the number of vectors inside.

• The second problem is that if we connect the icon in this way, it becomes problematic for us to change its color through CSS or even JS. We will have to export a duplicate icon with a different color. As for the object tag, the link will not work properly at all if we wrap it in the <a> tag.

There is another small drawback: we cannot set the icon size through the font-size property (i.e. we do not inherit the font size). Thus, you have to waste your time on setting width and height.

Perhaps the only benefit is that the option is quite simple and saves a little time for small projects.

Therefore, this option is suitable when there are not many icons in the layout (i.e. a maximum of 3-5 pieces) and their colors do not change anywhere (for example, on hover or in a layout theme).

Method #2: Create 1 file with all the icons.

This can also be referred to as Icon texture.

This option also involves exporting icons to svg or png format but in one file, where all the icons will be of the same size. This is a rather old method, but you need to know about it. I know for sure that VKontakte used this method for a very long time. After the redesign, they abandoned this method in favor of SVG + JS.

For example, social media icons:

Writing the code for the Facebook and Instagram icons:

<span class="icons icons_facebook"></span>
<span class="icons icons_instagram"></span>

<style>
    .icons {
        display: inline-block;
        position: relative;
        width: 42px;
        height: 42px;
        background-image: url('imgs/socials-pack.svg');
        background-size: 290px;
        background-repeat: no-repeat;
    }

    .icons_instagram {
        background-position: 240px 0;
    }
</style>

Here, we also have 2 problems:

• First, it can take a long time for us to prepare the CSS properties.

• The second problem is that it is also very problematic to change colors. You will have to export as many duplicate icons as you need colors.

However, there is 1 nice benefit. We get small HTML code since we use only one class to add an icon.

The option should be used with caution, taking into account the specifics of the project; for example, if we want to make a plugin with emoticons for a chat). In other situations, you need to use other options.

Method #3: Use a ready-made icon service.

Here you need to ask your designer where the icons are taken from.

Let’s make a brief excursion away from the main topic: you should always ask your designer about what icons you need, where the images come from, where to get the font, etc. It often happens that icons are taken from some service that allows you to add icons through styles or scripts.

In Figma, designers often use the Iconify service. Also, some designers use icons that can be exported directly to the website, for example, EvaIcons. An example of exporting from Iconify:

<script src="https://code.iconify.design/2/2.1.1/iconify.min.js"></script>
<span class="iconify" data-icon="ci:refresh-01"></span>

Here I’m going to start with the pros:

• firstly, we can easily and quickly add all the icons to the website;
• secondly, it is easy to change the color of the icon by using the color property in CSS;
• thirdly, the size of the icon is inherited from the font and we can change it by using the font-size property;
• and in general, our html code looks neat, the icons occupy 1 line.

Perhaps the only drawback is that we connect a third-party service/library, which causes a lot of extra code. However, it’s the little things, especially if the project is on a deadline. This option should be used if there are more than 5 icons in the layout and their colors do not change anywhere.

Method #4: Turn all the icons into an icon font

In this case, you’re out of luck since the designer used icons that cannot be exported directly to the website (what a bad man).

What we do:

• we export all icons to svg format (it would be better if they were all black, written in the Latin script without any symbols or the word “icon”);
• we send them to the icomoon service (to save a lot of time). Your icons must be filled. The service does not work with strokes, and it will warn you if some icon is stroked;
• we generate an icon font and get a ready-made CSS file and a thumbnail with icons.

Our code:

<link rel="stylesheet" href="fonts/icomoon/style.css">

<i class="icons-refresh"></i>

<button class="button">Button with icon</button>

<style>
    .button:before {
        font-family: 'icomoon', sans-serif;
        content: '\e90a';
    }
</style>

I would like to highlight the following pros:

• the ability to easily change the color by using the CSS color property;
• the ability to set the size of the icon by using the font size (i.e. the icon inherits the font size);
• a small html code since we only use 1 small class to add the icon;
• simple icon support (to easily add and remove icons from our arsenal);
• we save space by having only those icons and code that we need (as opposed to using a ready-made solution, where there may be more than a hundred icons).

The cons are:

• we spend a little more time preparing the icon font;
• it is important for us to ensure that the icons are filled rather than stroked.

This option is suitable when there are a lot of icons in the layout and their colors can change.

Conclusion

My dear friends! Believe me, all this is enough for you to learn how to correctly add any icons to any website. After all, the html layout must match the layout in Figma, while maintaining performance and code quality.