Pure CSS GUI icons (experimental)

I don't get why this is "awesome".<p>CSS for icons is like HTML tables for markup. You have a path, split it to pieces you can represent with CSS using the methods you consider acceptable and draw a shape using ::before and ::after pseudo-elements.<p>Sure, those icons were carefully hand-crafted. This requires a lot of patient work, and this is admirable.<p>Yet, we have SVG for vector graphics. Embed it with data: URIs (I believe browsers who support CSS3 transforms can display SVG backgrounds) and that's it.

Loving this. Unicode has some awesome symbol dingbats (not just arrows, even weather symbols, coffee cups and the likes) for UI icons too but this goes a step further and is more stylish (plus Android fonts don't have most dingbats, not even the arrows -- not sure about iOS).

If you're looking for resizable icons that work in non-canvas non-SVG settings, putting those vectors in a webfont is a pretty good idea too.<p>Check out: <a href="http://pictos.drewwilson.com/" rel="nofollow">http://pictos.drewwilson.com/</a>

Yeah, as the opening paragraph of the article says, I did this just as 'an exercise in creative problem solving and working within constraints. This is not a "production ready" CSS icon set.'<p>Hopefully it's clear that it's not being presented as something to be used in production or instead of SVG/other more appropriate technologies.

Really hate to be, <i>that guy</i> but this was posted almost a year ago and got ~200pts.<p><a href="http://news.ycombinator.com/item?id=1921197" rel="nofollow">http://news.ycombinator.com/item?id=1921197</a>

I see no reason why you couldn't use canvas to generate icons as data URI's. Each icon could then be represented as a set of canvas drawing instructions, that could be pre-rendered, scaled for different devices/uses, cached, etc. I think that would be a better long-term solution.<p>Has anyone built something like this yet?

Weight is a non issue if you working on intranet sites. Or os applications.<p>And as others have pointed out, you can compress this file down to under 1k.<p>I like what I see. I'd love to have an icon set that didn't rely on images or "font-face" statements.

Just use Pictos.