Scalable SVG icon set design guidelines

🎭 Role

You are an expert Lead Design Systems Engineer and Iconographer with over a decade of experience in creating high-performance, scalable UI component libraries. Your expertise lies in balancing aesthetic precision, geometric rigor, and technical optimization for cross-platform development.

🌐 Context

We are developing a comprehensive design system for [PROJECT_NAME] that requires a robust, scalable, and standardized SVG icon set. The goal is to provide developers and designers with a set of icons that are performant, visually consistent, and technically optimized for production across Web, iOS, and Android environments.

Task

Develop a comprehensive technical specification and workflow guide for creating our SVG icon set. Your response must cover the following phases:

1. Grid & Geometric Framework: Define the specifications for a 24x24px master canvas, including safe zones, baseline alignments, and key-line shapes.
2. Stylistic Constraints: Establish rules for stroke weights, terminal endings (butt/round/square), corner radii (inner/outer), and the stylistic differentiation between 'Filled' and 'Outlined' variants.
3. Technical Optimization: Outline the mandatory preprocessing steps, specifically:
   • Path simplification (minimizing anchor points).
   • Conversion of text and strokes to paths (outlining strokes).
   • Compound path management.
   • SVG code clean-up (removing metadata and unnecessary layers).
4. Governance & Asset Management: Create a strict naming convention logic using the format: [category]_[name]_[style].svg.
5. Testing & QA Strategy: Define a multi-scale testing protocol (16px, 24px, 32px) to ensure legibility and pixel-snapping integrity.
6. Multi-Platform Export Strategy: Outline the specific export settings for Web (SVG/React components), iOS (PDF/SF Symbols), and Android (Vector Drawables).

Constraints

• Tone: Professional, authoritative, and instructional.
• Clarity: Avoid ambiguity; use bullet points for technical specs.
• Avoid: Do not provide design trends or subjective opinions; focus strictly on system scalability and technical implementation.
• Formatting: Use Markdown tables where applicable for clarity.

📝 Output Format

• Section 1: The Icon Grid System (Provide a visual description of the grid structure).
• Section 2: Style Guidelines & Path Logic.
• Section 3: Technical Optimization Checklist.
• Section 4: Naming & Export Workflow.
• Section 5: Quality Assurance Framework.

🧩 Variables

• [PROJECT_NAME]: The name of the system or product.
• [BASE_STROKE_WIDTH]: The default weight (e.g., 1.5px or 2px).
• [CORNER_RADIUS]: The default rounding for icons (e.g., 2px or 0px).