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

• Complete Eva Icons Package
• NPM Package
• you also can download icons one by one in PNG and SVG formats from Eva Icons Website.

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:

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

• React Native
• Flutter

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!