What file formats are preferred for icons?

SVG is the preferred format for its scalability, though high-resolution PNGs (between 200x200 and 512x512 pixels) are accepted as fallbacks.

Where are Giant Swarm application icons stored?

They are managed in the giantswarm/web-assets repository and served via the global assets server at s.giantswarm.io.

How do I handle light and dark modes?

You should provide two files named light.svg and dark.svg. If only one version is available, the same file should be used for both names.

What are the visual requirements for these icons?

Icons should have a square aspect ratio and maintain a simple design that remains legible at very small sizes in UI components.

How do I publish a new icon version?

Submit a PR to the web-assets repository. Once merged, trigger a release by pushing the main#release#minor branch to initiate the bump.

Giant Swarm App Icons

Name: Giant Swarm App Icons
Author: giantswarm

bygiantswarm

0•

设计工具

Manages and implements standardized application icons across Giant Swarm's product ecosystem and documentation.

This skill provides comprehensive guidance on managing application icons within Giant Swarm's infrastructure. It streamlines the process of finding, formatting, and contributing icons to the centralized web-assets repository, ensuring consistent visual representation of customer-facing applications. Users can leverage this skill to understand versioning requirements, file naming conventions for light and dark modes, and the specific CI/CD release workflow required to publish new assets to the global CDN service.

主要功能

01Optimized visual guidelines for small-scale icon legibility

020 GitHub stars

03Guided workflow for the web-assets repository and CDN integration

04Strict versioning protocols to prevent asset overwriting

05Standards for light and dark mode SVG/PNG icon variants

06Simplified PR and release process instructions for Giant Swarm staff

使用场景

01Adding a brand-new application icon to the Giant Swarm service catalog

02Updating existing icons with newer versions without breaking legacy links

03Ensuring icons meet specific technical requirements for resolution and aspect ratio

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add giantswarm/claude-code chart-icons

For use in Claude.ai and ChatGPT

Download Skill