Design Pattern Library - Add icons

Ensure all icons have been uploaded to the brand.ai library

Example(s)

(Image of the pattern you are adding to the library)

Usage

(When do you use this pattern? And how? This is being collected for design.gitlab)

Icons are used to stress the visual weight for the elements with the high priority on a screen or to explain the universal knowledge in a simple way.

The level of visual weight from heavy to light is: Icon + label > Icon > label.

The size of icons(#102 (closed)):

• Bounding box: 16x16px
• Live area:
• Height: 14px
• Width: 14px (If the icon like commit is wide but short, the recommended width is 16px)
• Make sure the icons balance the visual weight in the particular usage.

The detail measurement of icons:

Grid	Stroke

Corner	Margin

Dos and Dont's

(Use this table to add images and text describing what’s ok and not ok. This is being collected for design.gitlab)

• Don't use an icon to refer to different meanings.
• Don't use different icons to refer to a specific meaning.

Don't frequently use the combination of an icon and a label.

• Using the combination only for the elements with high priority. For instance, we only use a icon + a label for the contextual navigation.

✅ Do	🛑 Don’t

Don't use an icon to explain a meaning which is not straight-forward.

• If it is inevitable, providing a quick explanation for users in a tooltip.

✅ Do	🛑 Don’t

Using the whole pixel for creating icons to align to measurement correctly

✅ Do	🛑 Don’t

Using rounded strokes

✅ Do	🛑 Don’t

Simplify icons for clarity and legibility

✅ Do	🛑 Don’t

Make the icons front-face instead of different dimensions.

✅ Do	🛑 Don’t

Related patterns

Links / references

Pattern checklist

Make sure these are completed before closing the issue, with a link to the relevant commit, if applicable.

1. Ensure that you have broken things down into atoms, molecules, and organisms.
2. Check that you have not created a duplicate of an existing pattern.
3. Ensure that you have used the proper method for creating the pattern depending on the complexity. Atoms and molecules are symbols, organisms are groups.
4. Make sure that text is created using text styles. When applicable used shared styles for colors.
5. QA check by another UX'r (create and reference a file in this issue which includes the changes as you would like to add them to the gitlab-elements file)