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:
flip. Download on desktop to use them in your digital products for Web, iOS and Android. Icons are provided in two visual types:
Outline and in several formats, including
- Complete Eva Icons Package
- NPM Package
- you also can download icons one by one in
SVGformats from Eva Icons Website.
Load from CDN in your project:
After including the script,
eva will be available as a global variable.
- Install the package:
npm i eva-icons
- Include it to your page:
- Or require the package (may vary depending on your build system):
const eva = ;
How to use
- Add the
data-evaattribute with the icon name to an element:
eva.replace();to replace all elements with the
data-evadata attribute with SVG elements. You can also pass some additional parameters to the
replacemethod to modify the
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
Eva Icons are also available as a Web Font.
- Include the font css into your page:
eva-iconclasses to an element:
We recommend using SVG icons due to better rendering and performance capabilities, more details.
Replaces all elements that have a
data-eva attribute with SVG markup.
options optional object.
Available 'option' properties:
|width||string or number||24px||Icon width|
|height||string or number||24px||Icon height|
|class||string||none||Custom css class|
- Add the
data-eva-animationattribute 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 iconwill be always animated. This type of animation will be applied only to current icons.
- Pass animation as property in a
Note: The animation will be applied to all replaced elements.
eva-parent-hoverclass to the parent container in a case you want to activate the animation hovering on the parent element.
3rd party implementations
More from Akveo
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 👍