The Three Semantic Patterns Every Developer Needs

Exact WCAG-compliant HTML for decorative, interactive icon-only, and standalone status SVGs
<!-- 1. Decorative icon beside visible text: hide the SVG completely -->
<a href="/billing">
  <svg aria-hidden="true" focusable="false" width="18" height="18" viewBox="0 0 24 24">...</svg>
  <span>Billing &amp; Invoices</span>
</a>

<!-- 2. Icon-only interactive button: label the <button>, hide the <svg> -->
<button type="button" aria-label="Close settings dialog">
  <svg aria-hidden="true" focusable="false" width="20" height="20" viewBox="0 0 24 24">...</svg>
</button>

<!-- 3. Non-interactive standalone status icon conveying meaning on its own -->
<svg role="img" aria-label="Build passed" width="20" height="20" viewBox="0 0 24 24">...</svg>

WCAG 1.4.11 Non-Text Contrast (3:1) and Target Size (2.5.8)

Under WCAG 2.1 Success Criterion 1.4.11, meaningful icons and interactive control boundaries must maintain at least a 3:1 contrast ratio against adjacent surface colors—a frequent failure when light-gray (#CBD5E1) icons sit on white inputs! Both SVG Nexus Studio's live WCAG meter and our Color Contrast Studio let you verify ratios before shipping. Under WCAG 2.2 SC 2.5.8, also ensure icon-only buttons provide at least a 24×24 CSS px hit box (44×44 px recommended on touchscreens) even when the visual SVG inside is 16×16 px.

Which Icons Should Mirror in Right-to-Left (RTL) Languages?

As detailed in SVG Nexus's accessible icons & RTL mirroring guide, mirror directional progress/navigation icons in Arabic, Hebrew, Urdu, and Persian ([dir="rtl"] .icon-directional { transform: scaleX(-1); })—such as back/forward arrows, pagination chevrons, reply/forward arrows, and bulleted list icons. Do NOT mirror checkmarks, clocks, magnifying glasses, media play/pause transport controls, or brand logos.