Icon Design: Creating Effective Icon Systems

24x24 grid: Standard UI icons (navigation, actions)
32x32 grid: Feature icons, empty states
48x48 grid: Illustrative icons, onboarding
64x64 grid: Hero sections, large displays

<!-- Before optimization: 2.4KB -->
<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 20h9"></path>
  <path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"></path>
</svg>

<!-- After optimization: 210 bytes -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <path d="M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/>
</svg>

// SVGO configuration for production icons
import { optimize } from 'svgo';

const optimizedSVG = optimize(rawSVG, {
  plugins: [
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeTitle',
    'removeDesc',
    'cleanupAttrs',
    'mergeStyles',
    'inlineStyles',
    'minifyStyles',
    'cleanupIds',
    'removeUselessDefs',
    'cleanupNumericValues',
    'convertColors',
    'removeUnknownsAndDefaults',
    'removeEmptyAttrs',
    'removeEmptyContainers',
    'mergePaths',
    'convertShapeToPath',
    'convertTransform',
    'removeUnusedNS',
    'sortAttrs',
    'removeDimensions',
  ],
});

.icon { color: var(--color-text-secondary); }
.icon--active { color: var(--color-primary); }
.icon--disabled { color: var(--color-text-disabled); }

<!-- Multi-color SVG with accessible fallback -->
<svg viewBox="0 0 24 24" role="img" aria-label="Verified">
  <circle cx="12" cy="12" r="10" fill="var(--color-success)" />
  <path d="M8 12l3 3 5-5" stroke="#fff" stroke-width="2" fill="none" />
</svg>

.icon {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

@media (max-width: 768px) {
  .icon {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }
}

@media (max-width: 480px) {
  .icon--nav {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }
}

<svg class="icon icon--settings" aria-hidden="true" width="24" height="24">
  <use href="/icons/sprite.svg#settings"></use>
</svg>

// Build script to generate SVG sprite
import fs from 'fs';
import { glob } from 'glob';

const icons = glob.sync('src/icons/*.svg');
const symbols = icons.map(file => {
  const content = fs.readFileSync(file, 'utf-8');
  const id = path.basename(file, '.svg');
  const viewBox = content.match(/viewBox="([^"]+)"/)?.[1] || '0 0 24 24';
  const paths = content.replace(/.*<svg[^>]*>/, '').replace(/<\/svg>.*/, '');
  return `<symbol id="${id}" viewBox="${viewBox}">${paths}</symbol>`;
});

const sprite = `<svg xmlns="http://www.w3.org/2000/svg">${symbols.join('')}</svg>`;
fs.writeFileSync('dist/icons.svg', sprite);

// Icon component with TypeScript support
import React from 'react';

interface IconProps extends React.SVGProps<SVGSVGElement> {
  name: keyof typeof ICON_PATHS;
  size?: number;
}

const ICON_PATHS = {
  settings: 'M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z',
  search: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z',
  // ... all icon paths
} as const;

export const Icon: React.FC<IconProps> = ({
  name, size = 24, className, ...props
}) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={2}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden={true}
    {...props}
  >
    <path d={ICON_PATHS[name]} />
  </svg>
);

{
  "deprecated": {
    "old-share": {
      "replacement": "action/share",
      "deprecated_in": "3.0.0",
      "removed_in": "4.0.0",
      "migration": "Replace `<Icon name=\"old-share\" />` with `<Icon name=\"action/share\" />`"
    }
  }
}

/* CSS icon animation for loading states */
.icon--spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon--hover-grow {
  transition: transform 0.2s ease;
}

.icon--hover-grow:hover {
  transform: scale(1.15);
}

{
  "icon": {
    "size": {
      "xs": { "value": "12px" },
      "sm": { "value": "16px" },
      "md": { "value": "24px" },
      "lg": { "value": "32px" },
      "xl": { "value": "48px" }
    },
    "stroke": {
      "light": { "value": "1.5px" },
      "regular": { "value": "2px" },
      "bold": { "value": "2.5px" }
    },
    "animation": {
      "hover": { "value": "200ms ease-out" },
      "enter": { "value": "300ms ease-out" }
    }
  }
}

