How to Access and Use Glyphs Icons

Updated

Glyphs (glyphs.fyi) is a fully editable, open-source icon design system. You can access its icons in four main ways: editing the source in Figma, pulling code from the GitHub repo, downloading SVGs via a CLI utility, or using web components in your app. Which route you take depends on whether you're designing, developing, or both.

What Glyphs Provides

According to the site, Glyphs offers:

  • Thousands of editable icons designed in Figma
  • Web components for use with any application
  • A CLI utility to download SVGs from Figma
  • Categorized and tagged icons for easy search
  • Growing documentation and guides
  • Optional light mode everywhere

The system is described as "fully editable & truly open source," with the source available through both Figma and GitHub.

Access Route 1: Figma (for Designers)

If you want to edit icons or use them in design work, the Figma file is the starting point.

  1. Open the Figma File linked from the Glyphs site.
  2. Browse or search icons by category and tag.
  3. Edit any icon directly, since the system is designed to be fully editable.
  4. Use the Figma file as your source of truth for the icon set.

This route suits you if you're working in a design tool and want to customize icons before they reach code.

Access Route 2: GitHub (for Code and Contribution)

The GitHub Repo is where the open-source code lives.

  • Clone or browse the repo to get the code behind the system.
  • Contribute to ongoing development.
  • Request new icons and features.

The site explicitly invites users to "join us in Figma and GitHub to contribute to ongoing development and request new icons & features." So if you need an icon that doesn't exist, the GitHub repo is the channel for requesting it.

Access Route 3: CLI Utility (for Downloading SVGs)

Glyphs provides a CLI utility to download SVGs from Figma. This is the route for developers who want raw SVG assets rather than web components.

The expected flow:

  1. Use the CLI utility to pull SVGs from Figma.
  2. Integrate the downloaded SVGs into your own build or asset pipeline.

The source material confirms the CLI exists and its purpose (downloading SVGs from Figma), but does not document specific commands or flags. Check the repo's documentation for exact usage.

Access Route 4: Web Components (for Web Apps)

For using icons directly on the web, Glyphs provides web components that work with any application. This is the most direct path if you want to drop icons into a web project without managing SVG files yourself.

The site lists web components as a core feature alongside the Figma source and CLI, so this is a first-class usage path rather than an afterthought.

Choosing Your Route

Your role / goal Best entry point
Design and customize icons Figma file
Get code, contribute, request icons GitHub repo
Download raw SVGs into a pipeline CLI utility
Use icons in a web app Web components

Common Considerations

  • Open source means editable, not necessarily plug-and-play. The system is built around editing in Figma, so expect to engage with the source rather than only consuming a fixed set.
  • Categorization and tagging are provided to make search easier across thousands of icons — use them rather than scrolling.
  • Documentation is described as "growing," so some details (like exact CLI syntax) may require checking the repo directly.
  • Light mode is optional and available everywhere, per the site.

Where to Start

If you're a designer, open the Figma file. If you're a developer, start with the GitHub repo to understand the structure, then choose between the CLI (for SVGs) and web components (for direct web use) based on your stack. Both the Figma file and GitHub repo are linked from the Glyphs homepage under "Access the Source."