8 ms·
Evil Icons – Lightweight SVG icons for your web project
- archagon 12y agoThese look great! Would work really well for iOS apps.
- GnarfGnarf 12y agoThey look clean and flat. I assume they can be scaled as well as change colour. The future of icons.
- pbhjpbhj 12y agoThey scale natively in the browser - the S, M, L buttons link to jQuery that adds classes .icon--m (or whatever) that alters the container size, the SVG scales to the size of the container.
- didgeoridoo 12y agoHaven't seen an icon set before with integrated "spinner" elements. Really helps keep the UI consistent (although I'm not sure about the oroborous-lookin' ei-spinner-3). I'd really love to see more icon sets take a stab at creating a coherent "look" like this one does.
- iliaznk 12y agoFont Awesome has one too.
- Kiro 12y agoHow does that work? I thought Font Awesome was a... font. How can it animate things?
- sciolistse 12y agothe font isn't animated, but font awesome's css file uses css transitions to rotate the icon element.
- mikewhy 12y agofont awesome has many utility CSS classes[1] [1]: http://fortawesome.github.io/Font-Awesome/examples/#spinning http://fortawesome.github.io/Font-Awesome/examples/#spinning
- danmaz74 12y agoFont awesome has spinners... :)
- baumgarn 12y agoThey lack a bit of contrast for my taste.
- MrBuddyCasino 12y agoNice work, I like them better than the Bootstrap Glyphicons - they're lighter and more elegant.
- akrakesh 12y agoPlug: Clear, a set of 500 icons in 3 variations (thin, thick and solid) comes in SVG too. http://appzgear.com/products/clear-icons-bundle.htm http://appzgear.com/products/clear-icons-bundle.htm
- rainmaking 12y agoAw, I was hoping for another iteration of these: http://nastyicons.com/ http://nastyicons.com/
- michaelhoffman 12y agoYeah, I too expected something more... "evil".
- TallGuyShort 12y agoA NSFW note would have been appreciated
- rainmaking 12y agoAh, nobody cares where I work so it didn't even cross my mind. Noted for future reference.
- organsnyder 12y agoNice to see SVG continuing to gain traction. I've almost entirely eliminated PNG from new work. For the (still fairly common) browsers that don't support SVG, I either use a simple bit of Javascript to replace the SVG references with PNG fallbacks, or—if the image is referenced via CSS—I can do it entirely with CSS's built-in fallback mechanism. So far, I've been using iconmonstr —http://iconmonstr.com/ http://iconmonstr.com/ —for my icon source. He has a large variety of high-quality icons available as SVG or PNG.
- im2w1l 12y agoMay I ask what the main reason you have switched is? Bandwidth? Easier on the [C/G]PU? Resolution indepencence?
- organsnyder 12y agoResolution independence is the main reason. No matter what the screen density, the images will look sharp. And, there's even the possibility that rendering engines can use their own tricks (such as sub-pixel rendering) to make it look even better (though I'm not sure if any browsers actually do this). File sizes can be better (though they're occasionally worse), and I'm not doing anything fancy enough to be straining any [CG]PU made in the past decade. Also, I really like the fact that the image format more closely represents the actual intent of the image creator. "Draw a line from [ax, ay] to [bx, by]" is much more accurate than "Draw a pixel at [ax, ay], then draw a pixel at [ax+1, ay+2], then draw a pixel..."
- Someone1234 12y agoFew do, but creating SVG on the fly is also much more straight forward than other formats (no need to learn a specific image library). I've seen people do graphing engines which generate an SVG graph. Although this benefit is a lot less beneficial now when we have canvas support in a lot of browsers. SVG is plain text XML after all. Not binary blobs.
- forrestthewoods 12y ago
- sdoering 12y agoWhat I really did non understand was the changing colors. It happened (by chance), while I was clicking (or so it seemed to me) and I wondered, what I had done, as the contrast really suffered from the light yellowish tone. I would have preferred a color selection method, that would allow me to choose, if I would want to change the color.
- outpunk 12y agoActually, we are changing color at the website only. Just to show that you can color the icons as you want.
- ash 12y agoIt's very painful to look at, please disable it. My brain was trying hard to figure out the color for about 20 seconds, before I realized the color is changing. Especially if I click S-M-L buttons at the moment color has changed.
- kaishiro 12y agoOn the contrary - I think it's neat, and pleasant to look at - not painful at all. Please leave it.
- brianzelip 12y agoI think the color transition is great. Keep it up!
- tempodox 12y agoI knew it. Evil Martians are among us and will eat us all! I love it.
- n0body 12y agolook nice, although the name puts me off a bit. i generally avoid using things that say they're evil, and i wouldn't enjoy talking to the bosses about using these.
- josteink 12y agoOn the download page: > Free ‘plug and play’ set of SVG icons designed specifically for web projects. Available as a Node.js package or a Ruby gem (for Rails). Just use icon names with your templates and styles — and all the rest will be done automagically. But I don't use node or Ruby. Where can I download them?
- lucideer 12y agoNot convenient, but it appears that the sources are here: https://github.com/outpunk/evil-icons/blob/master/app/views/evil_icons/_icons.html https://github.com/outpunk/evil-icons/blob/master/app/views/...
- outpunk 12y agoThe icons are compiled to an SVG sprite and this is the recommended way (The readme file contains the instructions). Anyway, you can download sources here https://github.com/outpunk/evil-icons/tree/master/icons-sources https://github.com/outpunk/evil-icons/tree/master/icons-sour... and separate SVG files here https://github.com/outpunk/evil-icons/tree/master/app/assets/images/evil-icons https://github.com/outpunk/evil-icons/tree/master/app/assets...
- blt 12y agoYou should put this information at the top of the readme.
- svgorgeous 12y agoYou might want to mention you are carefully working around a slew of webkit bugs. 1) Rather than efficiently referencing a single sprite.svg, the svg source must be inefficiently inlined, page after page. 2) Rather than use SVG's animated transforms, the spinners must be animated using CSS instead. Don't forget the CSS dependencies or the sprites won't animate! 3) Everything is flat. Not because that's the style, but because webkit won't properly render gradients, drop shadows, inner shadows, etc. https://bugs.webkit.org/show_bug.cgi?id=105904 https://bugs.webkit.org/show_bug.cgi?id=105904 But hey, at least webkit does kinda work with <use> that reference an external file. I just checked, and Chrome/blink doesn't work at all. It seems Firefox doesn't do animated transforms anymore. It did once. Opera (before it switched to blink rendering engine) was the only browser that worked nearly flawlessly with SVG. SVG would be so great, if it actually worked. Why do we need ruby/node to do this? See above.
- ferongr 12y agoei-spinner-3 bothers me somehow. It's like its center of rotation is not fixed... Unbalanced spinners looks really janky to my eyes.
- Gracana 12y agoI've seen that spinner before and I always felt it had a rotating quality rather than the nice transitioning/flowing quality that the others have. I think you're right, it's weird because it seems like it rotates eccentrically.
- marcosdumay 12y agoIt is eccentrical an not even round.
- Alex3917 12y agoI like these, but why not just host them on the noun project so they are more easily findable?
- SimeVidas 12y agoIt looks like you have to include the entire icon library into your web app (150KB from what I see in DevTools) in order to use this tool. If this is true, this is a big performance fail and the authors should provide a workflow for building custom assets that only include the icons that the web app intends to use.
- outpunk 12y agoExactly! We're going to make this feature soon.
- ctdonath 12y agoWhy "evil"? Words have meaning, and some words evoke reactions one doesn't want associated with one's product ("evil", "bad", "porn", "broken", ...).
- zamabe 12y ago"Sponsored by Evil Martians" They have a theme and the name made me interested.
- Hawkee 12y agoThese are quite nice. I was able to import the entire .svg set into icomoon and incorporate a select few into my icon set. The only issue is that they render slightly smaller than my normal icons, so I need to adjust the font size accordingly.
- davexunit 12y agoI was enticed by this, until I saw that the sources to this "free and open" icon set are in the proprietary Adobe illustrator format.
- romanshamin 12y ago@davexunit you’re absolutely right. We’re preparing the next list of download options: * SVG (optimized sprite) * Sketch * Illustrator CC * Illustrator CS Non-proprietary SVG will be available soon.
- davexunit 12y agoWow, awesome! Great to hear.
- outpunk 12y agoHere it is, you can download the SVG file now https://github.com/outpunk/evil-icons/tree/master/download https://github.com/outpunk/evil-icons/tree/master/download
- alimobrem 12y agoVery nice, thanks for sharing!
- willvarfar 12y agoI'm doing a web ui for a debugger and have been searching around for nice run, continue, step-in, step-over etc. Anyone have any ideas?
- anjit6 12y agoThanks for the repo.
- anjit6 12y agoThanks for the repo.
- blt 12y agoI thought this was going to be something funny like icons that take 10 seconds each to render. I guess SVG doesn't support procedural generation like Postscript, so there probably isn't any way to do that besides using huge files, which would be a dead giveaway.
- grumblestumble 12y agoI'm always confused by these very limited icon sets. It seems like every real-world project will immediately hit a wall where something basic isn't included. I'm using the commercial Streamline icon set (http://www.streamlineicons.com/ http://www.streamlineicons.com/) and run into limitations even with that.
- wuliwong 12y agoI guess you have to start somewhere? But you are correct, this is the reason I will not use this in my projects. I try to bookmark these projects and look back on their progress but I still just use fontawesome.
- bagrow 12y agoBummed that these icons don't show emacs being corrupted from within by the seductive allure of vim.
- krick 12y agoIndeed, that was my first association as well.
- sixQuarks 12y agoHow do you use this if you don't want to use Node or Ruby? Just HTML/CSS?
- dpcan 12y agoThere appears to be an AI file so you can just splice and export the icons I suppose.
- SuperKlaus 12y agoSee comment up here https://news.ycombinator.com/item?id=8735217 https://news.ycombinator.com/item?id=8735217
- outpunk 12y agoI've just made a grunt plugin for this https://github.com/outpunk/grunt-evil-icons https://github.com/outpunk/grunt-evil-icons
- krick 12y agoGuys, this is almost completely off-topic, but I need to ask. You see, I'm not a designer, so I have no idea how all this stuff is being made, but I somewhat can draw and lets imagine I found your project so inspiring that I'm ready to spend quite a lot of time working on unfamiliar ground in order to contribute. What should I do?