Html Code: Logos In Pure CSS

This was a purely for fun experiment, heavily inspired by the Twitter logo.
Rendering icons in pure CSS has its advantages. It allows programmers who aren't proficient in imaging programs like Photoshop to create high quality assets. It maintains image quality as it resizes, so it's not lossy on high density displays or zooms. It's readily available for modifications and tweaks, mitigating the bothersome back and forth with opening Photoshop and replacing an entire directory of assets. There are potential performance gains by letting your more than capable browser render a couple lines of code, mitigating additional network roundtrips for image fetching.
Of course, it also comes with some drawbacks. There's no lasso or magic brush tools handy in CSS, so even creating small 16x16 icons will be significantly slower than traditional methods. It will likely break on non-modern browsers. And even on modern browsers, there are often browser specific bugs that cause some fancy CSS rule to malfunction.