Create an icon system specification covering grid, sizing, naming, categories, and implementation guidance.
Scanned 10/6/2026
Skills Directorynpx -y skills add NVlabs/Skill2Env --skill icon-system --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Icon System?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/nvlabs-icon-system)More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.
---
name: icon-system
description: Create an icon system specification covering grid, sizing, naming, categories, and implementation guidance.
---
# 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
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
