icon-system

Create icon system specifications with naming conventions, SVG assets, and accessibility rules.

2.0k|325|Updated Mar 7, 2026

Search Tags:#accessibility #svg #design-systems #naming-convention #ui-library #icon-system

Ready to run

npx skills add https://github.com/Owl-Listener/designer-skills --skill icon-system-owl-listener

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: icon-system
Source: https://github.com/Owl-Listener/designer-skills/tree/main/design-systems/skills/icon-system
Command: npx skills add https://github.com/Owl-Listener/designer-skills --skill icon-system-owl-listener

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent icon design across products creates visual fragmentation and slows UI development.

Core Features & Use Cases

Naming convention icon-[category]-[name]-[variant] for scalable symbol libraries.
Delivery of SVG assets, sprite options, and a Figma library for easy integration.
Accessibility guidelines including labeling and sufficient touch targets.

Quick Start

Create an initial icon system specification that defines grid, sizes, naming, categories, and accessibility rules.

Frequently Asked Questions about icon-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a scalable icon system for a UI design library?▼

A scalable icon system requires a 24x24 px base grid, a structured icon-[category]-[name]-[variant] naming scheme, SVG asset delivery, and a Figma library to ensure consistency across web and mobile platforms.

What naming convention should I use for organizing SVG icons in a design system?▼

Use the icon-[category]-[name]-[variant] naming convention to organize scalable symbol libraries. This structure maintains clear categorization and variant tracking across your SVG assets.

How do you handle accessibility labeling for UI icons?▼

Accessibility labeling for UI icons requires defining sufficient touch targets and applying proper labels in the system's versioned documentation to meet web and mobile accessibility audit standards.

Does this icon system approach work for both web and mobile platforms?▼

Yes, this icon system approach works for both web and mobile platforms by delivering SVG assets and sprite options alongside a Figma library to address visual fragmentation across products.

What is the standard base grid size for building a UI icon library?▼

The standard base grid size for building a UI icon library is a 24x24 px grid. This foundational grid ensures consistent scaling and alignment for all SVG assets.

Why do I need versioned documentation for an SVG icon system?▼

Versioned documentation tracks the evolution of your SVG icon system, recording naming conventions, categories, and accessibility rules to prevent visual fragmentation as products scale.