SGDS Icon Component Skill

<sgds-icon> renders SVG icons from the SGDS built-in registry. Use it instead of <img> tags or external icon libraries when building with SGDS components.

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

Always provide name — it is required. The icon renders from the internal SVG registry. If the name is not found in the registry, a console warning is logged and nothing is rendered.

Which size?

• Inline with small text → xs or sm
• Inline with body text → md
• Default standalone icon → lg (default)
• Prominent feature icon → xl, 2-xl, or 3-xl