Icon Size Tokens

Icon size tokens establish consistent dimensions for iconography across a design system. Icons appear in countless contexts: buttons, navigation, lists, cards, and standalone decorations. Without tokenized sizing, icon dimensions vary unpredictably, creating visual inconsistency and alignment challenges. Icon size tokens ensure icons scale appropriately and align with surrounding elements.

What Are Icon Size Tokens

Icon size tokens are design tokens that define the dimensions at which icons render. Since most icons are square, a single size value typically defines both width and height. These tokens ensure icons maintain consistent sizing across the system and relate proportionally to text and other elements.

Icon size tokens often correlate with typography sizes, ensuring icons complement text at various scales.

How Icon Size Tokens Work

Icon size token systems define a scale of dimensions:

{
  "icon": {
    "size": {
      "xs": { "value": "12px" },
      "sm": { "value": "16px" },
      "md": { "value": "20px" },
      "lg": { "value": "24px" },
      "xl": { "value": "32px" },
      "2xl": { "value": "48px" }
    }
  }
}

Semantic icon size tokens map to usage contexts:

{
  "icon": {
    "size": {
      "inline": { "value": "{icon.size.sm}" },
      "button": { "value": "{icon.size.md}" },
      "navigation": { "value": "{icon.size.lg}" },
      "hero": { "value": "{icon.size.2xl}" }
    }
  }
}

CSS application:

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

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

SVG icons often use viewBox for scalability:

<svg viewBox="0 0 24 24" width="var(--icon-size-md)" height="var(--icon-size-md)">
  <!-- icon path -->
</svg>

Key Considerations

• Icon sizes should align with the typographic scale for visual harmony
• Touch targets may require larger clickable areas than visual icon size
• Icons in buttons need appropriate sizing relative to button dimensions
• Inline icons should vertically align with adjacent text
• Icon sets may be designed for specific optical sizes
• SVG scaling preserves quality; raster icons need size-specific assets
• Line weight consistency matters when scaling stroke-based icons
• Responsive scaling may be needed for different viewport contexts

Common Questions

How should icon sizes relate to typography?

Icons appearing alongside text should size proportionally to maintain visual balance.

A common approach sizes icons relative to the text’s x-height or cap-height:

Text size: 16px → Icon size: 16-20px
Text size: 14px → Icon size: 14-16px
Text size: 20px → Icon size: 20-24px

The relationship is not strictly 1:1 because icons often benefit from being slightly larger than text to achieve visual balance.

Mapping typography tokens to icon sizes:

{
  "icon": {
    "size": {
      "body": { "value": "20px" },  // For 16px body text
      "caption": { "value": "16px" },  // For 12px caption text
      "heading": { "value": "24px" }  // For heading contexts
    }
  }
}

Vertical alignment requires additional consideration. Icons may need slight vertical offset to align optically with text baselines:

.icon-inline {
  vertical-align: -0.125em; /* Slight adjustment for optical alignment */
}

How should icon touch targets be handled?

Touch targets should be at least 44x44 pixels (per WCAG guidelines) regardless of visual icon size. A 16px icon still needs an adequate touch area.

Separate visual and touch sizing:

.icon-button {
  /* Visual icon size */
  .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  /* Touch target */
  min-width: 44px;
  min-height: 44px;
  padding: 14px; /* (44 - 16) / 2 */
}

Token systems can include touch target values:

{
  "touchTarget": {
    "min": { "value": "44px" }
  }
}

Interactive icons should always meet minimum touch target requirements even when visual size is smaller.

How do optical size variants affect icon tokens?

Some icon sets provide optical size variants optimized for different display sizes. A 16px variant has different stroke weights and detail levels than a 48px variant.

Icons designed for small sizes typically have:

• Thicker strokes for visibility
• Simplified details
• Adjusted proportions

Icons designed for large sizes typically have:

• Thinner strokes for elegance
• Additional details
• More precise proportions

Token systems should account for optical variants:

{
  "icon": {
    "size": {
      "sm": {
        "value": "16px",
        "opticalSize": "16"
      },
      "lg": {
        "value": "24px",
        "opticalSize": "24"
      },
      "xl": {
        "value": "48px",
        "opticalSize": "48"
      }
    }
  }
}

Icon components use both the rendering size and optical size to select the appropriate variant:

<Icon name="search" size="lg" /> // Uses 24px optical variant at 24px

Not all icon sets provide optical variants. When using a single-variant icon set, consider whether extreme scaling (very small or very large) produces acceptable results.

Summary

Icon size tokens establish consistent iconography dimensions across design systems. Scales provide a vocabulary of sizes while semantic tokens map to specific contexts. Icon sizes should relate to typography for visual harmony. Touch target requirements may exceed visual icon size, requiring separate handling. Optical size variants, when available, ensure icons render well across the size range. Proper icon sizing contributes significantly to interface polish and usability.