Icon Library System

Status: Complete Icon Collection
Version: 1.0.0
Verified: Optimized for production

Executive Summary

Icons speak louder than words—our icon system provides 200+ meticulously crafted symbols that communicate instantly across languages and cultures. Built for clarity at any size, our icons enhance usability while maintaining visual consistency.

Icon Philosophy

Icon Categories

Section 1: Icon Design System (800 words)

Grid & Construction

Our icons are built on a precise grid system ensuring pixel-perfect rendering at all sizes.

Systematic icon construction for consistent visual weight

Icon Grid Specifications

<!-- 24x24 Icon Grid Template -->
<svg viewBox="0 0 24 24" width="24" height="24">
  <!-- Live area: 20x20 (2px padding) -->
  <rect x="2" y="2" width="20" height="20" fill="none" stroke="#ddd" stroke-dasharray="1,1" opacity="0.5"/>
  
  <!-- Keyline shapes for consistency -->
  <!-- Circle: 20px diameter -->
  <circle cx="12" cy="12" r="10" fill="none" stroke="#ddd" opacity="0.3"/>
  
  <!-- Square: 18x18 -->
  <rect x="3" y="3" width="18" height="18" fill="none" stroke="#ddd" opacity="0.3"/>
  
  <!-- Horizontal rectangle: 20x16 -->
  <rect x="2" y="4" width="20" height="16" fill="none" stroke="#ddd" opacity="0.3"/>
</svg>

Visual Style Rules

/* Icon style constants */
.icon {
  --icon-size: 24px;
  --icon-stroke: 2px;
  --icon-color: currentColor;
  --icon-corner-radius: 2px;
  
  width: var(--icon-size);
  height: var(--icon-size);
  
  /* Ensure sharp rendering */
  shape-rendering: geometricPrecision;
  
  /* Consistent stroke */
  stroke: var(--icon-color);
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Filled icon variant */
.icon-filled {
  fill: var(--icon-color);
  stroke: none;
}

Size Variants

Optical Adjustments

// Icon optical corrections
const opticalAdjustments = {
  // Circles appear smaller, scale up slightly
  circle: { scale: 1.05 },
  
  // Triangles appear smaller, scale up more
  triangle: { scale: 1.1, translateY: -0.5 },
  
  // Horizontal rectangles need centering
  horizontal: { translateY: 0 },
  
  // Thin icons need thicker strokes
  thin: { strokeWidth: 2.5 }
};

Section 2: Core Icon Sets (700 words)

Navigation Icons

Essential icons for app navigation and user orientation.

Complete navigation icon set for intuitive wayfinding

Navigation Icon Examples

<!-- Menu icon -->
<svg class="icon icon-menu" viewBox="0 0 24 24">
  <path d="M3 12h18M3 6h18M3 18h18"/>
</svg>

<!-- Arrow right -->
<svg class="icon icon-arrow-right" viewBox="0 0 24 24">
  <path d="M5 12h14m-7-7l7 7-7 7"/>
</svg>

<!-- Home -->
<svg class="icon icon-home" viewBox="0 0 24 24">
  <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>

<!-- Search -->
<svg class="icon icon-search" viewBox="0 0 24 24">
  <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
</svg>

Action Icons

Icons representing user actions and interactions.

<!-- Edit -->
<svg class="icon icon-edit" viewBox="0 0 24 24">
  <path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
</svg>

<!-- Delete -->
<svg class="icon icon-delete" viewBox="0 0 24 24">
  <path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
</svg>

<!-- Share -->
<svg class="icon icon-share" viewBox="0 0 24 24">
  <path d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m9.632 6.316a3 3 0 11-5.367 2.684 3 3 0 015.367-2.684zm0-12.684a3 3 0 11-5.368-2.684 3 3 0 015.368 2.684z"/>
</svg>

Object Icons

Common objects and concepts used throughout the interface.

<!-- Email -->
<svg class="icon icon-mail" viewBox="0 0 24 24">
  <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>

<!-- Chart -->
<svg class="icon icon-chart" viewBox="0 0 24 24">
  <path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>

Section 3: Status & Feedback Icons (600 words)

Status Indicator Icons

Communicate system states and feedback clearly.

Status icons for clear system feedback

Status Icon Styles

<!-- Success -->
<svg class="icon icon-check-circle" viewBox="0 0 24 24">
  <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>

<!-- Error -->
<svg class="icon icon-x-circle" viewBox="0 0 24 24">
  <path d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>

<!-- Warning -->
<svg class="icon icon-exclamation" viewBox="0 0 24 24">
  <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>

<!-- Info -->
<svg class="icon icon-info-circle" viewBox="0 0 24 24">
  <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>

Loading & Progress

<!-- Animated spinner -->
<svg class="icon icon-spinner" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" opacity="0.25"/>
  <path d="M4 12a8 8 0 018-8" stroke="currentColor" stroke-width="4" fill="none" stroke-linecap="round">
    <animateTransform
      attributeName="transform"
      type="rotate"
      from="0 12 12"
      to="360 12 12"
      dur="1s"
      repeatCount="indefinite"/>
  </path>
</svg>

Section 4: Brand & Social Icons (500 words)

Social Media Icons

Platform-specific icons maintaining brand guidelines.

Official social media icons with brand compliance

Social Icon Implementation

<!-- Twitter/X -->
<svg class="icon icon-twitter" viewBox="0 0 24 24">
  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>

<!-- LinkedIn -->
<svg class="icon icon-linkedin" viewBox="0 0 24 24">
  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>

Section 5: Icon Implementation (400 words)

Icon Delivery Methods

Multiple implementation options for different use cases.

Icon Component

// React icon component
const Icon = ({ name, size = 24, color = 'currentColor', ...props }) => {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <use href={`#icon-${name}`} />
    </svg>
  );
};

// Usage
<Icon name="mail" size={20} color="blue" />

Accessibility

<!-- Decorative icon -->
<svg class="icon" aria-hidden="true">...</svg>

<!-- Meaningful icon -->
<button>
  <svg class="icon" aria-hidden="true">...</svg>
  <span class="sr-only">Send email</span>
</button>

<!-- Icon with visible label -->
<button>
  <svg class="icon" aria-hidden="true">...</svg>
  Send Campaign
</button>

Conclusion

Icons are the universal language of interfaces. Our comprehensive icon library ensures clear communication through consistent, accessible, and delightful visual symbols that enhance every interaction.

Next Steps

1. Review Motion Guidelines for icon animations
2. Download Icon Assets for implementation
3. Explore Component Library for icon usage

This icon library ensures visual communication remains clear, consistent, and culturally inclusive across NudgeCampaign.