August 24th, 2020 by Julija Popovic
Before diving into Figma icons and all of the options available, let’s first discuss the role icons play in design. Users often take things for granted in digital design. Few of them can understand and appreciate the amount of thinking and decisions that go into a design.
After all, if everything works and looks pretty, why give it a second thought?
The truth is, we really should. As with many things, digital design is all about various smaller bits being in harmony. All elements have their function and a role they play. Icons are no different.
But, what are they? Let’s first clear up the idea. The beginning is a very good place to start, isn’t it?
Icons are pretty much all over the virtual space. You come across some in most interfaces. If not all of them. We could have a long-winded definition, but simpler is always better.
In a nutshell, icons are images. They have symbolic meaning. They represent an action, thing or person. It can refer to both real life and virtual spaces. The symbolism of icons is a kind of shorthand.
So, we can say icons are abbreviations for words, commands or objects. That’s as close to a strict definition as we should get.
Icons convey meaning without words. That’s one of their most important characteristics. They transcend language. And that’s the first rule of designing icons. People need to understand them regardless of the language they speak or the scripts they write with.
Icons are universal. Their meaning is unambiguous, at least in the majority of cases. And that’s how it ought to be. Icons represent actions or elements of a program. They are the point of interaction between the user and the interface.
That’s why icons need to be clear about their meaning. After all, they’re the part of the interface design that “talks” with humans.
But how do the icons communicate? It’s all about symbolism. You might say there are conventions about icon design. There are some icons that designers shouldn’t tamper with. Some of them include the power icon, the play/pause icon and the stop icon. They’re just too ingrained in our collective subconscious.
Is this to say you shouldn’t explore other designs? By no means. But, you should be sensitive to the average user. Think about it this way: you know what the icon does, the user might not. People aren’t mind readers.
Designing functional icons is a process. It takes consideration and effort. It’s always the case with little things that seem the simplest. They have a way of sneaking up on designers. And they can make or break the entire design.
Icons need to match the other elements of the project. They also need to be understandable to the user. It’s a difficult balance to strike. Even more so for bold and singular designs. It’s a territory you must tread with care.
Let’s say you’re designing a clothing website. It sells funky, eclectic vintage clothes. So, the client wants the website to reflect that. But, you have to be careful not to make the interface feel cluttered.
The icons need to work with the overall vibe of the project. This means they mustn’t clash with the other elements. You have to make them universally understandable.
So, icons are what connect the program and the user. Let’s now see which icons people are using most for Figma!
Fortunately, you can load up any SVG icons into Figma by dragging and dropping, making them easy to edit and customize. Like we’ve said before, they’re all about versatility. A lot goes into fitting icons into project. Designers often have their hands full with it. We’ll list a few of the best icon designs below.
First off, there is a free set of 20 Figma icons. Andrey Vdovin designed it and it’s your basic essential kit. It has icons that you use pretty much every day in many different apps. They’re flat design icons. They’re also rounded, with soft edges and few spikes. They are as reassuring and unthreatening as they come.
You can find them here.
Next, we have another free icon set. It’s called Evericons, and with good reason. Aleksey Popov designed this veritable behemoth, containing 460 icons. As you can tell, you can find all kinds of nifty icons for almost every design need.
Download it here and unleash your creativity.
The next icon set is another very large one. It’s called the Icon of, and it has more than a thousand different icons and styles. Majo Puterka designed it with the idea of creating an icon set that would fit all design needs.
The icons in this set are quite various. They have clean lines that enhance other design elements. Beside your basic everyday icons, there are a lot of other, more unusual ones. After all, one can expect that from a set this large.
However, there is a drawback. This icon set isn’t free to download. You can find it and buy it at this address.
Feather icons is another great Figma icon set. The icons are set on a 24×24 grid. Feather is an open source set of icons. Cole Bemis first designed it. Mauricio Quezada adapted it as a component resource for Figma.
First of all, the icons in this set are simple. That has been the number one priority since their inception. They offer simplicity and elegance. The shapes of the icons are graceful and consistent. They are optimised for readability.
This makes them a great choice for all kinds of projects. They can fit almost any aesthetic. You can find the Feather icons set here.
The next few icon sets are all part of the same family. We’ll analyse each in turn.
Google Material icons are ubiquitous nowadays. It’s easy to see why. You can use them for representing all kinds of essential actions.
However, the outline icons are just that. Simple outline designs that can fit anywhere. They’re free, but carefully crafted and professional looking. They’re a great choice for project that need a simple, no-fuss approach.
So, you can find them here.
Next, we have the Material Icons Fill set. The icons in it are quite similar to the outline set. But, they’re a bit more heavy-looking. It’s understandable considering they have more “flesh” to them.
This doesn’t mean they’re illegible or messy, though. Quite the contrary. They’re focused on simplicity as much as the outline set. But, they might be a better choice if you’re looking to grab attention more firmly.
You can use them for digital products for Android, iOS and web. Find them here.
The third icon set in this family is the Duotone. Like the Fill set, Duotone is more robust than the outline. You can say it’s the most robust of the three. It certainly makes the biggest splash.
But, it’s far from gaudy. It’s just loud enough to make its presence known. The outline of the icons is filled in but in two different tones, hence the name.
Like the other sets in this family, it’s available for Android, iOS and web based design projects. You can find this set here.
Creative Things 2.0 icon set is another versatile tool. Kyle Adams designed 48 icons. They come in three styles. The total number of icons makes 144.
In addition, the icons are pleasant to look at. They’re rounded, with very few edges. They’re also flexible and easy to customise which is a great feature.
The icon set includes a custom web font as an added bonus. You can find it here.
Font awesome is a set of scalable vector icons. This means they can adapt to any size you need in a design. It also works well with many different wireframes.
It’s a set of hundreds of different icons that you can use for virtually anything. The icons it offers can fit anywhere. You can experiment and test out your ideas in however you please.
Find the unofficial Figma plugin here>
The Glass style Figma icons set is somewhat different than the others on this list. It’s not an entirely flat design, as the others. It’s a bit more skeuomorphic in its appearance.
Alex Martinov designed this funky icon set. It’s a great choice if your design is mostly subdued and simple. These icons can really pop and grab the users’ attention.
You can find the icon set here.
Now we’ve seen how important icons are. They’re one of the elements that no project can go without. Choosing the right style often requires much thought and care.
Icons are what allow the user to communicate with the interface of a program. So, they must be clear and user-friendly. But, it’s not all about utility. Aesthetics play a great part in the overall experience.
Any of the icon sets listed above would be a good choice. It’s up to you as a designer to pick the one that best suits your taste and needs.