Home / Articles / Accessible SVG Icons With Inline Sprites Author Chris Coyier Comments Go to Comments Published Dec 7, 2018 Updated Dec 7, 2018 icon system icons SVG svg icons In-depth front-end engineering courses Direct Link → This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here's the ideal example: <button type="button"> Menu <svg class="svg-icon" role="img" height="10" width="10" viewBox="0 0 10 10" aria-hidden="true" focusable="false"> <path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"/> </svg> </button> Notes: It's not the <svg> itself that is interactive — it's wrapped in a <button> for that. The .svg-icon class has some nice trickery, like em-based sizing to match the size of the text it's next to, and currentColor to match the color. Since real text is next to it, the icon can be safely ignored via aria-hidden="true". If you need an icon-only button, you can wrap that text in an accessibily-friendly .visually-hidden class. The focusable="false" attribute solves an IE 11 bug. Plus a handy Pen to reference all the patterns.