HuntExams Academy
HTML/CSSIntermediate#css#accessibility#svg

How do you make an SVG icon accessible and stylable with CSS?

Inline SVGs can be styled directly with CSS (fill, stroke) and given role='img' with aria-label, or aria-hidden='true' if purely decorative alongside visible text, unlike raster icon fonts which have accessibility drawbacks.

Example
<svg role="img" aria-label="Search" class="icon" width="24" height="24">
  <use href="#icon-search"></use>
</svg>
<style>.icon { fill: currentColor; } .icon:hover { fill: blue; }</style>

Related Questions

1
HTML/CSSAdvanced#css#responsive

What is the difference between em/rem and viewport-relative clamp() for fluid typography?

Open
2
HTML/CSSAdvanced#css#responsive

What are container queries and how do they differ from media queries?

Open
3
HTML/CSSIntermediate#css#performance

How do you prevent Cumulative Layout Shift (CLS) caused by images and ads?

Open