Helios Icon System

A unified icon library built to support fast, consistent, and accessible UI across HashiCorp.

🏢 COMPANY

HashiCorp
(Helios Design System)

👥 TEAM

1 Product Designer (myself)
Design Systems Engineer
Helios Design Manager
Collaborating with designers and engineers across product teams

🛠 TOOLS

  • Figma

  • Helios Design System Site

  • Slack (feedback & requests)

📈 RESULTS

  • Improved discoverability and usability of the Helios icon library by restructuring naming, adding keyword metadata, and organizing icons into browsable categories.

  • Enabled faster, more accurate icon usage across teams by reducing guesswork and search friction.

  • Delivered new icons on an as-needed basis to support real product team needs, keeping the library relevant and scalable as the system evolved.

Version 1

Version 2

Version 3

SUMMARY

As Helios adoption grew across product teams, it became clear that the icon system needed better structure, clarity, and usability. While the original library existed, teams struggled to find the right icons, search results were unreliable, and naming lacked consistency.

I contributed to scaling and improving the icon library by refining visual alignment, designing new icons, and enhancing search and categorization through research, taxonomy design, and usability testing.

AUDIT

I began by reviewing the existing icon library as it appeared in both Figma and on the Helios website.

The audit revealed gaps in:

  • Naming conventions that didn’t match how designers searched

  • Inconsistent or missing search results due to a lack of keywords

  • No system for browsing or filtering by category

  • Repeated consumer requests for icons that weren’t yet available

I also tracked incoming icon requests from product teams and identified opportunities to extend the library in a more scalable way.

RESEARCH

Next, I conducted 1:1 interviews with designers and engineers to understand how they searched for icons and where the process broke down.

Key insights:

  • Most users guessed names or asked teammates

  • Categories were missing, making it hard to browse

  • Terms used in design didn’t match internal icon names

  • There was no guidance for decorative vs. functional use

This research informed a clearer icon taxonomy and helped shape the next iteration of the experience.

OPTIMIZATION

I redesigned and refined over 100 icons to enhance consistency in stroke, alignment, and sizing.

Additionally:

  • I designed 25+ new icons based on real team needs

  • I collaborated with engineering to clean up naming, tags, and metadata

  • Icons were delivered as clean SVG assets with usage guidance included

  • I worked with engineering to implement category filters and improve search logic on the Helios site

SITE LIBRARY

The complete icon set is available in Figma and searchable on the Helios website, where users can:

  • Browse by category (Arrows, Animation, Communication, etc.)

  • Search by plain-language terms.

  • Copy usage-ready icon names directly.