Foundations

Icons

scss:Readyfigma:Ready

Icons must be recognisable at first sight. Here you will find how LEROY MERLIN's icon kit has been made along with some design specificities to help you understand our vision.

Categories

Icons library is divided in twelve categories :

  • Navigation
  • Product
  • Service
  • Project
  • Media
  • Social
  • User
  • Store
  • Device
  • Various
  • Universe
  • Logo

Structure

1. Sizes

We have defined 5 sizes for our icons :

  • 64px
  • 48px
  • 32px
  • 24px
  • 16px

In some very particular cases a 48px can be resized to 40px. 16px icons can only be used for navigation and rating stars.

2. Thickness

LEROY MERLIN's icon are outlined. Thickness is very important in this style and must be followed. Every icon size has its guidelines in terms of thickness. Icon's thickness are divided in two categories : major thickness used to draw the outer shape of the icon and minor thickness to add a second level of details in the icon.


iconsThickness


Size Major thickness Minor thickness 
 64px 3px 2px
 48px 3px 2px
 32px 2px 1px
 24px 2px 1px
 16px 2px 1px

3. Radius

Radius is only applied to the outside of an outlined path. Rounded shapes don't respond to these following rules.

Size Radius
 64px 2px
 48px 2px
 32px 2px
 24px 1px
 16px 1px

4. Angles

Angles must be 45° multiples.

iconsAngles

Here are the possibilities :

  • 45°
  • 90°
  • 135°
  • 180°
  • 225°
  • 270°
  • 315°
  • 360°

5. Grids

The grid is a marker in the construction of the icon. It results in a consistent icon kit always using the same proportions. The grid allows the designer to design basic shapes on the same principles every time.

A specific grid has been designed for each size. The designed grids are :

  • 64px
  • 48px
  • 32px
  • 24px
  • 16px

It's important to use the correct size when using an icon in your design. For example, you can't make 200% bigger a 24px icon to have a 48px icon.

iconsGrids

5.1 Forms and shapes

The same paddings must be used around the main shape of the icon.


iconsShapesSquare

Icon sizeWidthHeight
64px46px46px
48px34px34px
32px22px22px
24px16px16px
16px10px10px



iconsShapesBigRound

Icon sizeWidthHeight
64px54px54px
48px40px40px
32px26px26px
24px20px20px
16px12px12px



iconsShapesSmallRound

Icon sizeWidthHeight
64px27px27px
48px20px20px
32px14px14px
24px10px10px
16px07px07px



iconsShapesBigLandscapeRectangle

Icon sizeWidthHeight
64px54px38px
48px40px28px
32px26px18px
24px20px12px
16px12px8px



iconsShapesBigPortraitRectangle

Icon sizeWidthHeight
64px38px54px
48px28px40px
32px18px26px
24px12px20px
16px8px12px



iconsShapesSmallLandscapeRectangle

Icon sizeWidthHeight
64px54px22px
48px40px16px
32px26px10px
24px20px8px
16px12px6px



iconsShapesSmallPortraitRectangle

Icon sizeWidthHeight
64px22px54px
48px16px40px
32px10px26px
24px8px20px
16px6px12px

Spacings

iconsSpacings

AB1B2B3
64px5px11px8px4px
48px4px8px6px3px
32px3px5px4px2px
24px2px4px2px2px
16px2px3px1px1px

Best practices

Fixed size vs. variable size

An icon must be used in its original size.

DoSize

An icon can't be used in another size.

DontSize

Geometry vs. organic

An icon is based on geometric shapes.

DoGeometry

An icon is not supposed to represent reality.

DontGeometry

Simple icon vs. complex icon

An icon must be as simple as possible.

DoGeometry

An icon shouldn't carry too many details.

DontDetails

Outlined icon vs. filled icon

An icon must be as simple as possible.

DoOutline

An icon in LEROY MERLIN's design can't be filled.

DontOutline

Opacity

An icon uses 100% opacity colors.

DoOpacity

An icon can't use an opacity under 100%.

DontOpacity

Single icon vs. drawn over

An icon is unique.

DoSingle

An icon can't be used with another element on top.

DontSingle