Building a modular icon system for Talend
Talend offers various data processing and data management software and services.
I worked closely with the design system team to build a new icon library. My goal was also to give the designers the tools to enrich this library in the future.
Overview
Icon design and process
2022
Done remotely from Stockholm
Why a new library?
Need for consistency
The icons in the actual library are not consistent in their styles (radius, stroke...).
It doesn't seem they belong to the same product.
Better sizing handling
Today, all the icons are designed in 24px and are then resized in 6, 8, 12, 14, 16, 20, 24 or 32px.
It makes it impossible to keep designs consistent if we resize the icons on the go.
A 24px icon doesn't always work in 8px.
No guidelines on how to size icons.
Responsiveness
By having multiple sizes of the same icon, we can introduce responsiveness. We can detail icons more or less depending on their size. But they should all look like they're from the same library!
First designs and process
We defined the first set of basic rules to follow. Each icon should: only use one colour, be available in 12, 16 and 24 pixels, and be pixel-perfect.
At first, my idea was to offer a fully designed library and a set of rules to follow. This way, you would be able to make this library grow while keeping it consistent.
For the first batch, I chose randomly a list of 4 icons and designed them while keeping their style consistent. I then documented these choices.
For the next ones, my process looked like this:
Create a simple shape (square, circle, triangle...)
Check out the specs (radius, border, size...)
Apply the specs to my shape
Create another basic shape (triangle, line) and look at the specs
Use the pathfinder for excluding/merging
Repeat until it's done!
The first batch of icons, where I defined the style.
“We're not just creating icons. We're creating a language that will be used throughout all the Talend products.”
What if we could pre-create those shapes, and make them follow some basic rules we want to apply?
Building with Atoms
Atoms are basic shapes that follow the design specifications. The goal was to remove the step where the designers would have to peek at the guidelines each time they designed a basic shape inside an icon.
For each family of atoms, I created a specific guide on how to use them.
Icon library
Here is a selection of the icons we came up with thanks to the atoms.
A lot of positive outputs
Consistency ++
By having pre-made shapes everything is more consistent.
Size perfect
We have three sizes of icons; each size has specific needs to be legible and follow our design rules. We can apply those rules directly to the atom-shape
Grows with you
If we decide to increase all the radius or change all the strokes to 1px. We have to change the atoms shapes, and it'll be directly applied to ALL the libraries. This system evolves with you.
Less time wasted
Less time is wasted drawing basic shapes and more time thinking about the actual design.
Supercharge the export process
Designing icons is only a part of the complete process of updating an entire library.
As many designers know, there is a crucial step before exporting icons where they will need to merge shapes in order to have only a one-colour shape at the end.
This process is long, and well, not interesting.
So, the amazing Talend Design System team came up with a way to process the icons inside a Figma plugin that does all the work flawlessly!