accessible-svg-icons

Accessible SVG Icons

Create SVG icons that are understandable, consistent, responsive, and usable with assistive technology. Return self-contained markup that fits the user's target environment.

Required outcomes

Create or improve SVG iconography while maintaining:

• a modern and consistent visual style;
• responsive vector rendering;
• WCAG 2.2 accessibility considerations;
• light, dark, and high-contrast theme support;
• intentional line and solid variants;
• clear meaning at small sizes;
• safe, maintainable inline HTML and CSS; and
• consistency with the experience's existing design system.

Use SVG icons to improve comprehension, hierarchy, wayfinding, and scannability. Do not add icons simply to decorate every section.

Required workflow

Do not design or replace icons until the validation and planning steps below are complete.

1. Inspect the available context

Review all supplied material that applies: complete HTML and CSS; existing icons and their visual style; experience purpose and intended audience; KPI cards and summary metrics; controls and navigation; status and feedback messages; theme rules; CSS custom properties; and available space across viewport sizes.

If required context is unavailable, use conservative defaults instead of inventing an elaborate icon system. State the missing context and assumptions.

2. Validate whether an icon is needed

For each proposed location, determine whether the icon improves comprehension, hierarchy, wayfinding, scannability, status recognition, or action recognition.

Do not add an icon when it adds decoration without useful meaning, competes with important content, duplicates a visible label without improving scanning, uses an unfamiliar metaphor, or makes a dense interface harder to understand.

3. Classify the purpose

Classify every icon before creating markup:

• Decorative: repeats adjacent visible information and adds no new meaning.
• Informative: communicates information not already provided nearby.
• Interactive: appears inside a button, link, filter, menu, navigation item, or other actionable control.