Designing Icon Systems

CSS
/* Base icon system setup */
:root {
  --icon-size-sm: 16px;
  --icon-size-md: 24px;
  --icon-size-lg: 32px;
  --stroke-weight: 1.5px;
  --corner-radius: 2px;
  --icon-color-primary: #1a1a1a;
  --icon-color-secondary: #666666;
}

.icon-24 {
  width: 24px;
  height: 24px;
  stroke-width: var(--stroke-weight);
  fill: none;
  stroke: currentColor;
}

Progress:

• Define style parameters (stroke, radius, colors, perspective)
• Set up 24px grid system with optical corrections
• Create base icon templates in Illustrator
• Export and optimize SVGs
• Document naming conventions
• Create usage guidelines for teams

1. Style Consistency Parameters

Stroke Weight: 1.5px for 24px icons, scale proportionally Corner Radius: 2px rounded corners, 1px for smaller details Color Palette:

• Primary: #1a1a1a (high contrast)
• Secondary: #666666 (supporting elements)
• Accent: Brand primary color
• States: Success #22c55e, Warning #f59e0b, Error #ef4444

Perspective Rules:

• Front-facing (no 3D perspective)
• Consistent light source (top-left)
• 45° angle for isometric elements only

2. Icon Grid System

24px base grid with 2px safe zones:

┌─────────────────────────┐
│ 2px │   20px   │ 2px   │
├─────┼─────────┼─────────┤
│ 2px │ CONTENT  │ 2px   │
├─────┼─────────┼─────────┤
│ 2px │   20px   │ 2px   │
└─────────────────────────┘

Optical Correction Zones:

• Allow 1px bleeding into safe zones for visual balance
• Circular icons can touch edges
• Vertical elements can extend slightly for optical alignment

3. Illustrator to SVG Export

Pre-export checklist:

• Expand all strokes to paths
• Remove hidden/empty layers
• Combine overlapping paths
• Set artboard to 24×24px

Export settings:

File → Export → Export for Screens
Format: SVG
Styling: Internal CSS
Font: Convert to Outlines
Images: Preserve
Object IDs: Layer Names
Decimal: 2
Responsive: ✓

Post-export optimization:

XML
<!-- Before -->
<svg width="24px" height="24px" viewBox="0 0 24 24">

<!-- After -->
<svg viewBox="0 0 24 24" fill="none">

4. Naming Conventions

Format: category-name-variant-size

Examples:

• navigation-arrow-right-24
• interface-close-outline-16
• communication-email-filled-32

Categories:

• navigation- (arrows, chevrons)
• interface- (buttons, controls)
• communication- (chat, email)
• data- (charts, tables)
• status- (success, error, loading)

Example 1: Navigation Arrow Input: Right-pointing arrow icon Output:

XML
<svg viewBox="0 0 24 24" fill="none">
  <path d="m9 18 6-6-6-6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Example 2: Status Icon Input: Success checkmark Output:

XML
<svg viewBox="0 0 24 24" fill="none">
  <path d="m9 12 2 2 4-4" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <circle cx="12" cy="12" r="9" stroke="#22c55e" stroke-width="1.5"/>
</svg>