home / skills / feiwanghub / playground / icon-generation-skill

icon-generation-skill skill

safe

/skills/.trae/skills/icon-generation-skill

This skill generates customizable PNG icons with text and color options, enabling quick app icons, placeholders, or simple graphics.

npx playbooks add skill feiwanghub/playground --skill icon-generation-skill

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

757 B

---
name: icon-generation-skill
description: "Generate simple PNG icons with customizable text and background colors."
---

# Icon Generation Skill

This skill allows you to programmatically generate PNG icons, which is useful for creating app icons, placeholders, or simple graphics.

## Capabilities

- Generate square PNG images.
- Customizable background color, text color, and size.
- Auto-detects system Chinese fonts (macOS/Linux/Windows support).

## Usage

Generate a basic icon:

```bash
python3 .shared/icon-generation-skill/scripts/generate_icon.py "AB" "icon.png"
```

Customize colors (blue background, white text):

```bash
python3 .shared/icon-generation-skill/scripts/generate_icon.py "App" "app_icon.png" --bg "#007bff" --fg "#ffffff"
```

Overview

This skill generates simple square PNG icons with centered text and configurable colors and size. It is ideal for creating app placeholders, avatars, or quick branding assets without graphic tools. The output is a single-file PNG that balances legibility and lightweight file size.

How this skill works

The skill renders text onto a square canvas, choosing an available system font and scaling the glyphs to fit the icon size. You can specify background color, foreground (text) color, and pixel dimensions; the tool normalizes colors and outputs a PNG. It detects common system fonts across macOS, Linux, and Windows to ensure consistent rendering.

When to use it

Create app launcher icons or placeholder graphics for UIs.
Generate avatars or badges for user profiles and lists.
Produce temporary assets during development or testing pipelines.
Automate bulk creation of consistent icons for documentation or marketing.
Create simple, labeled icons for dashboards and prototypes.

Best practices

Choose high-contrast foreground and background colors for readability at small sizes.
Keep text short (1–3 characters/words) to ensure clarity when scaled down.
Use square dimensions that match your target context (e.g., 64, 128, 256 px).
Test icons at final display size to validate legibility and adjust font weight if needed.
Provide hex color values for precise brand matching (e.g., #007bff).

Example use cases

Generate a 128×128 app placeholder with initials for a contact list.
Produce a set of colored icons for feature flags or status indicators.
Batch-create PNGs for mocked UI screens during an automated build step.
Make simple product thumbnails for a web catalog when images are not yet available.
Create single-letter favicon drafts for early web prototypes.

FAQ

What color formats are supported?

Hex color codes (e.g., #ffffff) are supported for background and foreground; common named colors are supported depending on the renderer.

How do I ensure text fits on small icons?

Keep text to one or two characters, choose a bold font weight if available, and preview at target size; increasing canvas size and then downscaling can also improve clarity.