# icon-development-kit **Repository Path**: mirrors_chromium_gitlab_gnome/icon-development-kit ## Basic Information - **Project Name**: icon-development-kit - **Description**: No description available - **Primary Language**: Unknown - **License**: CC0-1.0 - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-08-09 - **Last Updated**: 2025-12-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Icon Development Kit ![Icon Guidelines](doc/icon-development-kit-guidelines.png) This project provides symbolic icon assets to be used by application developers. It is liberally licensed (CC0) not to excluding any kind of application, including proprietary. ## Design Workflow New powerful rendering system for symbolic icons is in the making (and its initial revision already shipping with gtk). This document outlines how to take part in the transition as a designer. To see details on the steps necessary for the switch over, see the [gitlab issue](https://gitlab.gnome.org/Teams/Design/icon-development-kit/-/issues/137). ## Shaper Because the new icons are not just a simple SVG as was the case in the past, Matthias has written new tooling to allow to test and produce icons that allow producing icons with transitions, animation, recoloring and visual weight control. It will eventually be spun off into a standalone application, but for now it's necessary to build it alongside gtk. ### Building Shaper with Builder The most straight forward way to build Shaper is to build gtk in Builder: 1. Install [Builder](https://flathub.org/en/apps/org.gnome.Builder) from Flathub. 2. Set the build config to `org.gtk.Shaper.json` ![](https://s3.us-east-2.amazonaws.com/hedgedoc-gnome-org/uploads/c2afeebb-843f-4271-b194-326741734d86.png) 3. Push the `run` button. Builder will build Shaper and run it. To properly install the app on your system without the need for Builder, choose `Export` from the build menu. ![](https://s3.us-east-2.amazonaws.com/hedgedoc-gnome-org/uploads/d87a1360-30f6-40c7-a327-271d5ca9ee5f.png) To install the flatpak bundle, run ``` flatpak install --user org.gtk.Shaper ``` ## Style (WIP) While the new system supports *fills*, stylistically we're trying to form the new icons as outlines (strokes). The nominal canvas size remains 16x16px and the stroke width 2px. That achieves backward visual compatibility with existing assets. It is uncertain whether some of the advanced functionality will be available in gnome-shell in the near future, so the priority for the design is an gradual phase-in.
In rare situations a fill can be used, but do note that thinner outlines would make the fill visually dominant and use alpha transparency to tone it down. When you go for a fill based icon, the convention is to use state `1` for the filled one and set it as the default state. Provide an stroke only variant, even if less legible in state `0`. You can see examples of these variants using the 'force outlines' toggle in the web [preview](https://teams.pages.gitlab.gnome.org/Design/icon-development-kit/). There is a video recording [of a basic workflow in Shaper](https://www.youtube.com/watch?v=lV3LVLytngY). ### Metadata The most important bit about the icon is providing enough keywords for people to find the icon. The keywords are space separated and can include the legacy icon names, literal description of the elements in the icon and various semantic metaphors related to the icon. ## Coverage While we do not aim to do a 1:1 coverage of the existing devkit assets, everything that's covered by `gtk` and `adwaita-icon-theme` needs to be tagged in the assets. People searching for potentially removed assets should get a result. A preliminary must have list can be tracked in [this issue](https://gitlab.gnome.org/Teams/Design/icon-development-kit/-/issues/138). The devkit set can be [previewed on the web](https://teams.pages.gitlab.gnome.org/Design/icon-development-kit/).