Icons

Icons are designed to display at their four sizes (SM, MD, LG, XL) square bounding boxes. To avoid non clear or deform of icons, avoid re-sizing them unless absolutely necessary. The icon’s bounding box size should be scaled, if applicable, to match the line height of the text element it accompanies.

Icons are designed considering a safe area in order to ensure flexibility to find the best positioning and balance in its layout; helping as well with a better scaling.

Structure

The structure has this “safe area”, or padding, which consists of a 2px minimum margin (left-right, top-bottom), depending of the share and to maintain proportions, it can get to a max of 4px. This padding helps us manage better distance between icons and other elements.

Proportions

These common proportions were used to construct the key line grid. All anchor points of a vector object should fall on a whole pixels.

Icons can be used on components, such as buttons. The size of the icon should be chosen in relation to the component size to be consistent and keep balance.

When new icons are needed, ensure they are styled to match similar icons already existing in the library, are named accurately, and they follow the proper layer naming convention. Also, use exact values for the shapes to avoid large decimals in sizing (ex. the Vector path of the icon has a dimension of 12x24px), and it should be given the default color of neutral-85.

Create the icons on each component boundary (14×14px, 18x18px, 20x20px, 22x22px), the entire vector shape should be combined into one compound pathway (if necessary) and add “Scale” to its constraints. This will allow it to be interchangeable with other icons and these ones to be scalable.

In the majority of cases, icons are used in neutral-80, although there are specific scenarios where they can be red-50 or neutral-2.