Add new icons
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.
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.
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:
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.
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.
This is the point where the icon is designed either by you or our design team.
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.
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.
This script will locate errors so you can fix them the easiest way possible. Please type the following lines in your terminal:
yarn lerna(more informations can be found here if it's your first time)
Please check for this kind of error in your terminal.
✗ ERROR : in MediaFullScreen_32 px.svg : icon file name should start with a category name separated by _ with the icon name✗ ERROR : in MediaFullScreen_32 px.svg : icon file name should not contain spaces✗ ERROR : in MediaFullScreen_32 px.svg : icon file name should always end with _[size]px.svg✗ ERROR : in MediaFullScreen_32 px.svg : found in /16px/ directory. Icon file name is either wrong or the icon is in the wrong directory
Keep in mind that the script cannot detect all errors, and you need to check that icons are respecting the following rules :
- It should be placed in the directory related to his size :
- The file name should finish with an underscore, followed by the size :
- The SVG file should contain a
viewboxattribute that equal the icon size :
viewbox="0 0 32 32".
- The icon file name should start with a category name followed by an underscore :
- The category should start with a capital letter.
- The category should not contain underscore and be only one word :
Category_nameare not allowed.
- The name should start with a capital letter (A-Z).
- The name should not start with a number :
- The name can contain underscores and dashes :
- The icon should be built with two layers nammed
Icon(The Square layer will be removed by our optimisation script).
Squarelayer contain a rectangle with the exact corresponding width and height of the icon (ex:
Iconlayer should contain flattened vectorial paths and shapes with no strokes.
- For monochrom icons, there should be only one color in the
- Do not optimize the vector paths when exporting, our script will do it for you.
In src/icons :
COLORS/├── PDF/│ ├── 24px/│ │ ├── Category_name_24px.pdf│ │ └── ...│ └── ...└── SVG/│ ├── 24px/│ │ ├── Category_name_24px.svg│ │ └── ...│ └── ...PDF/├── 16px/│ ├── Category_name_16px.pdf│ └── ...└── ...SVG/├── 16px/│ ├── Category_name_16px.svg│ └── ...└── ...
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.
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:
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.
To be available, your branch needs to have a commit and be pushed. Please read our commit guidelines for more efficiency.
To finish the process and make the whole Mozaic team review your work, you need to make a pull request with the following labels :
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.