Icons

Icons can be included as one big sprite or individually from CDN.

we should clarify / make consistent different arrows and triangles for direction V. disclosure.

All icons are based on a stroke width that matches the SMG Sans font.

Based on a 24px em-square, & therefore 24px base square icon, The original stroke widths are:

• Bold: 3.33
• Regular: 2.25
• Light: 1.6

However, all icons are exported outlined to a single path without stroke, and without a specified fill colour, so the default fill (black) can be overridden with css fill: #f00 or generally, even simpler, it will inherit: fill: currentColor;.

TODO: symbol aliases for e.g. youtube -> video. Both collections and wordpress require icons named after different data IDs

Usage

There is a sprite version that compiles all the icons into one svg that can be used via ‘svg use symbol’ - but if you don’t have need for all the icons, it might be just as easy to include inline the ones you want, or use svg-sprite to re-sprite the ones you need along with other assets. They’re all pretty tiny files, so shouldn’t massively bloat html that way.

Matching text size:

Wrap in

.u-icon

here is an icon inline

here is an icon inline

It should line up with the baseline, but I still think there’s something weird with the font metrics that also causes the misalignment in Windows browsers