Category: svg icons

Solved With CSS! Colorizing SVG Backgrounds

CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we’re seeing some really creative solutions emerging. The possibilities are still being explored on what CSS can do to make writing UI’s simpler, and that’s exciting! One of those is now one ...

If You’re Inlining SVG Icons, How Do You Deal With Unique Titles and IDs?

Just inlining SVG seems to be the easiest and most flexible icon system. But that chunk of <svg> might have a <title>, and you might be appying IDs to both of those elements for various reasons. One of those reasons might be because you just want an ID on the icon to uniquely identify it for JavaScript or...

Papercons

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 inserting icons. They: Use a single Sketch file, checked into the r...

Preparing and Exporting SVG Icons in Sketch

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 is “nonzero”, and this is what Android requires. Unfortun...

The Road to SVG and Custom Elements in Clarity Icons

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 actual...

Etsy’s Evolving Icon System

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: <...

$1,076,940

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 R...

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 you’re coding. Here’s an excellent question...

How to work with SVG icons

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 ...