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.
The Road to SVG and Custom Elements in Clarity Icons is a post from CSS-Tricks