Building a new design system. Step 1: Icons

About me 👋 I am a Senior Engineer, Design Systems & Accessibility at HashiCorp. I live in San Francisco, but lurk in TorontoJS! ● ● ● Product-minded developer with a focus on the frontend Fan of Design Systems, User Experience (UX), and Developer Experience (DX) @amyrlam on Twitter

About HashiCorp Our software stack enables the provisioning, securing, connecting, and running of apps and the infrastructure to support them. We unlock the cloud operating model for every business and enable their digital transformation strategies to succeed.

Step 1: Icons Why icons? Icons provided an avenue to bring the Product and Marketing sides of the company together. ● ● ● ● Get folks speaking the same visual language across different products and frontend frameworks Opportunity to make a wide impact, to pave the way for the adoption of the new HashiCorp Design System Shipped Ember component in @hashicorp/ember-flight-icons Shipped framework-agnostic raw SVGs in @hashicorp/flight-icons

Icon design Default: Generic Contained Filled Off

Icon design usage Use the Filled style where contrast against other icons is important

Icon component code

Icon component props ● ● ● ● ● ● @name: Only @name is required @color: Defaults to a fill of “currentColor”, can override with our color design tokens @size: Defaults to 16px square, controls the width and height, other variant is 24px @stretched: Defaults to “false” ○ Stretched is if the SVG should have 100% width and height, e.g. if it should stretch to fill the parent container @isInlineBlock: Defaults to display: inline-block, pass in @isInlineBlock={{false}} to override Can add additional CSS classes as needed

Icon engineering fun facts ● ● ● ● ● We use Node scripts to automate the SVG export from Figma ○ One source of truth that populates icons in @hashicorp/ember-flight-icons and @hashicorp/flight-icons Use Percy.io visual regression testing to check icon display and API variants from each new Figma export Accessibility guidelines Put icon name synonyms in Figma under the description field 🔥 Flight is open source, check it out: ○ github.com/hashicorp/flight ○ flight-hashicorp.vercel.app

👉 live demo 👈

Looking forward Existing loading spinner Portion of the icons animate

Thank You hello@hashicorp.com www.hashicorp.com