Design System: Icons

Preparation of icons for work in the design system

Who am I and why am I writing about this?

Hello, my name is Andrey Nasonov, I’m a UI/UX designer, I work as a head of the design department in a company that creates web services and helps companies from different industries scale their business. I have been designing since 2008, I started as a graphic designer, but since 2015 I have been working as a web designer. I am interested in the development of service design, design systems design, and automation of design and business processes.

In this series of articles, I would like to share my experience in building design systems and offer some ideas for automation. In the first article, we will talk about a fairly simple but important topic – icons. Go!


Put icons in frames

Since all icons are different sizes due to their geometric features, they should all be placed in frames of the same size.

Let’s say we have three icons: 22x15px, 18x20px and 10x5px. Each one should be in a 24x24px frame.

You can’t leave icons without a frame
Always put icons in a frame

Icons must also be exported in a frame.

Important! It is the icon in the frame that needs to be exported, not the icon layer. Then place it in a 24x24px container.

Moreover, it is important to do it in this sequence, since the designer often aligns the icon from inside the frame to the visual center, and not to the geometric one. The developer often aligns the icon to the geometric center without noticing the difference.

The icon is aligned to the actual center. Indents: left and right by 10px. But due to the shape of the icon, there is a feeling that it is shifted to the left.
The icon is aligned to the visual center. Padding: left 12px, right 8px. The icon is deliberately shifted to the right to visually appear that the icon is centered

Component from frame with icon

Create a component from a frame with an icon.

Component from frame with icon

This will help you quickly replace one icon with another using the “Instance” feature.

In order for the replacement through the instance to work, the icon components must be in the same frame (more on that later).

Replacing icons with the “Instance” function

Icons are best named in English. If you have downloaded an icon and it already has a name in English, do not rename it.

So you will quickly remember the name of the icons and will be easy to find on the resources where you take them.

At the same time, learn new words in English if you have trouble with him, like me. 😄


Icon storage

Article 224, imprisonment…….. okay 😄

One project can contain icons of different sizes. For example, the standard 24x24px, 16x16px, or 20x20px for smaller elements.

We store the main 24x24px icons in the “Icons 24” artboard. The rest of the icons that are larger or smaller than 24px are stored in “Other Icons”. Usually there are not very many of them.

The “Trash Icons” artboard is needed to store different variations of icons in it. For example, you picked or drew three chat icons, selected one of them and placed it in the “Icons 24” artboard, and moved the other two versions of the icon to the “Trash Icons” artboard. In case you change your mind and want to change your choice, you won’t have to look for them again.


Background and color

To prevent unnecessary colors from being displayed in the Fill settings when selecting components with an icon, remove the white background from the component, even if it is disabled.

I also recommend immediately applying a color style to the icon, so that it would be more convenient to change the color of the icon during further work.

Removing the Background and Applying a Color Style

The color style is needed so that when replacing through an instance, you do not forget to recolor the icon in the desired color.

I advise you to choose a catchy color that you very rarely use on a project. Leaving the icon black or gray is a chance that you will forget to recolor it. I chose brown.

The bright color of the icon clearly makes it clear that after replacing it, it needs to be repainted in the desired style

Constraints

Set the layer with the constraints icon to vertical and horizontal center. This is useful in case you want to make a component of the icon smaller or larger, but without changing the size of the icon itself.

Important! Constraints need to be configured specifically for the layer with the icon, and not for the entire component.

Setting constraints

Bulk actions with icons

All the above actions can be done with several icons at once.

To select layers with an icon in all icon components at once, select all icon components and press Enter.


Garbage in icons

In the frame of the component, except for the icon, there should be nothing. Don’t forget to remove all hidden layers from the icon frame.

For example, Material Design icons have a white background layer.

As a result, the icon component should contain only one layer (the layer with the icon). But there may be exceptions, for example, two-color icons.

In the case of a single-color icon, all elements must be combined into one layer.

After you have merged the layers, don’t forget to apply “Outline Storke” to the merged shape.

Combining an icon into one layer

All this is necessary so that the icons weigh less, the SVG code is much smaller and clearer, and the developers do not have problems with recoloring the icons.

This is how the SVG code of the icon looks like when the icon component has multiple layers and they are not merged into one. The code turned out to be very long and has as many as 7 “Fill” parameters for different elements of the icon. You can’t do that.

Icon file size 1318 bytes

And this is how the SVG code of the icon looks like when all layers are merged. The code is much smaller and has only 2 “Fill” parameters. One for the background of the container, the other for the color of the icon. It is possible to do so.

Icon file size 803 bytes

After exporting the icon, you can further compress it using this site.

After compression, the icon code became even smaller, but the appearance of the icon did not change.

Icon file size 588 bytes

Resources with icons

And finally, a few resources from where you can take icons.

Material Design Icons Community
Huge icon pack that contains official Material Design icons as well as community-created icons from Material Design guides. In my opinion, this is the best set at the moment. It covers 90% of my needs.
Figma has a special plugin.

Material Design Icons
Official Material Design icons. Unfortunately, the icons on this site have rather strange tags. Because of this, some icons are unrealistic to find through the search. And the icon file contains an extra layer with a white background, which, in my opinion, is not needed.
Plugin in Figma.

Boxicons
There are good alternatives to the icons from previous resources. But not all icons are pixel perfect. There is also plugin in Figma.

Feathericon
Nice set of quality outline icons. The icons are outlined with a stroke, which allows you to scale and change the thickness of the lines of the icons themselves.
Plugin in Figma

IBM icons
Icons from IBM created by the company and the community.

Remixicon
Lots of nice Fill and Outline icons


Thanks

And if you want to know more chips – subscribe so as not to miss new articles.

Similar Posts

Leave a Reply Cancel reply