Eva Icons — Beautifully Crafted Open-Source UI Icons

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/