The Road to SVG and Custom Elements in Clarity Icons

Avatar of Chris Coyier
Chris Coyier on

Another day, another design system deciding an SVG icon system is the way to go.

Everybody has their own set of considerations when making a choice like this. Scott Mathis documents the major considerations for Clarity: Opting-out, sizing, multi-colors, interactivity, scale, and the future. Based on these, they actually ended up on a custom element (<clr-icon>, which is inline <svg> under the hood), just like Etsy.

Direct Link →