Library
Copy/paste icons from the library
With the link below you can access the icons that are available to illustrate your KPI and blocks, find the right one and copy/ paste the code.
File location
Location: where to find the assets
You will, find the folder following this oneDrive path:
UX & Design Team Storage - Documents/00-STORAGE/06-UI/DESIGN-SYSTEM/Icons
There are the Illustrator files separated by usage and size. Please update those AI files accordingly. Read the following specifications.
File naming
File naming: stick to the structure
Icons must be named with the following structure: ic-name-size.
Somes exemples: ic-arrow-24, ic-info-encircled-48, sn-instagram-24, kpi-alcohol-dispenser-hand-48, id-imd-logo-minimal-color, etc
ic, sn, id, kpi, etc…
2 or 3 letters that indicates the type of visual: ic stands for interface icons, sn for social networks, kpi for the KPI visuals.
name
Icons should be named based on what they show, not what they represent. For instance, a stopwatch icon should be named stopwatch, not speed. A lightbulb should be called lightbulb, not idea. You want to make instantly clear to people what the icon is, not what it communicates on a more conceptual level. Shorter names are better, too. When you need multiple words, use a dash to separate them. Also you need to specify if the icon is into a shape (ex: ic-info-encircled-48).
size
Indicates the grid size of the icon in pixels: 24, 48 or none
Grid
Grid: the starting point
Icons are drawn on a pixel-based grid of 24x24px or 48x48px. Create icons for viewing at 100% scale for pixel-perfect accuracy. Some custom grids might be used for exceptional use.
Keyshapes
Keyshapes: the key of consistency
Key lines give you consistent sizes for basic shapes or proportions across the icon set. This makes it easier to create a visually stable foundation and helps to establish relationships between the similarly proportioned icons and the objects or ideas they represent.
Color
Color: manageable in css
Icons are always a solid, monochromatic color and need to pass the same color contrast ratio as typography (4.5:1). It needs to be filled in #000 to be imported in the library. Then icon's color is managed with CSS code.
Padding
Padding: let it breath
Each frame includes a 2px of padding for the 24x24px grid and 4px for the 48x48px grid on all sides as guidance. However, it’s acceptable to go beyond the padding or off the key lines if doing so improves the optical balance of the icon.
Position
Position: always centered
Icons are optically aligned horizontally and vertically to the center of the icon grid within the boundary box. Centering ensures all icons will be aligned correctly when exported and used side-by-side in a line or a row. Visually center an icon where the visual weight is heaviest.
Strokes
Strokes: draw elegant shapes
Icons use a consistent stroke width of 1px. One icon should not look heavier or lighter than other icons of the same size. Nor should there be different weights within one icon. Maintain the same visual weight by using a 1px stroke for all icons.
- Never use center borders. Centering can cause half pixels.
- Avoid using the line tool; use the rectangle tool instead. The line tool will place the vector on half pixels.
- Be aware of automatic alignments which can place vectors on uneven or half pixels.
- Use illustrator setting : View > Snap To Pixel