Icons

Icon set, sizing conventions, and usage guidelines for interface icons.

Icon Sizing

8 size tokens from 8px to 48px. Icons scale to match the visual weight of adjacent text.

xxs8pxicon-size/xxs

xs12pxicon-size/xs

sm16pxicon-size/sm

md20pxicon-size/md

lg24pxicon-size/lg

xl32pxicon-size/xl

2xl40pxicon-size/2xl

3xl48pxicon-size/3xl

Icon + Text Pairing

Sample text labelsm icon + Body S

Sample text labelmd icon + Body M

Sample text labellg icon + Body L

Usage Guidelines

Contrast Requirements

Decorative icons should meet 3:1 contrast ratio against their background. Informational icons (those conveying meaning without a text label) must meet 4.5:1. Use semantic colour tokens to ensure compliance across light and dark modes.

Touch Targets

Interactive icons must have a minimum 44×44px touch target, even if the visible icon is smaller. Use padding or an invisible hit area to meet this requirement. This follows WCAG 2.5.5 (AAA) for target size.

Icon Library Agnostic

Lexicon does not ship its own icon set. Components are designed to work with any icon library that supports SVG output at standard sizes. Recommended options:

LucidePhosphorHeroicons