skills.rest
Owl-Listener
Owl-ListenerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/Owl-Listener/designer-skills --skill icon-system-owl-listener
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
farmanlabfarmanlab
1

converting-figma-to-html

Convert Figma MCP design data into Tailwind-based HTML/CSS with data attributes.

Community
Advanced
AIA-11-HN-MIBAIA-11-HN-MIB
1

remix-icon

Provide 3,100+ RemixIcon icons in line and fill variants for web and mobile UI.

Official
Intermediate
AngelP17AngelP17
1

tailwind-design-system

Standardize UI design with Tailwind-based design tokens and component patterns.

Community
Advanced
MerzoukeMansouriMerzoukeMansouri
4

mozaic-icons

Search Mozaic Design System icons and generate Vue or React code.

Community
Basic