top of page
Iconography (1).png

DESIGN

SYSTEM

ICONS

Iconography (1).png

Overview

Overview.png

01_OBJECTIVES & CHALLENGES 

Objectives

To determine icon style and states appropriate for our product and figure out the most cost effective efficient way to implement icons into our design system.

Challenges

considering current development practices and lack of development resources.

02_HEURISTIC EVALUATION 

Heuristic evaluation

I did an evaluation of our the current state of icons in our product considering UX standards, and found many inconsistencies and bad practices.

List.png

Inconsistent hover states

Frame 189.png
List.png

Inconsistent stroke thicknesses

List.png

Solid vs outlined icon styles

Frame 190.png
List.png

Inaccessible icons

Frame 191.png
List.png

Inconsistent sizes

Frame 193.png
List.png

Inconsistent source: PNGs & SVGs

Frame 194.png

03_RESEARCH

Icon format

Group 33.png
Screenshot 2023-01-26 at 9.43.31 PM.png

Icon format

Group 32.png
vs.png
Screenshot 2023-01-26 at 9.43.31 PM.png

Outline vs solid icon style

Study objective: Are filled-in or outline icons more quickly and accurately selected?

Test: An application was developed to test speed and accuracy in selecting icons from distractors. 20 unique icons were tested, with 1260 participants.

Conclusion: Outlined icons were recognized 0.1 seconds slower than solid icons. This is statistically insignificant meaning one icon style is not objectively better than the other.

test1.png
test2.png
te4st2.png

Design system icon standards

cards.png

04_ICON DESIGN

Font awesome to SVG icons

  • Our developers currently pull icons from Font Awesome as “text glyphs”

  • Font Awesome glyphs and SVG’s do not come with a consistent sized bounding box

  • Using these icons directly do not adhere with design system icon standards

Each of these SVG’s and Glyph’s have different widths when scaling the height to 16px

ICONS.png

We downloaded the SVGs from Font Awesome, centered them with equal padding, and scaled them in increments of 8. 

Frame 217.png

05_IMPLEMENTATION STRATEGY

Custom coded repository (Storybook vs Github)               OR                  Custom library on Font Awesome

The project is currently in the implementation stage, and will depend on engineering resources allocation. Ideally we get a designated engineer to work on a custom coded repository, however if resources are not available at this time, a custom library on Font Awesome is a faster and easier solution. It is less than ideal, but will still follow accessibility and padding and consistency guidelines.

bottom of page