IconWrapper
A fixed-square container that renders a single glyph at a consistent optical size. Two axes: platform (iOS renders an SF Symbol glyph via a Text layer; Android renders a Material icon via an Outlined instance) and size (md 24pt, sm 16pt, xs 12pt).
Overview
A fixed-square container that renders a single glyph at a consistent optical size. Two axes: platform (iOS renders an SF Symbol glyph via a Text layer; Android renders a Material icon via an Outlined instance) and size (md 24pt, sm 16pt, xs 12pt).
The md variant.
Anatomy
- 1Container required Zero-padding, zero-radius frame sized exactly to the chosen size token. No background fill.
- 2Icon required iOS: Text layer rendering an SF Symbol glyph. Android: Instance of the Outlined icon component. Fill bound to color.content.primary.
Measurements
Specs
Values resolved live from the token spine. Token names follow the active platform; each links to its page.
Properties
The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.
Accessibility
Ensure a minimum 44 by 44pt tap target for any interactive instance, adding surrounding padding when the component itself is shorter. Keep text concise, and never rely on color alone to convey meaning; pair it with a label or an icon so the message survives for color-blind and low-vision users.
Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.