Cross-Platform Iconography Tokens Improve Legibility on Small Screens

Tech · 3 min read

The token set defines minimum sizes, stroke widths, and internal padding for icons used in different UI roles (navigation, action, status). When combined with adaptive tokens for scaling and spacing, icons maintain legibility even at high system zoom levels or when text-size settings are increased for accessibility.

Design systems have started using linter rules to reject icon usage that doesn't conform to tokens, preventing smaller icons with thin strokes from slipping into production. Documentation includes visual diffs showing how icons behave under extreme zoom and recommendations for using labels and redundant cues when icon-only UI would fail accessibility checks.

Engineers note a side benefit: these tokens reduce visual noise by enforcing consistent iconography weight and spacing, improving overall clarity for all users. Accessibility teams emphasize that tokens are a complement to, not a replacement for, user testing with low-vision participants.