Icons

Icons support recognition and comprehension. They are used sparingly and never as the sole carrier of information.

This section defines general rules for icon usage across the checkout. Component-specific icon usage is described in the relevant component sections.

Icon style

• Flat icons
• No shadows or decorative effects
• Clear, recognizable shapes

Sizes

Icon sizes are defined per usage context to ensure consistent alignment and touch target behavior.

Icons must not be resized outside of these definitions.

Payment method icons

• Fixed height: 40px
• Width: auto (maintain aspect ratio)

Inline / action icons

• Fixed size: 24×24px

Color usage

Icon colors follow functional color roles:

• Default: text color
• Muted: muted text color
• Interactive: primary color

Icons must meet non-text contrast requirements (3:1).

Accessibility

Icons are designed to support comprehension and must not replace text. Icons may be decorative or interactive. Decorative icons do not receive focus and do not convey essential information.

• Interactive icons are operable using a keyboard.
• Interactive icons have visible focus indicators.
• Decorative icons are hidden from assistive technology.

For general accessibility requirements, see Design Foundations