Glyphs

Description

Glyphs.fyi is an open-source icon design system, designed for designers and developers. Supports dark and light modes, can be edited in Figma, and is open source.

Visit Site

What is Glyphs

Glyphs is a truly amazing open-source design system! It's not just an icon library, but a 'fully editable & truly open source design system'. All icons are meticulously designed in Figma, shared open-source through GitHub, and provide complete web components and CLI tools. What's most unique is its optional dark mode support, and all icons are carefully categorized and tagged for easy search and use. As an open-source project, it perfectly demonstrates the power of community collaboration.

Homepage

Docs

How to use Glyphs

Using the Glyphs design system is very flexible, offering multiple ways to meet different needs:

Designer Usage

Get complete design files from Figma Community
Edit and customize icons directly in Figma
Participate in community contributions by submitting new icon designs
Use the carefully categorized and tagged icon system

Developer Integration

Web Components: Integrate into any modern web application
CLI Tools: Download SVG files directly from Figma
GitHub Repository: Access complete icon resources
Documentation Guide: Follow detailed usage instructions

Customization Features

Seamless dark mode switching support
Fully editable design system
Responsive design adaptation

Glyphs Key Features

Fully Open Source Design System

A truly open-source project supporting community contributions, where everyone can participate in building and improving the icon system.

Figma Native Design

All icons are designed in Figma with complete design files provided, allowing designers to edit and customize directly.

Web Component Support

Provides modern web components that can seamlessly integrate into any frontend framework and application.

CLI Tool Suite

Powerful command-line tools that can download SVG files directly from Figma, automating workflows.

Dark Mode Support

Built-in optional dark mode, ensuring icons display perfectly under different themes.

Smart Categorization System

All icons are carefully categorized and tagged, supporting quick search and location of needed icons.

Glyphs Use Cases

Enterprise Design Systems

Establish unified design language and icon systems for enterprises, ensuring consistency and professionalism in product design.

Open Source Contributions

Participate in the open-source community, contribute new designs to the icon library, and collaborate with designers and developers globally.

Web Application Development

Integrate high-quality icons into modern web applications to enhance user interface visual experience.

Prototype Design

Quickly create product prototypes in Figma using rich icon resources to improve design efficiency.

Multi-theme Adaptation

Leverage dark mode support to create consistent visual experiences across different themes for applications.

Glyphs Pros & Cons

Pros

Completely open source with no usage restrictions

Figma native design, designer-friendly

Provides complete development toolchain

Supports dark mode and multi-themes

Active community support and contributions

Detailed documentation and guides

Carefully categorized icon system

Fully customizable and editable

Cons

Relatively limited number of icons

Requires some technical background

Dependent on Figma and GitHub

Update frequency depends on community contributions

Lacks official technical support

Relatively steep learning curve

Glyphs FAQ

Q1: Is the Glyphs design system really completely free?

Yes, Glyphs is a completely open-source project. All icons, design files, and tools are free to use, including for commercial projects.

Q2: How can I use Glyphs icons in my project?

You can use them in multiple ways: 1) Integrate using web components; 2) Download SVGs via CLI tools; 3) Export from Figma design files; 4) Get directly from GitHub repository.

Q3: Can I modify and customize these icons?

Absolutely! This is the core advantage of an open-source design system. You can edit icons directly in Figma or modify SVG code to meet project requirements.

Q4: How can I contribute new icons to the Glyphs project?

You can submit issues or pull requests on GitHub, or share your designs in the Figma community. Project maintainers will review and consider adding quality icons to the main library.

Q5: Which development frameworks does Glyphs support?

Glyphs' web components can be used in any modern frontend framework, including React, Vue, Angular, etc. SVG format is universally compatible.

Q6: How does dark mode work?

Glyphs is designed with dark mode support in mind, ensuring icons maintain good visual effects and readability on both light and dark backgrounds.

Q7: What exactly can the CLI tools do?

CLI tools can download the latest SVG icons directly from Figma, automate icon update processes, support batch operations and custom configurations.

More about Icons

Iconic

Iconic is developed and designed by two designers: James McDonald and Orman Clark. They regularly update icons with a consistent style (24x24 bounding box, 1.5px stroke, SVG format) and offer free and paid downloads.

Coolicons

Coolicons is a carefully designed icon collection, containing 440+ icons, focusing on simplicity and consistency. It is非常适合网页、应用程序和移动端设计。

Icons Download

icons.download is a set of 16 vector icons, open source, and can copy SVG code with one click.

Untitled UIi Free Icon

Untitled UI Icons are a clean, consistent, and neutral icon library crafted specifically for modern UI design. Made for Figma, in Figma, and now available for React!They Designer team searched everywhere for the ultimate icon set for modern UI design to use across all our projects... We couldn't find an icon library for Figma we loved so we made one.Untitled UI Icons won Product Hunt #1 Product of the Week and is one of the most popular icon libraries in the world with 230,000+ Figma Community downloads.