SVGs

The industry is moving toward Scalable Vector Graphics (SVGs) as the primary format for iconography.

Pros and Cons

Pros

• Images are vector format so they are crisp and clean at any size.
• They can be loaded as xml text files, and presented inline in HTML.
• Because they use standard CSS to color the elements of the graphic, they are able to be changed without changing the shape file itself - via Javascript or CSS.
• CSS hover states can be embedded directly into the SVG file.
• Editing can be done with a text editor or a code editor.
• SVG files can also be loaded as <img> images and recognized by all browsers.
• SVGs allow for <title> and <description> elements to be embedded within the images themselves, which simplifies accessibility.
• SVGs have a <symbol> element for embedding multiple symbols into a single SVG file and cleanly referencing those symbols throughout the rest of the page.

Cons

• Some very old browsers don't recognize SVG files and may not be sure what to do with them. Fallbacks need to be investigated.

Additional resources about SVGs

• anne's conference notes from An Event Apart Seattle 2017, where Chris Coyier gave a talk entitled 10 Things You Can And Should Do with SVGs.
• SVGOMG is a web-tool to help minify your SVG files. Make sure the toggles for removing <title> and <desc> aren't on!
• Tips for Creating Accessible SVG by Léonie Watson on Sitepoint
• Using ARIA to enhance SVG Accessibility by The Paciello Group
• Cascading SVG Fill Color by Chris Coyier - explains how to use currentColor as the fill color to pick up the current font color.
• Making the Switch Away from Icon Fonts to SVG by Sara Soueidan
• Illustrator's Export SVG Settings Explained by Val Head
• Styling SVG <use> Content with CSS by Sara Soueidan at Codrops explains how the Shadow DOM is used to manage SVG elements that are in an icon set.
• Accessible SVG Test Page on Web Overhauls
• The many ways to change an SVG fill on hover (and when to use them) by Cassie Evans at CSS-Tricks
• CSS Tricks forum post about SVG images on CSS-Tricks discusses a mobile Safari bug that prevents style="display: none" from working on SVGs so using <svg width="0" height="0"> on an SVG containing a symbol is the better bet.