Watch 7 Star 19 Fork 2

theajack / easy-iconJavaScriptMIT

Join us
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
高颜值、简单易用的字体图标库 spread retract

Clone or download

Version Downloads Size License TopLang issue

🚀 A beautiful, easy-to-use web font icon library

Online trial | Github | Gitee | 中文


0. Quick start

Easy-ICON is a high-value, easy-to-use web font icon library, you only need to introduce a css file (or an npm package), you can simply use more than 1,000 beautiful icons

The following is a simple example introduced by the css file

<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="">
    <i class="ei-heart ei-xs" style="color: red;"></i>
    <i class="ei-spinner-indicator ei-spin"></i> <!--A rotating loading-->
    <i class="ea-star-half-empty"></i>
    <i class="et-like ei-l"></i>
    <i class="ef-html5 ei-xl"></i>
    <i class="el-goods ei-4x"></i>

Effect picture:


😃 Experience 1583 icons online

1. Introduction

Easy-ICON is a easy to use web font icon lib

Easy-ICON uses multiple icon libraries, such as Font-Awesome, to thank the original author for their contributions!


  1. Very simple to use
  2. 1583 commonly used font icons, including multiple font libraries
  3. Customize any css style, the zoom is not blurred
  4. Use according to module

2.Install & Use

2.1 Use css file reference:(Recommended to download to local and then reference local files)

Easy-icon is divided into five modules, which can be referenced independently

<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">

Or use a collection version

<link rel="stylesheet" href="">

2.2 OR Use npm:

npm i easy-icon;

You only need to import once:

Same as css file reference, can be referenced independently by module, without using all

import 'easy-icon';
import 'easy-icon/easy-icon-a.js';
import 'easy-icon/easy-icon-f.js';
import 'easy-icon/easy-icon-t.js';
import 'easy-icon/easy-icon-l.js';

Or use a collection version

import 'easy-icon/easy-icon-all.js';

2.3 Useage

It's very easy to use, you just need to insert the tag anywhere:

<i class="ei-spmile"></i>

It should be noted that the prefixes corresponding to the five modules are different, respectively

  • easy-icon-a: ei-
  • easy-icon-a: ea-
  • easy-icon-f: ef-
  • easy-icon-t: et-
  • easy-icon-l: el-

See which icons you can use

Expand all icons Easy-ICON Easy-ICON Easy-ICON Easy-ICON


3.1 Spin the icon

You can add the ei-spin class to spin the icon:

<i class="ei-spinner-snake ei-spin"></i>

The ei-spin class behaves consistently for the five modules

3.2 Choose size

Easy-icon comes in eight sizes to choose from, from small to large:xs,s,l,lg,2x,3x,4x,5x

The size class performs the same for the five modules

<i class="ei-smile ei-s"></i>
<i class="ei-smile ei-xs"></i>

Of course, you can use css to customize any style.

Comments ( 0 )

Sign in for post a comment


Help Search

205735 778617b6 1899542 205747 347fc4a1 1899542