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 serveral 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
npm i eva-icons
<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.
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({ ... })
Replaces all elements that have a data-eva
attribute with SVG markup corresponding to the element's data-eva
attribute value.
License
MIT license.
More from Akveo
- Nebular - Angular Component, 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!