A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.

Overview

Eva Icons

Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally, Eva Icons supports 4 animation types: zoom, pulse, shake and flip. Download on desktop to use them in your digital products for Web, iOS and Android. Icons are provided in two visual types: Fill and Outline and in several formats, including PNG, SVG, font, Sketch, etc.

Download

CDN

Load from CDN in your project:

<script src="https://unpkg.com/eva-icons"></script>

After including the script, eva will be available as a global variable.

NPM

  • Install the package:
npm i eva-icons
  • Include it to your page:
<script src="path/to/dist/eva-icons.js"></script>
  • Or require the package (may vary depending on your build system):
const eva = require('eva-icons');
import * as eva from 'eva-icons';

How to use

JavaScript

  • Add the data-eva attribute with the icon name to an element:
<i data-eva="github"></i>
  • Call eva.replace(); to replace all elements with the data-eva data attribute with SVG elements. You can also pass some additional parameters to the replace method to modify the replace function behavior.
<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/eva-icons"></script>
  <body>
  
    <i data-eva="github"></i>

    <script>
      eva.replace()
    </script>
  </body>
</html>

Thanks to Feather Icons for the build process inspiration.

  • Additional attributes:
    • data-eva-fill: set icon color
    • data-eva-height: set icon height
    • data-eva-width: set icon width
    • data-eva-animation: set icon animation
<i data-eva="github" data-eva-fill="#ff0000" data-eva-height="48" data-eva-width="48"></i>

Fonts

Eva Icons are also available as a Web Font.

  • Include the font css into your page:
<link href="path/to/style/eva-icons.css">
  • Add eva and eva-icon classes to an element:
<i class="eva eva-github"></i>

We recommend using SVG icons due to better rendering and performance capabilities, more details.

Documentation

eva.replace(options)

Replaces all elements that have a data-eva attribute with SVG markup.

options optional object.

Available 'option' properties:

Name Type Default value Description
fill string none Icon color
width string or number 24px Icon width
height string or number 24px Icon height
class string none Custom css class
animation object none Icon animation

Animation

  • Add the data-eva-animation attribute with the animation type (zoom, pulse, shake and flip) to an element:
<i data-eva="github" data-eva-animation="zoom"></i>
  • Additional animation attributes:
    • data-eva-hover: Makes the animation available on hover. Default value is true. Available true or false.
    • data-eva-infinite: Makes the animation infinite. Default value is false. Available true or false.
<i data-eva="github" data-eva-animation="zoom" data-eva-hover="false" data-eva-infinite="true"></i>

Note: In the above example github icon will be always animated. This type of animation will be applied only to current icons.

  • Pass animation as property in a eva.replace method.
eva.replace({
  animation: {
    type: string, // zoom, pulse, shake, flip
    hover: boolean, // default true
    infinite: boolean, // default false
  }
});

Note: The animation will be applied to all replaced elements.

  • Add eva-parent-hover class to the parent container in a case you want to activate the animation hovering on the parent element.
<div class="eva-parent-hover">
  <i data-eva="github" data-eva-animation="zoom"></i>
  Zoom animation
</div>

3rd party implementations

License

MIT license.

More from Akveo

  • Nebular - Angular Components, Auth and Security
  • ngx-admin - the best Angular admin template

How can I support the developers?

  • Star our GitHub repo
  • Create pull requests, submit bugs, suggest new features or documentation updates 🔧
  • Follow us on Twitter 🐾
  • Like our page on Facebook 👍

From Developers

Made with ❤️ by Akveo team. Follow us on Twitter to get the latest news first! We're always happy to receive your feedback!

