icon-generation-skill_skill

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.