
Evil Icons – Lightweight SVG icons for your web project - atemerev
http://evil-icons.io
======
josteink
On 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?

~~~
outpunk
May I ask you, what is the preferable method for you? We're going to make
Gulp/Grunt plugins and CDN version.

Also you can download .ai file here [https://github.com/outpunk/evil-
icons/raw/master/icons-sourc...](https://github.com/outpunk/evil-
icons/raw/master/icons-sources/evil-icons.ai). Or separate SVG files
[https://github.com/outpunk/evil-
icons/tree/master/app/assets...](https://github.com/outpunk/evil-
icons/tree/master/app/assets/images/evil-icons) Or compiled sprite
[https://github.com/outpunk/evil-
icons/blob/master/app/views/...](https://github.com/outpunk/evil-
icons/blob/master/app/views/evil_icons/_icons.html).

~~~
josteink
That's great stuff. That's what I'm looking for. Those links needs to be put
somewhere clearly on the page for people to find.

Right now anyone not using illustrator, node or rails is much more likely to
dismiss this as something not worth looking into.

~~~
outpunk
I'm going to move the stuff to a more obvious location, thanks.

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

~~~
forrestthewoods
What browsers don't support SVG?

~~~
outpunk
IE < 9 and Opera Mini [http://caniuse.com/#feat=svg-
html5](http://caniuse.com/#feat=svg-html5)

~~~
Someone1234
Opera Mini has a surprisingly high usage (over 5-8%!) I genuinely had no idea
it was so popular.

~~~
lysyi3m
Opera mini is very popular in the CIS countries =)

~~~
Someone1234
Is it something to do with the way it handles the Russian language(s)?

~~~
waspleg
Opera Mini goes through their own proxy essentially. Their goal was to
minimize mobile bandwidth but the net effect is bypassing censorship. I work
at a public high school and this browser is very popular with the kids on
their phones for this reason. There is a good article about it here
[http://en.wikipedia.org/wiki/Opera_Mini](http://en.wikipedia.org/wiki/Opera_Mini)

------
grumblestumble
I'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
I 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.

------
didgeoridoo
Haven'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
Font Awesome has one too.

~~~
Kiro
How does that work? I thought Font Awesome was a... font. How can it animate
things?

~~~
sciolistse
the font isn't animated, but font awesome's css file uses css transitions to
rotate the icon element.

------
ctdonath
Why "evil"? Words have meaning, and some words evoke reactions one doesn't
want associated with one's product ("evil", "bad", "porn", "broken", ...).

~~~
zamabe
"Sponsored by Evil Martians"

They have a theme and the name made me interested.

------
rainmaking
Aw, I was hoping for another iteration of these:

[http://nastyicons.com/](http://nastyicons.com/)

~~~
TallGuyShort
A NSFW note would have been appreciated

~~~
rainmaking
Ah, nobody cares where I work so it didn't even cross my mind. Noted for
future reference.

------
davexunit
I 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
@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
Wow, awesome! Great to hear.

------
krick
Guys, 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?

------
sdoering
What 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
Actually, we are changing color at the website only. Just to show that you can
color the icons as you want.

~~~
ash
It'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.

------
SimeVidas
It 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
Exactly! We're going to make this feature soon.

------
baumgarn
They lack a bit of contrast for my taste.

------
bagrow
Bummed that these icons don't show emacs being corrupted from within by the
seductive allure of vim.

~~~
krick
Indeed, that was my first association as well.

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

------
GnarfGnarf
They look clean and flat. I assume they can be scaled as well as change
colour. The future of icons.

~~~
pbhjpbhj
They 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.

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

------
akrakesh
Plug: 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)

------
willvarfar
I'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?

------
ferongr
ei-spinner-3 bothers me somehow. It's like its center of rotation is not
fixed... Unbalanced spinners looks really janky to my eyes.

~~~
Gracana
I'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.

------
MrBuddyCasino
Nice work, I like them better than the Bootstrap Glyphicons - they're lighter
and more elegant.

------
Alex3917
I like these, but why not just host them on the noun project so they are more
easily findable?

------
sixQuarks
How do you use this if you don't want to use Node or Ruby? Just HTML/CSS?

~~~
outpunk
I've just made a grunt plugin for this [https://github.com/outpunk/grunt-evil-
icons](https://github.com/outpunk/grunt-evil-icons)

------
tempodox
I knew it. Evil Martians are among us and will eat us all! I love it.

------
archagon
These look great! Would work really well for iOS apps.

------
alimobrem
Very nice, thanks for sharing!

------
anjit6
Thanks for the repo.