Issues
  • How I can use in react?

    How I can use in react?

    I see the icons can be installed as an npm package but it doesn't have any example on how to use it in a frameworks. Ex. React, Vue, Angular.

    question faq 
    opened by zexingguo 8
  • CDN is not working

    CDN is not working

    The server responded with a status of 404 ()

    opened by danramzdev 5
  • Where's the CSS file if I want to use Icon Font

    Where's the CSS file if I want to use Icon Font

    I'm not using React or Webpack, sadly, I want to use SVG but turned out icon font would be better option. Browsed the folders, I got the question.

    Lovely icons BTW.

    question faq 
    opened by jiyinyiyong 4
  • Scissors icon?

    Scissors icon?

    Hi, amazing work!

    would you be able to add a scissors icon to go along with the clipboard and copy icon to make cut?

    thank you very much in advance

    opened by Leone25 2
  • How do I change color of icons?

    How do I change color of icons?

    Sorry I'm not that familiar to SVG icons. I looked into docs and noticed they are styled with CSS like stroke: #aaf;. Each SVG file contains <defs> which has a <style> element like:

    <style>.cls-1{fill:#231f20;}.cls-2{fill:none;opacity:0;}</style>
    <style>.cls-1{fill:#fff;opacity:0;}.cls-2{fill:#231f20;}</style>
    <style>.cls-1{fill:none;opacity:0;}.cls-2{fill:#231f20;}</style>
    <style>.cls-1{opacity:0;}.cls-2{fill:#fff;}.cls-3{fill:#231f20;}</style>
    

    I could think of removing those styles and add my own in parent elements. But what's the suggested solution for styling them?

    BTW, I'm doing experiments currently to see if I can use them in my projects(or I may just fallback to fonts) https://github.com/Respo/respo-eva/blob/master/icons/eva/icons.cljs#L9-L14

    question faq 
    opened by chenyong 2
  • PNGs are zero bytes

    PNGs are zero bytes

    Hey, nothing much to say besides that the "Complete Eva Icons Package" containing both PNGs and SVGs contain broken PNGs. Every single PNG icon is 0 bytes. Downloading the specific PNGs yields the same result.

    opened by marhaupe 2
  • add a new icon: shirt

    add a new icon: shirt

    opened by rafaelcavalcante 2
  • How can i use an animation with JS?

    How can i use an animation with JS?

    Hello. first of all, it's good library the evaicons.

    I have one question, how can i use an animation ( available 4 types ) with JS?

    question faq 
    opened by kei0719 2
  • Is this just a fork of Feather?

    Is this just a fork of Feather?

    Hey!

    I love the look of these icons – seems like all the packaging process is from Feather though? Might be worth linking back to that repo.

    question 
    opened by ColeTownsend 2
  • Third party extension added in README

    Third party extension added in README

    opened by piyushmaurya23 1
  • fix: fix horizontal icons attribute spelling

    fix: fix horizontal icons attribute spelling

    The spelling of the file name was already fixed in #31 but the spelling of the svg-attributes is still incorrect. These attributes are used by other projects like https://github.com/antonreshetov/vue-eva-icons and therefore the icon name more-horizontal does not exist.

    opened by JannikApm 1
  • Is this repository no longer supported?

    Is this repository no longer supported?

    Is this repository no longer supported?

    opened by sergeu90 0
  • [Request] Sort icon

    [Request] Sort icon

    Hi, this is the best icons library and I love it!

    In my current project I want to use an sort icon, something like this: https://fontawesome.com/icons/sort?style=solid

    Thank you so much.

    opened by srizzon 0
  • Icon request: emoji

    Icon request: emoji

    Please add an emoji icon. Something that could be used to trigger en emoji picker. The smiling face icon could do it https://github.com/akveo/eva-icons/blob/master/package/icons/outline/svg/smiling-face-outline.svg Maybe add a small plus (+) sign.

    opened by nicolasparada 0
  • Icon Request: Bank Icon

    Icon Request: Bank Icon

    Icon to represent a bank.

    Usually looks like an institution building with three pillars, e.g. https://materialdesignicons.com/icon/bank

    opened by Samrose-Ahmed 0
  • Request: Icon for changing language

    Request: Icon for changing language

    We need a better icon for changing language in a project that is currently using Eva. The most suitable icon right now in the Eva collection is perhaps the globe, but a globe can just as well (and, I think, more often) mean "change region".

    Something like this would be nice. I personally prefer the "A文" symbol, but a globe in a balloon, or a globe combined with some other symbol signaling language, would be okay as well. A balloon by itself signals "chat" to me, and sound waves signal "text to speech" or "listen", so we should be careful with those.

    image

    image

    image

    image

    opened by zhouhana 0
  • No proper documentation to add custom svg icons

    No proper documentation to add custom svg icons

    I want to add my customs SVG icons. But, I cannot find any proper guide or documentation to do so. For example Whatsapp, Instagram etc icons missing

    opened by hexdecimal16 1
  • Link to Twitter profile on akveo.github.io/eva-icons is broken

    Link to Twitter profile on akveo.github.io/eva-icons is broken

    opened by ilDon 0
  • Suggestion: tree-shakable icons

    Suggestion: tree-shakable icons

    The final size of pack has a significant impact at application bundle size. It would make a great impact if we can implement tree-shakable icons using svg-to-ts for example.

    https://www.npmjs.com/package/svg-to-ts

    opened by rmlira 1
Releases(v1.1.3)
Owner
Akveo
Akveo is a devoted team of engineers, consultants and designers. We'll help you envision, build, and optimize cutting-edge digital products and solutions.
Akveo
Galio is a beautifully designed, Free and Open Source React Native Framework

Galio Galio is one of the coolest UI libraries you could ever use, licensed under MIT. Carefully crafted by developers for developers. Ready-made comp

Galio Org 2.8k Nov 24, 2021
Customizable Icons for React Native with support for image source and full styling.

Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project. Table of Contents Bundled Icon Sets Installation i

Joel Arvidsson 15.4k Dec 2, 2021
🎨 A React Native Sketch component for touch-based drawing.

?? React Native Sketch A React Native component for touch-based drawing. Features ?? Draw with your finger, and export an image from it. ?? Change the

Jeremy Grancher 641 Nov 27, 2021
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

null 5.8k Dec 1, 2021
generate react-native-svg component from .svg file

rnsvg-generator convert any svg files into programmable React Component that compatible to react-native-svg Usage npx rnsvg-generator source-path-or-f

Warung Pintar 31 Oct 17, 2021
convert any svg files into programmable React Component that compatible to react-native-svg

convert any svg files into programmable React Component that compatible to react-native-svg

Warung Pintar 23 Aug 10, 2021
The Beautiful Image component that supports fadeIn animation and shows placeholderSource if the main source can't be loaded. More will be implemented.

react-native-beautiful-image The Image component that supports fadeIn animation and shows placeholderSource if the main source can't be loaded. More w

Hau Vo 60 Oct 19, 2020
Native iOS UITableView for React Native with JSON support and more

React Native TableView Native iOS UITableView for React Native with JSON support Contents Features Installation Styles Examples Customization Features

Pavel Aksonov 1.3k Nov 25, 2021
:metal: A super duper easy hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more

react-native-hero ?? A super duper hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more. Why not

Brandon Him 242 Nov 18, 2021
A react native modals library. Swipeable. Highly customizable. Support multi modals & Support custom animation. For IOS & Android.

React Native Modals React Native Modals Library for iOS & Android. How to thank me ? Just click on ⭐️ button ?? Try it with Exponent BREAKING CHANGE A

Jack Lam 2k Nov 25, 2021
Import SVG files in your React Native project the same way that you would in a Web application.

react-native-svg-transformer React Native SVG transformer allows you to import SVG files in your React Native project the same way that you would in a

Krister Kari 767 Nov 30, 2021
Quick and easy icons in React Native

WARNING: This library is discontinued, I highly recommend using https://github.com/oblador/react-native-vector-icons There's far bigger problems to so

Cory Smith 1.2k Nov 24, 2021
A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.

React Native Rating Element A simple rating library for react native supporting: a11y ready ⚛️ decimal points like 3.7, 4.2 etc, direction aware icons

Rishabh Sharma 19 Nov 15, 2021
Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.

React Native Textinput Effects I've come across with those beautiful text inputs created and blogged by Codrops and wanted to port them to react-nativ

Halil Bilir 2.8k Nov 24, 2021
React Native - Native Animated Icons with different states

ReactNative: Native Iconic (Android/iOS): Deprecated Due to time constraint, this library is deprecated and not maintained anymore, You can still use

Pranav Raj Singh Chauhan 224 Nov 21, 2021
icons for react-native android using android-iconify

react-native-android-iconify icons for react native android using android-iconify Installation and How to use Step 1 - NPM Install npm install --save

Layton Whiteley 32 May 26, 2020
⭐Eva Icons for React Native

react-native-eva-icons ❤️ Clean and powerful Eva Icons implementation for React Native based on react-native-svg elements. Demo Installation npm i rea

Artur Yorsh 167 Nov 15, 2021
With React-Icomoon you can easily use the icons you have selected or created in icomoon.

React-IcoMoon ?? Zero Dependencies With React-Icomoon you can easily use the icons you have selected or created in icomoon. Demo Install npm install r

Aykut Kardaş 94 Nov 9, 2021
This module brings "Display: none" (css style) to turn on/off components from render. Using this module will improve your app performance and appearance with the enter/exit animations.

react-native-display This module brings "Display: none" (css style) to turn on/off components from render. Using this module will improve your app per

null 203 Nov 16, 2021