Unified Icons

UI @Shivani | PM @ Blake & Linxi | Eng @ Chris & Jay

Problem context

Inconsistencies across icons and their applications created confusion among team members and also users about the right usage of a particular icon

Confusion & inconsistent User exprience

1. Confusion among team members when selecting

icons for use in designs.

2. Difficulty in maintaining a cohesive and harmonious visual language across products and platforms.

3. Increased design iterations and revisions to address inconsistencies

Key painpoints

Icon audit and it's findings

Findings

1. Outdated icons

That needed to be removed from the Storybook library

2. Duplication

Identifying duplication of icons with the same meaning conveys identical or highly similar meanings.

3. Inconsistent

Stroke weights or rounded stroke terminals

4. Audit of outdated files

Did an extensive audit of files designed by previous designers

Action items

Applying icons

The component properties help the designers to use the icons quickly and also ensures overall consistency of the UI

Before

After

Before and after following guidelines

Icon sizes

Icons support additional sizes: 20dp, 40dp, and 48dp, with 20dp primarily for desktop, dense layouts, and small-scale visuals, and 40dp and 48dp optimized for display or headline type, plus larger screen sizes.

16px small button

20px default button

Keyline and grids

The icon grid establishes clear rules for the consistent, but flexible, positioning of graphic elements.

Keyline shapes are the foundation of the grid.

Anatomy

Corner

Exterior corners with 2px

Weight & stroke

Stroke terminal on an icon

Complex icon shapes

The icon used 1.5dp stroke and 2dp stroke together

Accessibilty

Difference between icon and symbols

Symbol

Symbols are complex and hence less scalable.

Icon

Icon represent the message quickly and are scable

at all viewports because of its simplicity

ICONS

Representing states of permission in work order with the help of icons

Icons paired with text can provide the users with visual and contextual

clarity

Icon layout

Icon content should remain inside of the live area, which is the region of an image that is unlikely to be hidden from view (such as an area where sidebars appear upon scrolling).