icon.gl
Version:
icon.gl is a icon library and framework developed by Scape Agency.
177 lines (118 loc) • 10.5 kB
Markdown
<p align="center">
<img src="https://raw.githubusercontent.com/stylescape/brand/master/src/logo/logo-transparant.png" width="20%" height="20%" alt="Stylescape Logo">
</p>
<h1 align="center" style='border-bottom: none;'>icon.gl</h1>
<h3 align="center">Modular Icon Library</h3>
<br/>
<div align="center">
[
](https://www.icon.gl)
[](https://www.npmjs.com/package/icon.gl)
[](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/stylescape/icon.gl)
[](https://stackblitz.com/github/stylescape/icon.gl/tree/main?file=src%2Findex.html)
[](https://github.com/stylescape/icon.gl/blob/main/LICENSE)
</div>
<div align="center">
[](https://github.com/stylescape/icon.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=bug_report.yml)
[](https://github.com/stylescape/icon.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=feature_request.yml)
[](https://github.com/stylescape/icon.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=question.yml)
[](https://github.com/stylescape/icon.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=suggestion.yml)
[](https://github.com/stylescape/icon.gl/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&projects=&template=discussion.yml)
</div>
---
<br/>
**`icon.gl` is an inspired icon library based on the traditional Kaidā glyphs used historically in the Yaeyama Islands of Japan. These glyphs, rooted in local administration and communication, encompass a variety of symbols representing animals, plants, numerals, and household items.**
## Introduction
Icon.gl is a modern, innovative icon library infused with the essence of traditional [Kaidā glyphs](https://en.wikipedia.org/wiki/Kaid%C4%81_glyphs), echoing the historical charm of the Yaeyama Islands. Our design principles revolve around simplicity, modernity, and a touch of quirkiness. Each icon is distilled to its fundamental form, ensuring it embodies only the most essential characteristics. With bold geometric shapes, our icons boast a symmetrical and consistent look, providing unparalleled clarity and readability even at smaller sizes. This unique blend of contemporary design and cultural heritage makes icon.gl not just a collection of symbols, but a storytelling tool that bridges the past with the present.
<p align="center">
<img src="res/yonaguni_symbol.jpg" width="80%" height="80%" alt="Yonaguni Symbols">
</p>
## Icons
| | | | | | |
| ---- | ---- | ---- | ---- | ---- | ---- |
| <img src="https://raw.githubusercontent.com/stylescape/icon.gl/main/dist/png/512/pie_02.png" alt="pie_02"><small>pie_02</small> | <img src="https://raw.githubusercontent.com/stylescape/icon.gl/main/dist/png/512/pie_03.png" alt="pie_03"><small>pie_03</small> | <img src="https://raw.githubusercontent.com/stylescape/icon.gl/main/dist/png/512/star.png" alt="star"><small>star</small> | <img src="https://raw.githubusercontent.com/stylescape/icon.gl/main/dist/png/512/swirl.png" alt="swirl"><small>swirl</small> | |
## Usage
Ideal for projects seeking a blend of historical and cultural aesthetics with functional iconography.
Iconography is highly functional in a user interface. When used wisely, icons become an elegant yet efficient way to communicate with and help guide a user through an experience. To maintain this functionality, it’s important to reduce cognitive load on users by employing icons sparingly and strategically throughout your designs.
## Installation
Instructions on how to integrate icon.gl into your project.
``` sh
npm i icon.gl
```
### Stylescape
<p align="center">
<a href="https://github.com/stylescape/kyu">
<img src=".github/images/logo_kyu.png" width="10%" height="10%" alt="Kyū Logo">
</a>
<a href="https://github.com/stylescape/yoki">
<img src=".github/images/logo_yoki.png" width="10%" height="10%" alt="Yōki Logo">
</a>
<a href="https://github.com/stylescape/kaida">
<img src=".github/images/logo_kaida.png" width="10%" height="10%" alt="Kaidā Logo">
</a>
<a href="https://github.com/stylescape/niji">
<img src=".github/images/logo_niji.png" width="10%" height="10%" alt="Niji Logo">
</a>
<a href="https://github.com/stylescape/suru">
<img src=".github/images/logo_suru.png" width="10%" height="10%" alt="Suru Logo">
</a>
<a href="https://github.com/stylescape/shodo">
<img src=".github/images/logo_shodo.png" width="10%" height="10%" alt="Shodō Logo">
</a>
</p>
- <https://www.npmjs.com/package/stylescape>
---
## Colophon
### Development Resources
#### Version
This documentation is in version `v0.0.1`.
Last edited: `07/2024`
<!-- #### Versions
The repository provides a track of different versions of the assets for easier navigation and understanding of the evolution of the brand. Each version is tagged with a unique identifier.
1.0.0 Initial release of brand assets
1.0.1 Minor tweaks to the color palette
1.1.0 Introduction of new logo variants
1.1.1 Fixes to SVG assets
1.2.0 Update of Typography guidelines
1.2.1 Minor fixes to the logo files
1.3.0 Addition of new graphics and diagrams
1.3.1 Updated Readme
1.4.0 Introduction of new Templates
1.4.1 Updated copyrights and licensing information -->
<!-- #### Branches
- `Master` Stable, production-ready version of the brand assets
- `Develop` Work in progress, latest changes and updates -->
#### Authors
**icon.gl** is an open-source project by **[Scape Agency](https://www.scape.agency "Scape Agency website")**.
##### Scape Agency
Scape Agency is a spatial innovation collective that dreams, discovers and designs the everyday of tomorrow. We blend design thinking with emerging technologies to create a brighter perspective for people and planet. Our products and services naturalise technology in liveable and sustainable –scapes that spark the imagination and inspire future generations.
- website: [scape.agency](https://www.scape.agency "Scape Agency website")
- github: [github.com/stylescape](https://github.com/stylescape "Scape Agency GitHub")
<!-- #### Contributors
We are proud to acknowledge the contributions made by individuals from around the world. The success of this repository is a result of the collaborative efforts of these passionate individuals. -->
<!-- Contributions
Contributions to this project follow the all-contributors specification. Each contributor gets recognition for their work in the contributors section. -->
<!-- Pull Requests
Pull requests are always welcome. If you wish to contribute or make changes, please make a pull request. If it's a substantial change, please create an issue first, to discuss it. -->
<!-- Community
Join our community and contribute towards the development and enhancement of the brand assets. We value all our contributors and aim to create a vibrant community that supports and helps each other. -->
#### Contributing
We'd love for you to contribute and to make this project even better than it is today!
Please refer to the [contribution guidelines](.github/CONTRIBUTING.md) for information.
<!--
#### Sponsorships
Your sponsorships help us maintain this project. You can sponsor this project through the sponsorship link provided. Your contribution can help us in many ways, from keeping our servers up and running, to supporting the further development and improvement of these assets.
Issues
In case you find any errors or have suggestions for improvements, we encourage you to raise an issue. The Issues tab is a space for community members to discuss problems they’ve encountered, suggest enhancements, and more.
#### FAQ
We have compiled a list of frequently asked questions for easier navigation and understanding of this repository. If you have more questions, please raise an issue and we will be glad to assist you. -->
### Legal Information
#### Copyright
Copyright © 2025 [Scape Agency BV](https://www.scape.agency/ "Scape Agency website"). All Rights Reserved.
#### License
Except as otherwise noted, the content in this repository is licensed under the
[Creative Commons Attribution 4.0 International (CC BY 4.0) License](https://creativecommons.org/licenses/by/4.0/), and
code samples are licensed under the [Apache 2.0 License](http://www.apache.org/licenses/LICENSE-2.0).
Also see [LICENSE](https://github.com/block-foundation/community/blob/master/src/LICENSE) and [LICENSE-CODE](https://github.com/block-foundation/community/blob/master/src/LICENSE-CODE).
#### Disclaimer
**THIS SOFTWARE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**