Making single color SVG icons work in dark mode

Remix Icon - Open source icon library

I love how easy it is to use these icons: you can copy and paste the SVG or even get it encoded as a data URL.

Basic Pattern Repository

A nice little collection of very simple—and very lightweight—SVGs to use as background patterns.

Swipey image grids.

This is how you write up a technique! Cassie takes an SVG pattern she used on the Clearleft “services” page and explains it in step-by-step detail, complete with explanatory animated diagrams.

Lea Verou on Twitter

Now that all modern browsers support SVG favicons, here’s how to turn any emoji into a favicon.svg:

<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100"> <text y=".9em" font-size="90"> 💩 </text> </svg>

Useful for quick apps when you can’t be bothered to design a favicon!

Accessible Icon Buttons — Sara Soueidan – Freelance-Front-End UI/UX Developer

Sara runs through the many ways of providing an accessible name to an icon button, backed up with Scott’s testing.