Eva icons

A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch,...

SVGIcon set
akveo/eva-iconsakveo.github.io/eva-icons/eva-icons

README

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:
  1. ``` html
  2. <script src="https://unpkg.com/eva-icons"></script>
  3. ```
After including the script, eva will be available as a global variable.

NPM


- Install the package:
  1. ```
  2. npm i eva-icons
  3. ```

- Include it to your page:
  1. ``` html
  2. <script src="path/to/dist/eva-icons.js"></script>
  3. ```

- Or require the package (may vary depending on your build system):

  1. ``` js
  2. const eva = require('eva-icons');
  3. ```

  1. ``` js
  2. import * as eva from 'eva-icons';
  3. ```

How to use


JavaScript


- Add the data-eva attribute with the icon name to an element:

  1. ``` html
  2. <i data-eva="github"></i>
  3. ```

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

  1. ``` html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <title></title>
  5.   <script src="https://unpkg.com/eva-icons"></script>
  6.   <body>
  7.   
  8.     <i data-eva="github"></i>
  9. <script>
  10.       eva.replace()
  11.     </script>
  12.   </body>
  13. </html>
  14. ```
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
  
  1. ``` html
  2. <i data-eva="github" data-eva-fill="#ff0000" data-eva-height="48" data-eva-width="48"></i>
  3. ```

Fonts


Eva Icons are also available as a Web Font.

- Include the font css into your page:

  1. ``` html
  2. <link href="path/to/style/eva-icons.css">
  3. ```
- Add eva and eva-icon classes to an element:

  1. ``` html
  2. <i class="eva eva-github"></i>
  3. ```

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:

NameTypeDefaultDescription
|------|-------------|-------------|
fillstringnoneIcon
widthstring24pxIcon
heightstring24pxIcon
classstringnoneCustom
animationobjectnone[Icon

Animation

- Add the data-eva-animation attribute with the animation type (zoom, pulse, shake and flip) to an element:

  1. ``` html
  2. <i data-eva="github" data-eva-animation="zoom"></i>
  3. ```

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

  1. ``` html
  2. <i data-eva="github" data-eva-animation="zoom" data-eva-hover="false" data-eva-infinite="true"></i>
  3. ```

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.

  1. ``` js
  2. eva.replace({
  3.   animation: {
  4.     type: string, // zoom, pulse, shake, flip
  5.     hover: boolean, // default true
  6.     infinite: boolean, // default false
  7.   }
  8. });
  9. ```

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.

  1. ``` html
  2. <div class="eva-parent-hover">
  3.   <i data-eva="github" data-eva-animation="zoom"></i>
  4.   Zoom animation
  5. </div>
  6. ```

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 :star:
- Create pull requests, submit bugs, suggest new features or documentation updates :wrench:
- Follow us on Twitter :feet:
- Like our page on Facebook :thumbsup:

From Developers

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