Evil Icons

Evil Icons is a set of SVG icons designed extensively for using in modern web projects. You can use it as-is, or try a Ruby gem (for Ruby on Rails) or a npm package. See the icons here.

Made by Alexander Madyankin and Roman Shamin. Sponsored by Evil Martians.

Usage

Rails

Add the 'evil_icons' gem to your Gemfile:

gem 'evil_icons'

Add the evil icons require to your application.css:

/*= require evil-icons */

Next, you have to render the evil-icons sprite in your template (or, in your layout):

<%= evil_icons %>

Finally, you can render the icon using the icon helper. Here are some examples:

<%= icon 'ei-search' %>
<%= icon 'ei-arrow-right', size: :m %>
<%= icon 'ei-envelope', size: :l, class: "custom-class" %>

npm

Add the 'evil-icons' package to your project:

npm install evil-icons

Add the evil icons styles to your pages:

<link rel="stylesheet" type="text/css" href="./node_modules/evil-icons/app/assets/stylesheets/evil-icons.css">

Require evil-icons in your JavaScript code:

var icons = require("evil-icons")

Finally, you can render the icons in your page using helpers. Here are some examples:

/* A string with SVG sprite */
icons.sprite;

/* Icons rendering */
icons.icon("ei-search");
icons.icon("ei-arrow-right", {size: "m"});
icons.icon("ei-envelope", {size: "l", class: "custom-class"});

Styling

Every icon has the .icon class and its modifier including the icon name. For example, the facebook icon has the .icon--ei-facebook modifier.

In addition, an icon may have a size modifier. But we do recommend to change the size using helper's size parameter instead. Evil icons have some predefined sizes: s (25x25, default), m (50x50), , l (100x100), xl (150x150) and xxl (200x200). You may want to add more sizes, we recommend to keep the sizes multiple to 50.

icons.icon("ei-arrow-right", {size: "m"})

Also you may want to add a custom class for an icon. You can do this using the class parameter:

icons.icon("ei-envelope", {class: "custom-class"})

An icon's color can be changed in CSS:

.icon {
  fill: green;
}
.icon--ei-facebook {
  fill: blue;
}

Roadmap

• Custom icons
• PSD/AI/Sketch for designers
• Grunt plugin
• Gulp plugin
• CDN version
• More styles