DecisionUse SVGs for icons


Using SVGs for icons has the best display, performance, and accessibility


Icons will use SVGs, either inline or with the symbol tag, instead of an <img> tag or an icon font.


SVGs provide the best display, performance, and accessibility for icon graphics, or any graphics that use simple geometric shapes.

This is because SVGs are:

  1. Resolution independent, so they always look the same on any screen or zoom level
  2. Fully accessible, allowing authors to adapt the material to the context
  3. Can be fully styled from CSS (if inlined or included via <symbol>)
  4. Part of the page, not requiring additional network requests (if inlined or included via <symbol>)
  5. Preferred by the W3C


Icons will be more accessible, performant, and attractive.

Chris DeLuca, Javier Reartes, Kat Shaw, Cristina Chumillas

Decided on