# Eva Icons — Beautifully Crafted Open-Source UI Icons

> A pack of 480 delightfully designed open-source icons in outline and fill styles. Each icon follows a consistent visual language with smooth curves and friendly proportions, available as SVG, PNG, and web font.

## Install

Save in your project root:

# Eva Icons — Beautifully Crafted Open-Source UI Icons

## Quick Use
```bash
npm install eva-icons
```
```html
<!-- CDN usage -->
<link rel="stylesheet" href="https://unpkg.com/eva-icons/style/eva-icons.css">
<i class="eva eva-github"></i>
<i class="eva eva-heart-outline"></i>
```
```javascript
// Or use the JavaScript API
import * as eva from 'eva-icons';
eva.replace(); // replaces <i data-eva="icon-name"> elements
```

## Introduction
Eva Icons is an open-source icon pack by Akveo, the team behind the Nebular UI framework. It provides 480 icons in two visual styles — outline and fill — designed with consistent stroke weights, rounded corners, and a friendly aesthetic that fits modern web and mobile applications.

## What Eva Icons Does
- Provides 480 icons in both outline and fill variants for a total of 960 icon options
- Delivers icons as SVG files, PNG exports at multiple sizes, and a web font
- Offers a JavaScript API that replaces placeholder elements with inline SVG
- Supports CSS-based styling for color, size, and animation of web font icons
- Includes an interactive icon browser at the Eva Icons website for searching and previewing

## Architecture Overview
Eva Icons ships in three formats. The SVG set contains individual optimized files for each icon at 24x24 base size. The web font bundles all icons into a single font file with a companion CSS stylesheet mapping class names to glyphs. The JavaScript module provides a replace() function that scans the DOM for data-eva attributes and swaps them with inline SVG, similar to Feather Icons. The package is lightweight at about 250 KB for the complete set.

## Self-Hosting & Configuration
- Install via npm or include the CSS from a CDN for web font usage
- Use data-eva attributes with the JS API for inline SVG rendering
- Import individual SVG files for bundler tree-shaking in component-based projects
- Download PNG exports at 24, 48, 128, and 512 pixel sizes for design mockups
- Use the interactive browser at https://akveo.github.io/eva-icons/ to find icon names

## Key Features
- Consistent visual language across all 480 icons with uniform stroke and corner radius
- Dual-style system (outline and fill) for toggling between light and emphasized states
- Three delivery formats (SVG, web font, JS API) to fit any project setup
- MIT licensed with no attribution requirement for personal or commercial use
- Designed to pair with Nebular and ngx-admin but fully standalone

## Comparison with Similar Tools
- **Feather Icons** — 280 stroke-only icons with a similar minimalist aesthetic; Eva offers outline+fill variants and more icons
- **Ionicons** — 1,300+ icons with three styles; larger set but heavier, whereas Eva is more compact and lightweight
- **Heroicons** — Tailwind team's icon set with outline and solid; similar concept but Eva has a softer, more rounded design language
- **Lucide** — community-driven Feather fork with 1,500+ icons; more icons than Eva but less design consistency per icon
- **Bootstrap Icons** — 2,000+ icons with a Bootstrap aesthetic; Eva offers a distinctive friendly style independent of any CSS framework

## FAQ
**Q: Can I use Eva Icons with React or Vue?**
A: Yes. Import SVG files directly as React components, or use the web font with class names in any framework.

**Q: Are Eva Icons free for commercial projects?**
A: Yes. The entire set is MIT licensed with no restrictions.

**Q: How do I switch between outline and fill styles?**
A: Append -outline to the icon name for the outline variant (e.g., heart vs heart-outline).

**Q: What is the total download size?**
A: The web font CSS is about 40 KB. The full SVG set is approximately 250 KB. Individual icon imports are a few hundred bytes each.

## Sources
- https://github.com/akveo/eva-icons
- https://akveo.github.io/eva-icons/

---
Source: https://tokrepo.com/en/workflows/asset-bd097cb6
Author: AI Open Source