EzUI Icons

Lightweight, scalable, and easy-to-use icon library for modern web apps.

EzUI Icons is a scalable icon library powered by custom icon fonts. Designed for performance and simplicity, it offers flexible usage through both component-based and class-based options. With sharp, resolution-independent rendering and full customization support, it adapts easily to modern design systems and workflows.

Contents

• Overview
• Key Features
• Installation
• Module Import
• Usage
• Customization
• Icon Preview
• Compatibility
• Browser Support
• License

Overview

EzUI Icons is a lightweight, high-performance icon library that uses custom icon fonts to deliver sharp, scalable vector icons. It provides flexible usage options through both reusable components and classic CSS classes, allowing easy integration into a wide range of front-end projects.

Built for speed and customization, EzUI Icons enables developers to extend or modify icon sets effortlessly to match any design system. Its modular design keeps your bundle size minimal while ensuring consistent, crisp visuals across all modern browsers and screen sizes.

Key Features

• Lightweight – Load only the icons you need
• Scalable – Crisp vector rendering at any size
• Flexible – Use as reusable components or class-based icons
• Customizable – Add your own icons easily with Fontello
• Framework-Friendly – Built to integrate smoothly with any modern front-end framework

Installation

Install the package via npm:

npm install @clarium/ezui-icons

Module Import

To use <ezui-icon> in your app, import the module into your AppModule:

import { EzuiIconModule } from '@clarium/ezui-icons';

@NgModule({
  imports: [EzuiIconModule],
})
export class AppModule {}

Use the icons in your templates:

<ezui-icon name="home"></ezui-icon>

Usage

EzUI Icons can be used in two ways: as an Angular component or via CSS classes.

Component-Based Usage Use the component in your templates:

<ezui-icon name="home-outline"></ezui-icon>
<ezui-icon name="user-circle"></ezui-icon>
<ezui-icon name="dashboard"></ezui-icon>

Class-Based Usage Apply icon classes directly to HTML elements:

<i class="ezui-home-outline"></i>
<i class="ezui-user-circle"></i>   
<i class="ezui-dashboard"></i>

Customization

You can customize the icons by applying CSS styles directly to the <ezui-icon> component or the icon classes.

For example:

<ezui-icon name="home" color="red" size="2rem"></ezui-icon>

Icon Preview

Explore the full collection of available icons, their names, and usage examples on our dedicated icon gallery:

View the EzUI-Icons Gallery

The gallery provides:

• Visual previews of every icon
• Icon names for use with the <ezui-icon> component or CSS classes
• Search and filter functionality for easy browsing
• Usage tips and customization examples

Check it out to find the perfect icon for your project!

Compatibility

EzUI supports Angular versions 16 through 20, ensuring seamless integration with the latest features and ecosystem improvements.

The library works with TypeScript 4.8 and above, giving you the latest language enhancements and strict type safety.

For Node.js, EzUI is tested and compatible with versions 16, 18, and 20, aligning with common Angular development environments.

Browser Support

EzUI components run flawlessly on all major modern browsers, including:

• Google Chrome

• Mozilla Firefox

• Microsoft Edge

• Apple Safari

License

EzUI Icons is licensed under the MIT and SIL License.

See the LICENSE.txt file for full details.