Icon Development Skill

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

Icon Requirements

SVG Specifications

Property	Value
ViewBox	`0 0 24 24` (standard)
Fill	`none` (stroke-based icons)
Stroke	`currentColor`
Stroke Width	`2` (default)
Stroke Linecap	`round`
Stroke Linejoin	`round`

Path Guidelines

•Use single path when possible - Simpler paths are easier to render
•Optimize coordinates - Round to 1-2 decimal places
•Center the icon - Keep equal padding on all sides
•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

<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

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

bash

npm run build
npm run docs:dev

Path Optimization

Remove Unnecessary Precision

Before:

code

M12.000000 2.000000L2.000000 7.000000

After:

code

M12 2L2 7

Combine Continuous Paths

Before:

code

M5 5L10 5 M10 5L15 5

After:

code

M5 5L15 5

Use Relative Commands

Before:

code

M5 5L10 10L15 5

After:

code

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:

json

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

Custom Properties

Override defaults when needed:

json

{
  "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

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