action/settings       → Actions (verbs)
navigation/home       → Navigation (destinations)
status/check-circle   → Status (states)
file/document         → Content types
social/twitter        → Brand icons

<!-- Meaningful icon: provide aria-label -->
<button aria-label="Settings">
  <svg aria-hidden="true" width="24" height="24">
    <use href="#settings" />
  </svg>
</button>

<!-- Decorative icon: hide from screen readers -->
<svg aria-hidden="true" width="24" height="24">
  <use href="#decorative-icon" />
</svg>

// Figma plugin: batch export icons
figma.ui.onmessage = async (msg) => {
  if (msg.type === 'export-icons') {
    const nodes = figma.currentPage.selection;
    const exports = [];

    for (const node of nodes) {
      if (node.type === 'COMPONENT' || node.type === 'FRAME') {
        const svg = await node.exportAsync({
          format: 'SVG',
          contentsOnly: true,
        });
        exports.push({
          name: node.name,
          svg: String.fromCharCode(...new Uint8Array(svg)),
        });
      }
    }

    // Post back to UI for download
    figma.ui.postMessage({ type: 'icons-exported', exports });
  }
};

Request → Review → Design → Review → Approve → Export → Publish
  (1d)     (2d)      (3d)     (2d)      (1d)     (1d)     (1d)

{
  "name": "@company/icons",
  "version": "3.2.1",
  "changes": [
    "Added: 12 new payment method icons",
    "Updated: Settings icon (optical alignment fix)",
    "Removed: Deprecated share icons (use action/share instead)"
  ]
}

// A/B test icon recognition
const testConfig = {
  variants: [
    { name: 'settings-gear', recognition_rate: 0 },
    { name: 'settings-sliders', recognition_rate: 0 },
  ],
  participants: 50,
  task: 'Which icon would you click to change your preferences?'
};

describe('Icon component', () => {
  it('renders without crashing', () => {
    render(<Icon name="settings" />);
    expect(screen.getByRole('img')).toBeInTheDocument();
  });

  it('applies custom size', () => {
    render(<Icon name="search" size={32} />);
    expect(screen.getByRole('img')).toHaveAttribute('width', '32');
  });

  it('throws on invalid icon name', () => {
    expect(() => render(<Icon name="nonexistent" />)).toThrow();
  });
});

Style: Outlined (two-tone for status icons)
Grid: 24x24px with 2px padding
Stroke: 1.5px round cap, round join
Corner radius: 1.5px minimum
Fill: None (unless status icon)
Optical weight: Center shapes on pixel grid

// Icon component props documentation
interface IconDocs {
  name: string;       // Icon identifier from the icon set
  size?: number;      // Width and height in pixels (default: 24)
  color?: string;     // Icon color (default: currentColor)
  rotate?: number;    // Rotation in degrees (default: 0)
  flip?: 'h' | 'v';  // Horizontal or vertical flip
  animated?: boolean; // Enable hover animation
  className?: string; // Additional CSS classes
}

.button__icon {
  transition: transform 0.2s ease, color 0.2s ease;
}

.button:hover .button__icon {
  transform: scale(1.1);
}

.button:active .button__icon {
  transform: scale(0.95);
}

.button[disabled] .button__icon {
  opacity: 0.4;
  cursor: not-allowed;
}

{
  "icon": {
    "components": {
      "Icon": {
        "status": "published",
        "figma": "https://figma.com/file/.../icon-system",
        "storybook": "https://storybook.company.com/?path=/docs/icon--docs",
        "npm": "@company/icons",
        "version": "3.2.1"
      }
    }
  }
}

// package.json icon build script
{
  "scripts": {
    "icons:optimize": "svgo -f src/icons -o dist/icons",
    "icons:sprite": "node scripts/build-sprite.mjs",
    "icons:components": "svgr src/icons --out-dir src/components/icons",
    "icons:types": "node scripts/generate-icon-types.mjs",
    "icons:build": "npm run icons:optimize && npm run icons:sprite && npm run icons:components && npm run icons:types"
  }
}