Archive for the ‘svg icons’ Category

Papercons

Posted on: No Comments
Bobby Grace, on the Dropbox Paper team: On the engineering side, we use inline SVGs. These have many advantages. One advantage is that SVG is a well-structured format that we can manipulate with code. Paper is also using React and has a component for i...

Preparing and Exporting SVG Icons in Sketch

Posted on: No Comments
There is an interesting gotcha about the fill-rule attribute of SVG, detailed here by Anthony Collurafici. Fill-Rule is an SVG property that basically defines how to determine what shapes are filled or subtracted from the shape. The default SVG value i...

The Road to SVG and Custom Elements in Clarity Icons

Posted on: No Comments
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...

Etsy’s Evolving Icon System

Posted on: No Comments
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 h...

$1,076,940

Posted on: No Comments
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 ...

Tips for Aligning Icons to Text

Icons. They're popular. They help complement content (most of the time). And yet they can be a pain in the neck. Once you've decided on a format (SVG or icon font?) and designed the set, there are still other considerations, many of which pop up while ...

How to work with SVG icons

Posted on: No Comments
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...