skills.rest
loveconnor
loveconnorCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

icons

Standardize the design, construction, and optimization of accessible SVG interface icons.

Updated Jul 20, 2026
Search Tags:#accessibility#optimization#icons#svg#ui-design#design-system
One-click install
npx skills add https://github.com/loveconnor/clove-skills --skill icons-loveconnor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icons
Source: https://github.com/loveconnor/clove-skills/tree/main/.agents/skills/icons
Command: npx skills add https://github.com/loveconnor/clove-skills --skill icons-loveconnor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses the fragmentation and technical debt often found in icon systems by providing a standardized, rigorous framework for designing, optimizing, and implementing accessible SVG assets.

Core Features & Use Cases

  • Systematic Design: Provides guidance on grid systems, optical sizing, and visual consistency to ensure icons look balanced and professional.
  • Technical Optimization: Offers workflows for cleaning SVG markup, managing viewBoxes, and ensuring cross-browser compatibility.
  • Accessibility & Security: Includes strict protocols for accessible naming, contrast verification, and sanitizing SVG content to prevent security vulnerabilities.
  • Use Case: Use this skill to audit an existing icon library for accessibility compliance or to generate a new set of consistent, production-ready SVG components for a design system.

Quick Start

Use the icons skill to audit the current SVG icon set for accessibility and markup quality.

Frequently Asked Questions about icons

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

FAQPage Schema
How do I audit existing SVG icons for accessibility and markup quality?▼

Auditing SVG icons for accessibility involves checking semantic markup, verifying accessible naming, and validating contrast. This process ensures visual consistency and resolves technical debt by standardizing interface assets against rigorous accessibility protocols.

What is the best way to design a consistent SVG icon system for a UI?▼

Designing a consistent SVG icon system requires applying established grid systems and optical sizing techniques. This approach ensures visual balance and professional quality across production-ready SVG components within a design system.

How do I optimize SVG markup for cross-browser compatibility?▼

Optimizing SVG markup for cross-browser compatibility involves cleaning the SVG code, managing viewBoxes correctly, and sanitizing content. This workflow prevents security vulnerabilities and ensures assets render reliably across different environments.

Can I use this approach to standardize fragmented icon libraries?▼

Yes, standardizing fragmented icon libraries is achieved by applying a rigorous framework for designing and implementing accessible SVG assets. This resolves fragmentation by enforcing visual consistency and technical optimization across the entire set.

Do I need a specific grid system to construct production-ready SVG components?▼

Constructing production-ready SVG components requires adherence to established grid systems. This ensures visual consistency and proper optical sizing, providing a structured framework for generating new interface icons.

Related Skills

Explore More Design & Creative Skills→
jwmyersjwmyers

visual-style-guide

Define color palettes, SVG styling, and token designs for Zero-Day Attack interfaces.

Community
Intermediate
meytalp-devmeytalp-dev

SVG Logo Designer

Generate SVG logo concepts with layout and color variations from design briefs.

Community
Intermediate
hossain-khanhossain-khan

normalize

Normalize UI components to match design tokens and system standards.

Community
Intermediate
MohammedSaudAlsahliMohammedSaudAlsahli

SVG Logo Designer

Generate scalable SVG logos with multiple concept variations and layout options.

Community
Advanced