Helios Icon System

Scaling an enterprise icon library for clarity, speed, and accessibility

Role: Solo Product Designer (collab with Eng, DS Lead)
Company: HashiCorp (Helios Design System)

The Problem

As Helios adoption grew, so did the friction:

  • Designers struggled to find the right icon quickly

  • Search results were inconsistent or blank

  • Icon names didn’t reflect real usage terms

  • Missing metadata made the library hard to scale

  • No categorization or filtering, making browsing slow

My Role

I led the audit, redesign, and reorganization of the icon system to make it usable, scalable, and accessible. This included:

  • Researching how teams searched, selected, and misunderstood icon use

  • Creating a clear taxonomy and naming system

  • Designing 25+ new icons and refining over 100

  • Adding search keywords and categories for better discoverability

  • Collaborating with engineers to clean up metadata and improve search logic

What I Delivered

  • ✅ 100+ icons refined for visual consistency (stroke, alignment, sizing)

  • ➕ 25+ new icons created based on actual product team requests

  • 🏷️ Metadata + tags added for better search and relevance

  • 📁 Icon categories (e.g., Navigation, Files, Communication) introduced to support browsing

  • 🌐 Search improvements shipped on the Helios site (keyword matching, category filters)

  • 📄 Figma-ready assets + usage guidance delivered for seamless adoption

Research Highlights

I ran 1:1 interviews with designers and engineers to understand their workflows:

  • Most users guessed icon names or asked in Slack

  • Designers wanted to browse, not just search

  • Functional vs decorative use was unclear

  • Frustration led to duplicated or incorrect usage

These insights led to the development of a more intuitive system that reflected how people actually work.

Impact

  • 🔎 Search friction reduced: Designers now browse and find icons faster with category filters and plain-language tags

  • 🛠️ Fewer support requests: Teams no longer submit repetitive icon requests

  • 🎯 Better naming = faster design: Teams use icons correctly on the first try

  • 🌱 Scalable foundation: New icons and categories can be added without breaking structure

Live System

The updated icon library is now:

  • Searchable in Figma

  • Fully browsable on the Helios site

  • Used across HCP, Vault, Terraform, and Boundary

Why This Matters

Icons are small but critical parts of UI clarity and usability. By transforming a fragmented, hard-to-use library into a structured, scalable system, I enabled teams to design faster, ship more consistent UI, and reduce design debt, all without sacrificing speed.