We have divided this page in two different sections depending on what your profile is. If you're a designer working on Mozaic just go down in this section. If you're a designer using Mozaic for your work please read the following lines.

I'm a designer using mozaic

Before wanting to add a new icon you should ask yourself if that's a real need or just a desire. Our icons must be easy to understand and have a real meaning. That is why we encourage you to ask yourself this question: Does my user need this icon ? When this question is solved you should know a few things about our process. Every icon produced for Mozaic by yourself or our designers in charge will have to answer these foundations and will be reviewed by our team.

Now that you know you need this new icon please get in touch with Mozaic's design team. As far as tools are concerned we work with Adobe Illustrator and Sketch to do the whole process.

I'm a designer working on Mozaic

First of all, each icon must be reviewed by the designer(s) in charge of the quality and the consistency of the icons at LEROY MERLIN. Second of all, each new icon must be declined in the following sizes: 24px, 32px, 48px & 64px. Here are the steps that you must follow to add new icons in Mozaic.

We would like to advise you to read this documentation about icons design principles before getting in touch with Mozaic to add new icons in the design kit. This will definitely help you to understand our vision when it comes to icons and it will make the process way easier for both parties.

1. Get in touch with Mozaic's team

It's important to discuss your needs and what can be produced together before starting to create the preivously mentioned icon. Our icon designers are available on Slack (#mozaic-support). Get in touch with them to speak about format and sizes of your icon(s). You can also reach Mozaic's team on different channels.

2. Icon design phase

This is the point where the icon is designed either by you or our design team.

3. New branch on GitHub

You must create a branch to be able to push your work in Mozaic's design system repository. We advise you to name it feat-YYWW-icons (feat-1949-icons) to follow our branch naming guidelines.

4. Place your icon(s) in Mozaic's repository

You should replace the entire Icons directory inside the mozaic-design-system repository in the src/icons/ directory.Any changes in the icon names or directory structure may cause bugs in production.
Be sure to have the latest curated and cleaned icon directory, and add the icon you desire to update.

5. We've built a script for you to search for potential errors

This script will locate errors so you can fix them the easiest way possible. Please type the following lines in your terminal:

• cd FolderName/GitHub/mozaic-design-system
• yarn lerna (more informations can be found here if it's your first time)
• yarn icons:build

Please check for this kind of error in your terminal.

Keep in mind that the script cannot detect all errors, and you need to check that icons are respecting the following rules :

Icon validation rules

Size rules

• It should be placed in the directory related to his size : 32px/....svg.
• The file name should finish with an underscore, followed by the size : _32px.
• The SVG file should contain a viewbox attribute that equal the icon size : viewbox="0 0 32 32".

Category name rules

• The icon file name should start with a category name followed by an underscore : Category_(...).svg.
• The category should start with a capital letter.
• The category should not contain underscore and be only one word : CategoryName, Category-name and Category_name are not allowed.

Name rules

• The name should start with a capital letter (A-Z).
• The name should not start with a number : 360 is forbiden.
• The name can contain underscores and dashes : Icon-Name_with--Dashes.

Vectors and structure rules

• The icon should be built with two layers nammed Square and Icon (The Square layer will be removed by our optimisation script).
• The Square layer contain a rectangle with the exact corresponding width and height of the icon (ex: 32px).
• The Icon layer should contain flattened vectorial paths and shapes with no strokes.
• For monochrom icons, there should be only one color in the Icon layer.

Export rules :

• Do not optimize the vector paths when exporting, our script will do it for you.

Directory structure :

In src/icons :

6. Solve potential errors

Mozaic's repository will be locally stored in your computer usually under the folder GitHub. This is where you can solve the potential errors directly in this folder.

7. Please do a final visual check on the style guide

With the following terminal command you will be able to build a local version of the style guide that visually looks like the online website. That will allow you to do a final visual check on this built style guide to make sure that everything looks right.

Type this in your terminal:

• yarn develop

After the process is done go to Foundations/Icons/Preview on the built styleguide.

For example, if you have done a naming typo like Various_Blower-_32px.svg instead of Various_Blower_32px.svg it will duplicate your icon in this page and will look like the following image.

8. Commit and push your branch

To be available, your branch needs to have a commit and be pushed. Please read our commit guidelines for more efficiency.

9. Make a pull request

To finish the process and make the whole Mozaic team review your work, you need to make a pull request with the following labels :

• scope: pattern
• feat
• skill:design

For example, this pull request can be named: feat(pattern/icons): add week 49 icons.

Feel free to read this page if you need more informations.