icons

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.

High five to Dave Gandy and the Font Awesome team:

The Font Awesome 5 Kickstarter raised $1,076,940 with 35,549 backers, making it the most funded and most backed software Kickstarter of all time.

What's do the funders get? 1,000 more icons, icon font ligatures (a uniquely cool thing fonts can do, like turn "right arrow" into ➡, which can be an accessibility win), and, drum roll please, an SVG framework that will be open sourced.

Wenting Zhang created 512 (!) icons with just HTML and CSS. Usually just one element, the occasional extra element thrown in, and drawn with things like borders, backgrounds, and box-shadows.

Looks like the same bug bit Wenting that bit Nicolas Gallagher. Taking the shapes that CSS can make and combining them to draw.

Predictably, I'm going to point out that SVG would be a more-ideal tool for this. Less fragile, easier to maintain and style, scaleable, etc. I mention that not to take away from this impressive project, but because I'd love to see a similar project where the icons are drawn with hand-crafted paths and golfed.

Solid basics of an SVG icon system in this guide from Florens Verschelde, mixed with some good tricks: the two-color trick, pre-loading the sprite, and using custom properties for unlimited color variations. Also an interesting bit about using multiple methods for sprite insertion:

I like mixing both methods, building two sprites:

1. A small one with essential icons (e.g. main icons used in the page header), to be inlined on each page. Target size: 5KB or less.
2. A bigger one with all the project’s icons, kept as an external file. Target size: 50KB or less.

"Critical Icons", as it were.