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.

$3

Load from CDN in your project:
``html

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

$3

- Install the package:
`
npm i eva-icons
`

- Include it to your page:
`html

`

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

`js
const eva = require('eva-icons');
`

`js
import * as eva from 'eva-icons';
`

How to use

$3

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

`html

`

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

`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

`html

`

$3

Eva Icons are also available as a Web Font.

- Include the font css into your page:

`html

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

`html

`

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

Documentation

$3

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 |

$3


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

`html

`

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

`html

`

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

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

`html



``

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!