Need help with eva-icons?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

akveo
7.7K Stars 307 Forks MIT License 56 Commits 24 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

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:

html

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:

    html
    
    
  • 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:

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


<i data-eva="github"></i>

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

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

Fonts

Eva Icons are also available as a Web Font.

  • Include the font css into your page:

  • Add
    eva
    and
    eva-icon
    classes to an element:

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:

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

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

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 :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!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.