DecisionUse SVGs for icons

Decision

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

Context

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

Consequences

Icons will be more accessible, performant, and attractive.