icon.gl

---

icon.gl

Stylescape Icon Library

---

Contents

• Introduction
• Colophon

---

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, 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.

Design principles

Concept

icon.gl icons are designed to be simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing essential characteristics.

Features

• Diverse Range: Includes icons representing a broad spectrum of elements from nature, agriculture, and domestic life.
• Cultural Heritage: Reflects the rich historical context of the Yaeyama Islands.
• Numerical Symbols: Incorporates unique numeral systems, influenced by Suzhou numerals.

Specifications

Icon sizes

icon.gl icons are displayed as 24 x 24 dp. Create icons for viewing at 100% scale for pixel-perfect accuracy.

Dense layouts

On desktop, when the mouse and keyboard are the primary input methods, measurements may be scaled down to 20dp.

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.

Sizing

Icons have been designed to work best in four sizes: 16px, 20px, 24px, and 32px. Please use icons at their originally produced size. These are provided in SVG and Adobe Illustrator files.

Installation

Instructions on how to integrate icon.gl into your project.

npm i icon.gl

Template

Create your own system and product icons with these Adobe Illustrator files including the 24dp icon grid.

Template Setttings

Layout

Icon content should remain inside of the live area, which is the region of an image that is unlikely to be hidden from view (such as when sidebars appear upon scrolling).

If additional visual weight is needed, content may extend into the padding between the live area and the trim area (the complete size of a graphic). No parts of the icon should extend outside of the trim area.

Live area

Icon content is limited to the 20dp x 20dp live area, with 2dp of padding around the perimeter.

Padding

2dp of padding surrounds the live area.

Units

• General: Pixels
• Stroke: Pixels
• Type: Pixels

Guides

• Color: Light Blue
• Style: Lines

Grid

• Color: Light Gray
• Style: Lines
• Gridlines every: 64 px
• Subdividsions

View

• Snap to Grid

Artboards

• 64 artboards (8x8)
• Artboards are snapped to the document grid.

Layout Violet

Keyframes Medium Blue Template

Grids

Grid 128px grid-128px grey 4px 10% Light Gray Template Grid 64px grid-64px grey 3px 10% Light Gray Template Grid 32px grid-32px grey 2px 10% Light Gray Template Grid 16px grid-16px grey 1px 10% Light Gray Template

Areas Peach Template

Stylescape

• https://www.npmjs.com/package/stylescape

Links

Guidelines

• Material Design - System Icons
• IBM Design Language | Iconography | UI Icons
• Choosing the right size and format for icons
• Apple developer - App icons
• Microsoft Windows - Icons (Design basics)
• Pluralsight | Design System | Iconography

Fort Awesome

• Fort Awesome | GitHub

Ref

• Making SVG icon libraries for React apps
• https://github.com/mryechkin/acme-icons
• https://github.com/necolas/icon-builder-example
• Using npm to create JavaScript icon libraries
• https://github.com/kreuzerk/svg-icon-library-starter

---

Colophon

Development Resources

Version

This documentation is in version v0.0.1. Last edited: 07/2023

Authors

icon.gl is an open-source project by Scape Agency.

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
• github: github.com/scape-agency

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 for information.

Legal Information

Copyright

Copyright © 2023 Scape Agency BV. 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, and code samples are licensed under the Apache 2.0 License.

Also see LICENSE and 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.