Icons

Types of Icons

It is important to understand the different types of icons we can use in our UI.

Fill and Outline

We can use fill and outline icons to represent a selected or unselected tab. A really good article that explains a little bit more in-depth about the usage of this type of icons.

Size

Icons should be properly sized as a lot of icons act as buttons, specially for smaller devices where menu items are often just icons. As a designer, you've to make sure that the icons is big enough to be easily touched by a finger. The accessibility guidelines in Material Design recommends a width and a height of 48dp. You can add spacing between multiple items to avoid incorrect taps by the user.

Text labels

Labels help users understand the icon's purpose, specially when the icons are not being used in a standard manner.

Universal Icons

It's best to use icons that are common for the majority of the people, such as the search icon or the home icon. Icons that are familiar to the user regarding language or customs. These type of icons are less ambiguous and helpful for localization.

Familiarity

All users might not be familiar with icons, this is why you should always ensure that an icon alone is clear enough before replacing the text with it completely.

Icon Libraries

Some times designing your own icons is time consuming. Fortunately, there are many beautiful libraries, both free and paid that provide icons for use.

Streamline Icons

Streamline icons, made by Vincent Le Moign contains 30,000 icons. It is truly a very slick and beautiful icon library. You can access the library through its web app.

Shape

Shape is an icon as well as an illustration library. It contains over 26,000 assets in total and provides you with the ability to customize the same according to your preferences. This includes being able to edit the size, stroke width as well as the color.

Pixellove

Pixellove is another popular icon library that provides six different styles. They provide free icons as well as paid ones. Furthermore, the icons are perfectly aligned with iOS and Android specification.

The Noun Project

The Noun project is a massive icon library. It contains over 2 million icons which can be customized if you're a member. The annual membership plans include plans for individuals, teams as well as students. They also provide a free plan. All the icons are provided by contributors and you can become one as well.

Nucleo

Nucleo is an icon organizer and icon library with more than 30,600 icons. You can customize the icons in their app before exporting.

Feather Icons

Feather icons is a simply and beautiful icon library, it is open source and has more than 280 icons. You can change the size of the icon, the stroke width and the color directly from their web app.

Heroicons

Heroicons is an icon library created by Tailwind CSS. All the available icons are free and can be downloaded via their website.

SF Symbols

Apple provides a big library of configurable icons. SF Symbols are highly adaptable and can be configured to a number of weights and sizes. To use these, make sure that you've the SF Symbols app and font installed on your mac.

Material Icons

Material Icons can be used in your iOS apps, Android apps or the web. The library is open-source, so go crazy with it.

Working with variants for your icon set

In Figma, you will find different features that can help you speed up your process. Variants is one of those. For this exercise, I will show you how to set a collection of icons with different variations. We will set 4 types of icons; dark mode, light mode, icon with oval and icon without oval

We have already set two columns of icons. The first column is for dark mode and the second for light mode. Also, each of the icons are named in this way: icon/NAME. For example: icon/profile.

In case you want to follow this exercise with your own icons you should organize them in the same way.

Now, select all the 16 icons and create multiple components by clicking on the diamond cross icon from the tool bar, and selecting Create Multiple Components.

Once we create the multiple components, click on the Combine as Variants button from the sidebar, so we can create some variants.

Once you click on Combine as Variants, change the name of Property 1 to icon because we want to define all the elements as icons.

Now, let's click on the dots icon and select Add New Property. This will help us separate the icons between Dark and Light mode.

Re-name the new property to Mode. Inside Mode, we need to create two different values: Light and Dark.

Underneath Mode, you will see a new value called Default. Change Default to Dark. With this, all our icons have the Dark value but we need to separate them between Dark and Light.

To separate them between Dark and Light, select all the icons from the Light column, then click on the Dark dropdown and select Add New. Name the new value Light.

Let's test one of the icons. I will drag the profile icon outside the variant frame (this new icon is called instance). When we click on the Mode dropdown, you will be able to select between Dark or Light mode. But we can make this even fancier, we can change the dropdown to a toggle button.

In order to create a toggle button for our Mode property, select the variant frame. Then on the side bar, in Mode, change the Dark value to False and Light to True.

Now, if we try again our icon, you will notice that we have a toggle button that can change our icon from Light to Dark mode.

Now that we have the icons ready, let's copy one of them. Drag this instance to each one of the four frames that we have on the left side. As you will notice each one of the frames have specific names. So make sure to change the mode of the icon according to its respective name.

Select the four frames and create multiple components of them and also variants. Re-name each of the properties. Change Property 1 to Mode, Property 2 to Circle and Property 3 to Type of Icon.

Then, we can also add the toggle button for the Mode property and the Circle property, just by changing any of their values to false and the other to true. If we create an instance you will notice that we have the toggle buttons.

Now, add a new text. Set the font to SF Pro Text, font-size to 15 pt, and the line height of 130. Add an instance next to it. For the new text, I will write Profile.

I will group the instance with the text and drag it to the menu that we prepared. The menu is already setup with Auto-layout, so it will increase its size automatically.

Draw a line that will act as separators. Set its width to 180, height to 0.5 on height, and color to white. Make 8 more copies of the new group and place them one after another.

Change each one of the icons and the texts to their respective names.

Now that we have all the icons and names in place, we can copy them and drag them to the light mode menu.

As you may notice, working with variants and components is very simple. It can speed up our workflow. For example, if we want to change the icons to circle icons, we can do it in matter of seconds.

Conclusion

Using icons in your interfaces provides a greater sense of clarity, brevity as well as personality. The important thing to keep in mind here is that the icons aren't ambiguous and are easy to understand.