Etsy moves away from an icon font in production to using SVG. It’s going to be an inline <svg> system, but abstracted as a <etsy-icon> custom element for ease of use.
Two cents:
- I could see the need for that abstraction going away if we had a more convient syntax for
<use>available, like:<svg use="icons.svg#cart" /> - I like how dedicated they are to icon consistency. I struggle with this a lot. An SVG icon process can be so easy to work with, and new icons so easy to find and drop in, that consistency can suffer. That grid, with the examples, is gold.
- They are still building an icon font as part of the build process, for the designers to use in design software.
That last one is surprising to me, as I would think it would be a pain in the butt to find the right icon to design with when the one you need is assigned to some random character in the font. I would think the concept of “Symbols” in Sketch or Illustrator would make the way to make those icons super easy to find and use for designers. Which makes me think what the font actually has to offer is interoperability between design software. I wonder if software like Lingo or Iconjar would be helpful here.
