Arc Design System's New Approach to Icons
Throughout the process of creating Arc’s Design System, the product design team was tasked with assessing the state of the platform experience. We considered every aspect of design: color, type, layout, navigation, icons, and more. Our goal was to examine the implementations of each design element. This phase of discovery shed light on many large considerations, particularly with iconography.
Digital makers have enjoyed a recent bounty of available and plentiful icon resources. The general shift towards SVG and non-raster assets have created a plethora of options for our teams to consider. Prior to the design system, Arc Publishing made use of FontAwesome, an incredible resource bringing contemporary icons to the masses. However, when pulling back and examining the entire implementation, the product design team noticed many disparities and opportunities to button up our approach to icons. FontAwesome made it too easy to implement icons one-off, creating disparities across the experience.
In order to steer our iconography to be purposeful, accessible, and cohesive, the product design team has adopted the Streamline icon family. This icon family provides a robust and diverse set of assets. Moving forward, the product design team will be releasing icons, ensuring best practice is adhered to with a sharp focus on the customer’s experience. Part of our critique of FontAwesome is the general availability of icons, allowing many to pull the icon as they wish. With no formal philosophy and approach to icons, we seized this opportunity to create a standard.
In future releases to the Arc Design System, our team will be releasing icons that are paired with SVG titles, to bolster our accessibility and to create a unified experience between icons and their meanings. Going through each individual icon and binding it to a feature/pattern will help build this vocabulary with Arc’s users, providing a consistent icon experience.
To learn more about our approach, visit our Icons guideline page.