SGDS Icon List Component Skill

<sgds-icon-list> renders a list where each item is prefixed by an <sgds-icon>. Use it for feature highlights, summaries, or any list that benefits from an icon prefix.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Each list item must be a <div role="listitem"> containing an <sgds-icon> followed by the item text.

Icon size is not managed automatically — set the icon size to match the list size:

• List size="sm" → use <sgds-icon size="md">
• List size="md" (default) → use <sgds-icon> (default lg)
• List size="lg" → use <sgds-icon size="xl">