Icon Development Skill

This skill covers best practices for creating, optimizing, and adding icons to the library.

Icon Requirements

SVG Specifications

Path Guidelines

1. Use single path when possible - Simpler paths are easier to render
2. Optimize coordinates - Round to 1-2 decimal places
3. Center the icon - Keep equal padding on all sides
4. Design for stroke - Icons should look good at varying stroke widths

Creating an Icon

Step 1: Design the SVG

Create in your preferred SVG editor (Figma, Illustrator, Inkscape):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" 
     fill="none" stroke="currentColor" stroke-width="2"
     stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
</svg>

Step 2: Extract the Path

Copy just the d attribute value from the <path> element.

Step 3: Add to icons.json

{
  "name": "Layer Stack",
  "slug": "layer-stack",
  "src": "M12 2L2 7l10 5 10-5-10-5z",
  "tags": ["layer", "stack", "design", "graphics"]
}

Step 4: Build and Verify

npm run build
npm run docs:dev

Path Optimization

Remove Unnecessary Precision

Before:

M12.000000 2.000000L2.000000 7.000000

After:

M12 2L2 7

Combine Continuous Paths

Before:

M5 5L10 5 M10 5L15 5

After:

M5 5L15 5

Use Relative Commands

Before:

M5 5L10 10L15 5

After:

M5 5l5 5l5-5

Naming Conventions

Icon Names (name field)

• Title case with spaces: "Arrow Left", "Shopping Cart"
• Descriptive and concise

Slugs (slug field)

• Lowercase with hyphens: arrow-left, shopping-cart
• Match the name but URL-safe
• Keep consistent with existing patterns

Tags (tags array)

• Include broken-down name words
• Add related concepts
• Include action verbs if applicable
• Example: ["arrow", "left", "back", "previous", "navigate"]

Multi-Path Icons

For complex icons with multiple paths, combine them:

{
  "name": "Complex Icon",
  "slug": "complex-icon",
  "src": "M5 5h14 M5 12h14 M5 19h14",
  "tags": ["menu", "hamburger", "bars"]
}

Custom Properties

Override defaults when needed:

{
  "name": "Filled Circle",
  "slug": "filled-circle",
  "src": "M12 12m-10 0a10 10 0 1 0 20 0a10 10 0 1 0-20 0",
  "fill": "currentColor",
  "stroke": "none",
  "tags": ["circle", "dot", "bullet"]
}

Testing Icons

1. Visual check - Preview in browser via index.html
2. Thickness test - Verify icon looks good at various thicknesses
3. Size test - Check rendering at small (16px) and large (48px) sizes
4. Color test - Verify currentColor inheritance works