SVGs

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

Pros and Cons

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.

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

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.