{"id":13433355,"url":"https://github.com/evil-icons/evil-icons","last_synced_at":"2025-12-17T06:49:26.110Z","repository":{"id":22632935,"uuid":"25975629","full_name":"evil-icons/evil-icons","owner":"evil-icons","description":"Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN","archived":false,"fork":false,"pushed_at":"2021-10-19T14:41:11.000Z","size":27605,"stargazers_count":5034,"open_issues_count":26,"forks_count":218,"subscribers_count":111,"default_branch":"master","last_synced_at":"2025-11-24T02:17:29.717Z","etag":null,"topics":["evil-icons","icons","javascript","ruby","svg","svg-icons"],"latest_commit_sha":null,"homepage":"http://evil-icons.io","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/evil-icons.png","metadata":{"files":{"readme":"README.md","changelog":"Changelog.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-30T14:54:58.000Z","updated_at":"2025-11-20T16:33:07.000Z","dependencies_parsed_at":"2022-08-07T10:16:00.597Z","dependency_job_id":null,"html_url":"https://github.com/evil-icons/evil-icons","commit_stats":null,"previous_names":["outpunk/evil-icons"],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/evil-icons/evil-icons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evil-icons%2Fevil-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evil-icons%2Fevil-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evil-icons%2Fevil-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evil-icons%2Fevil-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evil-icons","download_url":"https://codeload.github.com/evil-icons/evil-icons/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evil-icons%2Fevil-icons/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27778831,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-17T02:00:08.291Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["evil-icons","icons","javascript","ruby","svg","svg-icons"],"created_at":"2024-07-31T02:01:24.592Z","updated_at":"2025-12-17T06:49:26.092Z","avatar_url":"https://github.com/evil-icons.png","language":"JavaScript","readme":"![](http://evil-icons.io/assets/images/evil-icons.png)\n\nFree ‘plug and play’ set of SVG icons designed specifically for web projects. Available as a Ruby gem, a Node.js package and \n\n/Gulp plugins. Just use icon names with your templates and styles — and all the rest will be done automagically.\n\n[evil-icons.io](http://evil-icons.io)\n\nMade by [Alexander Madyankin] and [Roman Shamin].\n\n\u003ca href=\"https://evilmartians.com/?utm_source=evil-icons\"\u003e\n\u003cimg src=\"https://evilmartians.com/badges/sponsored-by-evil-martians.svg\" alt=\"Sponsored by Evil Martians\" width=\"236\" height=\"54\"\u003e\n\u003c/a\u003e\n\n[Alexander Madyankin]:  https://twitter.com/madyankin\n[Roman Shamin]:         https://twitter.com/romanshamin\n\n## Usage\n\n* [Supported browsers](#supported-browsers)\n* [Grunt](#grunt)\n* [Gulp](#gulp)\n* [CDN](#cdn)\n* [Rails](#rails)\n* [Sinatra](#sinatra)\n* [Middleman](#middleman)\n* [npm](#npm)\n* [React](#react)\n* [Styling](#styling)\n\n### Supported browsers\nWe support IE 9+, Firefox, Chrome, Safari (desktop and mobile), Opera, Android 4+.\nhttp://caniuse.com/#search=inline%20svg\n\n### Grunt\nUse the [Grunt plugin](https://github.com/evil-icons/grunt-evil-icons)\n\n### Gulp\nUse the [Gulp plugin](https://github.com/evil-icons/gulp-evil-icons)\n\n### CDN\n\nJust include the assets into your page from CDN:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/evil-icons@1.9.0/assets/evil-icons.min.css\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/evil-icons@1.9.0/assets/evil-icons.min.js\"\u003e\u003c/script\u003e\n```\n\n\nAnd use the icons like this:\n\n```html\n\u003cdiv data-icon=\"ei-archive\"\u003e\u003c/div\u003e\n\u003cdiv data-icon=\"ei-chart\" data-size=\"s\"\u003e\u003c/div\u003e\n\u003cdiv data-icon=\"ei-check\" data-size=\"m\"\u003e\u003c/div\u003e\n\u003cdiv data-icon=\"ei-spinner\" data-size=\"m\"\u003e\u003c/div\u003e\n\u003cdiv data-icon=\"ei-cart\" data-size=\"l\" class=\"foo\"\u003e\u003c/div\u003e\n```\n\n### Rails\n\nAdd the `'evil_icons'` gem to your Gemfile:\n```ruby\ngem 'evil_icons'\n```\n\nAdd the Evil Icons require to your `application.css`:\n```css\n/*\n *= require evil-icons\n */\n```\n\nNext, you have to render the evil-icons sprite in your template (or, in your layout):\n```erb\n\u003c%= evil_icons_sprite %\u003e\n```\n\nFinally, you can render the icon using the `evil_icon` helper.\nHere are some examples:\n```erb\n\u003c%= evil_icon 'ei-search' %\u003e\n\u003c%= evil_icon 'ei-arrow-right', size: :m %\u003e\n\u003c%= evil_icon 'ei-envelope', size: :l, class: \"custom-class\" %\u003e\n```\n\n\n### Sinatra\n\nAdd the `'evil_icons'` gem to your Gemfile:\n```ruby\ngem 'evil_icons'\n```\nAnd require it:\n```\nrequire 'evil_icons'\n```\n\nAdd the helpers to your application:\n```ruby\nhelpers EvilIcons::Helpers\n```\n\nNext, you have to render the evil-icons sprite in your template (or, in your layout):\n```erb\n\u003c%= evil_icons_sprite %\u003e\n```\n\nFinally, you can render the icon using the `evil_icon` helper.\nHere are some examples:\n```erb\n\u003c%= evil_icon 'ei-search' %\u003e\n\u003c%= evil_icon 'ei-arrow-right', size: :m %\u003e\n\u003c%= evil_icon 'ei-envelope', size: :l, class: \"custom-class\" %\u003e\n```\n\nIn order to use the stylesheets, you have to add Sprockets to your application.\nAdd `sinatra-asset-pipeline` to your Gemfile:\n```ruby\ngem 'sinatra-asset-pipeline'\n```\n\nAnd register it:\n```ruby\nrequire 'sinatra/asset_pipeline'\nregister Sinatra::AssetPipeline\n```\n\nFinally, add the Evil Icons require to your `application.css`:\n```css\n/*\n *= require evil-icons\n */\n```\n\nAlso, you can take a look at [example app](https://github.com/aderyabin/evil_icons_sinatra_example/) by [@aderyabin](https://github.com/aderyabin).\n\n\n### Middleman\n\nAdd the `'evil_icons'` gem to your Gemfile:\n```ruby\ngem 'evil_icons'\n```\n\nAdd the Evil Icons require to your main css file eg.\n`source/stylesheets/styles.css``:\n\n```css\n/*\n *= require evil-icons\n */\n```\n\nAdd following to your `config.rb` to register Evil Icons helpers:\n\n```ruby\nrequire 'evil_icons'\nhelpers EvilIcons::Helpers\n\nafter_configuration do\n  sprockets.append_path(EvilIcons.assets_dir)\nend\n```\n\nNext, you have to render evil-icons sprite in your layout similar to the\n[Rails usage](#rails):\n\n```erb\n\u003c%= evil_icons_sprite %\u003e\n```\n\nAnd finally `evil_icon` helper renders icons just like with the [Rails](#rails):\n\n```erb\n\u003c%= evil_icon 'ei-search' %\u003e\n\u003c%= evil_icon 'ei-arrow-right', size: :m %\u003e\n\u003c%= evil_icon 'ei-envelope', size: :l, class: \"custom-class\" %\u003e\n```\n\n\n## npm\n\nAdd the `'evil-icons'` package to your project:\n```bash\nnpm install evil-icons\n```\n\nAdd the Evil Icons styles to your pages:\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"./node_modules/evil-icons/assets/evil-icons.css\"\u003e\n```\n\nRequire `evil-icons` in your JavaScript code:\n```js\nvar icons = require(\"evil-icons\")\n```\n\nFinally, you can render the icons in your page using helpers.\nHere are some examples:\n```js\n/* A string with SVG sprite */\nicons.sprite;\n\n/* Icons rendering */\nicons.icon(\"ei-search\");\nicons.icon(\"ei-arrow-right\", {size: \"m\"});\nicons.icon(\"ei-envelope\", {size: \"l\", class: \"custom-class\"});\n```\n\n### React\nUse the [React component](https://github.com/saulhoward/react-evil-icons).\n\n### Styling\n\nEvery icon has the `.icon` class and its modifier including the icon name. For example, the Facebook icon has the `.icon--ei-sc-facebook` modifier.\n\nAlso, 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` (50×50), `l` (100×100), `xl` (150×150) and `xxl` (200×200). You may want to add more sizes, we recommend keeping the sizes multiple to 25.\n```js\nicons.icon(\"ei-arrow-right\", {size: \"m\"})\n```\n\nAlso, you may want to add a custom class for an icon.\nYou can do this using the `class` parameter:\n```js\nicons.icon(\"ei-envelope\", {class: \"custom-class\"})\n```\n\nAn icon's color can be changed in CSS:\n```css\n.icon {\n  fill: green;\n}\n.icon--ei-sc-facebook {\n  fill: blue;\n}\n```\n\n\n## Roadmap\n* Custom icons\n* More styles\n","funding_links":[],"categories":["Ruby","JavaScript","Инструменты разработчика","Happy Exploring 🤘","\u003e 3k ★","javascript","General","Generic"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevil-icons%2Fevil-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevil-icons%2Fevil-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevil-icons%2Fevil-icons/lists"}