explaingit

akveo/eva-icons

★ 8,819TypeScriptAudience · designerComplexity · 1/5LicenseSetup · easy

TLDR

Eva Icons is a free collection of 480+ SVG icons for web and mobile apps in filled and outlined styles, with built-in zoom, pulse, shake, and flip animations you can trigger on hover or loop continuously.

Mindmap

mindmap
  root((eva-icons))
    What it does
      480 plus icons
      Filled and outlined
      4 built-in animations
    Formats
      SVG and PNG
      Web font CSS
      Sketch file
    Use Cases
      Web UI buttons
      Hover animations
      Design mockups
    Audience
      Web developers
      UI designers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add animated icons to a web page by including one CDN script tag and adding data attributes to HTML elements.

USE CASE 2

Download SVG files to use in Figma, Sketch, or any design tool for UI mockups and prototyping.

USE CASE 3

Apply a shake or zoom animation to a button icon on hover without writing any custom CSS.

USE CASE 4

Use the npm package to import icons as inline SVGs into a React or Angular component.

Tech stack

TypeScriptJavaScriptSVG

Getting it running

Difficulty · easy Time to first run · 5min
MIT license, use freely in personal and commercial projects with no restrictions beyond keeping the copyright notice.

In plain English

Eva Icons is a free, open-source collection of more than 480 icons for use in web and mobile apps. Each icon comes in two visual styles, filled and outlined, and is available in several formats: SVG, PNG, a web font, and a Sketch file. The icons cover common interface actions and items, such as social media logos, navigation symbols, and general UI controls. Beyond static images, Eva Icons supports four built-in animation types: zoom, pulse, shake, and flip. Animations can be set to trigger on hover or run continuously, and the behavior can be applied to individual icons or to all icons on a page at once. To use the icons in a web page, you can load the library from a CDN with a single script tag, install it through npm, or download the full package as a zip file. The JavaScript-based approach works by adding a data attribute to any HTML element with the name of the icon you want, then calling a replace function that swaps those elements out for SVG code. The web font version works through CSS classes instead. The project recommends using SVGs over the font version for better rendering quality. Third-party packages exist for React Native and Flutter, both linked from the README. The icons are made by Akveo, a company that also builds Angular UI component libraries. The project is MIT licensed, meaning it can be used freely in personal and commercial work.

Copy-paste prompts

Prompt 1
How do I add an animated bell icon from Eva Icons that shakes on hover using the CDN version, show me the full HTML snippet.
Prompt 2
Show me how to use Eva Icons in a React project installed via npm so the icon renders as an inline SVG.
Prompt 3
I want a heart icon from Eva Icons with a pulse animation that loops forever. Give me the complete HTML code.
Prompt 4
How do I use Eva Icons' web font version with CSS classes instead of the JavaScript data-attribute approach?
Prompt 5
What are all the animation types Eva Icons supports and can I apply different animations to different icons on the same page?
Open on GitHub → Explain another repo

← akveo on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.