icon-designer

Installation
SKILL.md

Icon Designer

Design icons that read instantly and behave like a system, not a pile of unrelated drawings.

Start with the icon system, not the first glyph

Lock these variables first:

  • use case: navigation, actions, objects, status, or illustration-like decoration
  • target sizes and contexts: toolbar, tab bar, settings list, empty state, marketing, wayfinding
  • style model: outline, filled, duotone, cutout, badge, or mixed with strict rules
  • production constraints: SVG, variable stroke, font icon, platform set, dark mode, localization
  • family rules: grid, optical weight, corner radius, perspective, stroke caps, fill behavior, detail density

Choose metaphors for recognition, not novelty

For every icon:

  1. Define the user meaning, not just the noun.
  2. Generate several metaphor routes.
  3. Pick the one with the fastest recognition at the target size.
  4. Check collisions with nearby concepts such as save/download, home/dashboard, alert/error, chat/comment.
  5. Prefer familiar symbols unless the brand explicitly benefits from a more ownable shape.
Installs
1
Repository
heymoezy/porter
First Seen
Jul 31, 2026
icon-designer — heymoezy/porter