Determine execution approach to OUI 1.x glyphs

[KrooshalUX]

In order to best serve our customers during our design system transition, we need to replace glyphs and icons without risking increasing cognitive overload by mixing styles of iconography (ie: mixing filled and outline styles, forcing color override or drastically changing the average line weight)

DO:

• Continue to utilize outline illustration style
• Follow SVG best practices
• Allow for color to be inherited

TRY:

• Align with future theme direction with forward slash (see breadcrumb example)

AVOID/RETHINK:

• It is not necessary to perform a 1:1 replacement of icons as some of the metaphors are inappropriate/ out of date (ex: help represented by ring bouy, save represented by floppy disk)

• Determine & use consistent join styles. Do not use breaking lines where joins would naturally occur. This impedes cognitive processing of the shapes as they combine to communicate a function or meaning

  

• Determine & use a consistent line weight across all glyphs. Account for xs, s, m, l, xl scaling when determining line weight, and consider multiple device types.

• Determine & use a consistent line-strokecap / endpoints (related: miterlimits)

  

[xeniatup]

The current guardrails that could be identified with short-term proposed replacements:

• 16 x 16px canvas (potentially 32x32px) with 1px trim area (potentially 2px)
• 1px centered stroke (potentially 2px)
• rounded end caps
• corner radius, inner corner radius - TBD
• contiguous strokes unless broken segments are helpful for comprehension
• straight segments, perfect arcs, and 15° angle increments where possible
• base angle is 45°, potentially 30°
• whole, even number increments for measurements where possible; fold down to 1px if necessary, potentially 2px when switched to 32x32
• shape key lines: 14x14px circles, 14x14px squares, 14x10px landscape rectangles, 10x14px portrait rectangles - adjusted to 32px later

[xeniatup]

References: Icon systems guidelines:

1. Polaris - Shopify https://polaris.shopify.com/foundations/design/icons
2. Material system icons https://material.io/design/iconography/system-icons.html#design-principles + icon themes guidelines https://material.io/design/iconography/system-icons.html#icon-themes

3. IBM Carbon https://www.ibm.com/design/language/iconography/ui-icons/usage/
4. Workday canvas https://canvas.workday.com/assets/system-icons#tab=create-your-own

[xeniatup]

https://phosphoricons.com/

[xeniatup]

Beta theme guidelines - updated:

• 16 x 16px canvas
• 1px centered stroke
• rounded end caps - (stroke-linecap="round")
• corner radius 0.5px, inner corner straight (stroke-linejoin="round")
• contiguous strokes unless broken segments are helpful for comprehension
• straight segments, perfect arcs, and 15° angle increments where possible
• base angle is 45°
• whole, even number increments for measurements where possible
• shape key lines: 15x15px circles, 14x14px squares, 12x16px rectangles - use your best judgement to obtain optical consistency in visual weight