Claude MarketplacesSubmit
owl-listener avatar

Icon System

owl-listener/designer-skills

This generates a complete icon system specification covering the mechanics most teams skip until it's too late: grid structure, size scales from 12px to 48px+, naming conventions that actually parse, and delivery formats including SVG sprites and component wrappers. You'd use this when standarizing icons across a product or design system, especially if you're tired of developers guessing whether to use "close" or "cancel" or "x". The accessibility guidance is practical, not theoretical. Honestly, the value here is less about inventing a system and more about having someone else document the decisions you know you need to make but keep putting off.

skills.sh installs
2.6K
GitHub stars
3.3K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add owl-listener/designer-skills --skill icon-system --agent claude-code

Installs into .claude/skills of the current project.

Files

Icon System

You are an expert in designing and maintaining comprehensive icon systems.

What You Do

You create icon system specs ensuring visual consistency and scalable management.

Foundations

  • Grid: Base size (24x24px), keylines, stroke width, corner radius
  • Sizes: XS (12-16px), S (20px), M (24px), L (32px), XL (48px+)
  • Style: Stroke, filled, duotone — when to use each

Naming

icon-[category]-[name]-[variant] Categories: action, navigation, content, communication, social, status, file, device

Delivery

SVG source, sprite sheets, component wrappers, Figma library

Accessibility

  • Label or aria-hidden for every icon
  • Pair with text for critical actions
  • Sufficient contrast
  • 44x44px minimum touch targets

Best Practices

  • Audit and remove unused icons
  • Establish contribution workflow
  • Version alongside design system
  • Test at every supported size
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/owl-listener/designer-skills
Category
Code Review & Quality
First seen
Jun 3, 2026

More from owl-listener/designer-skills

All 68

Recommended

More Code Review & Quality
1pulumi avatarpulumi-best-practicespulumi/agent-skillsLoad when the user is writing, reviewing, or debugging Pulumi TypeScript/Python programs; asks about Output<T> or apply() usage; wants to create ComponentResour2.6Kskills.sh installs
2agricidaniel avatarblog-rewriteagricidaniel/claude-blogRewrite and optimize existing blog posts for Google SEO (May 2026 Core Update, E-E-A-T) and AI citation visibility as one SEO discipline. For AI-citation-only a2.6Kskills.sh installs
3google avataradk-eval-guidegoogle/adk-docsMUST READ before running any ADK evaluation. ADK evaluation methodology — eval metrics, evalset schema, LLM-as-judge, tool trajectory scoring, and common failur2.6Kskills.sh installs
4agricidaniel avatarblog-personaagricidaniel/claude-blogCreate and manage writing personas with NNGroup 4-dimension tone framework (Funny-Serious, Formal-Casual, Respectful-Irreverent, Enthusiastic-Matter-of-fact). P2.6Kskills.sh installs
5agricidaniel avatarblog-clusteragricidaniel/claude-blogSemantic topic cluster planning and automated execution engine for claude-blog. Performs SERP-based keyword research, groups keywords by search intent and SERP 2.6Kskills.sh installs
6github avatargithub-actions-hardeninggithub/awesome-copilotSecurity hardening reviewer for GitHub Actions workflow files (.github/workflows/*.yml). Reasons about the Actions threat model that pattern matchers and genera2.6Kskills.sh installs