PHPackages                             heimrichhannot/elegant-icons - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. heimrichhannot/elegant-icons

AbandonedArchivedContao-component

heimrichhannot/elegant-icons
============================

The Elegant Icon Font from http://www.elegantthemes.com/blog/resources/elegant-icon-font as composer component with less support.

1.3.5(8y ago)252.5k151MITCSS

Since Aug 19Pushed 3y ago9 watchersCompare

[ Source](https://github.com/heimrichhannot/elegant-icons)[ Packagist](https://packagist.org/packages/heimrichhannot/elegant-icons)[ RSS](/packages/heimrichhannot-elegant-icons/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (3)Dependencies (2)Versions (20)Used By (1)

> This repo in abandoned!

Elegant Icon Font
=================

[](#elegant-icon-font)

Composer/Component Package to provide the famous elegant icon font library containin 360 icons with less support. Created by:

Icon list
---------

[](#icon-list)

See demo/demo.html for full list of icons or visit .

Sass Usage
----------

[](#sass-usage)

1. Import elegant-icons-sass in your code:

```
@import 'elegant-icons-sass';

```

> By default, only the `woff` and `woff2` formats ([Why?](http://caniuse.com/#search=woff)) of the fonts will be pulled from a CDN (using [RawGit](https://rawgit.com/)). If you want to use different formats and/or local fonts, check the [**Customization**](#customization) section below.

Usage
-----

[](#usage)

To use the icons, you will need their names, which you can find [here](https://www.elegantthemes.com/blog/resources/elegant-icon-font) (right after the unicode reference list).

> The unicode references of the above list are meant to be used as `data-icon`, which the support has been removed in this sass version, because it‘s considered a bad practice due to performance issues. If you wish to use this way, you must define it yourself.

> On the list, you will find that almost all icons have an `icon_` prefix in their names, which seems to be redundant and unnecessary. In this Sass version, you can omit it (as done in the exemples below), but for backwards compatibility they are still valid selectors for all usage types (mixin, placeholder or class).

> By default, the icon will be defined as a `::before` pseude-element. If you wish to change this default, check the [**Customization**](#customization) section below.

### As a mixin

[](#as-a-mixin)

Include the mixin in your selector:

```
.my-selector {
  @include elegant-icon('arrow_up');
}
```

You can override the icon's default placement by passing it as a second parameter:

```
.my-selector {
  @include elegant-icon('question', 'after');
}
```

### As a placeholder

[](#as-a-placeholder)

Extend the your selector with the placeholder:

```
.my-selector {
  @extend %ei-contacts_alt;
}
```

> When using as a placeholder, the prefix `ei-` must be used. Check the [**Customization**](#customization) section below on how to change or remove this prefix.

### As a class

[](#as-a-class)

If you just want to use it as a class, you **MUST ACTIVATE** the class generation first (Check the [**Customization**](#customization) section below on how to activate it.)

After activated, you can simply set the icon class name to your html element:

```

```

> When using as a class, the prefix `ei-` must be used. Check the [**Customization**](#customization) section below on how to change or remove this prefix.

Customization
-------------

[](#customization)

This sass version of the Elegant Icons defines a few defaults, which are considered best practices or common use cases. If you wish to override them, here is how:

> The overrides below, must be done **BEFORE** the import explained in the Step 2 of the [Usage](#usage) section.

### Activate class selectors

[](#activate-class-selectors)

```
$ei-generate-classes: true;

// Default value: false
```

### Using a different selector prefix:

[](#using-a-different-selector-prefix)

```
$ei-icon-prefix: 'my-prefix-';

// Default value: 'ei-'
```

> If you don‘t want to use a prefix, set it to an empty string: `$ei-icon-prefix: '';`

### Set the icons placement as `::after`:

[](#set-the-icons-placement-as-after)

```
$ei-default-placement: 'after';

// Default value: 'before'
```

> The `$ei-default-placement` variable can only be set as 'before' or 'after' which will define it as a `::before` or an `::after` pseudo-element, respectively.

### Using different font formats:

[](#using-different-font-formats)

```
// All formats:
$ei-font-formats: eot woff2 woff ttf svg;

// Default value: woff woff2
```

> You can define any formats combination that you need from the available formats on example list above.

### Using local fonts

[](#using-local-fonts)

1. Activate the local font usage:

```
$ei-use-local-fonts: true;
```

2. Override the font path variable:

```
// Example:
$ei-font-path: '../assets/fonts/elegant-icons/';

// Default value: '/fonts'
```

> Please note that the path above must be relative to the generated `CSS` file, since it is used as a normal `src: url()` in an `@font-face` definition.

3. (Optionally) change the font file name:

```
$ei-font-filename: 'my-custom-icons-filename';

// Default value: 'ElegantIcons'
```

> If you‘re just copying the font files and not renaming them, don‘t override this.

4. (Optionally) change the font family name:

```
$ei-font-family: 'My-Custom-Icons-Family-Name';

// Default value: 'ElegantIcons'
```

> Override only if you somehow wish to have a different font-family name defined to the icons font.

> You might need to copy the font files yourself from the `node_modules/elegant-icons-sass/fonts` folder. You can use your build system of choice for that.

Original image files
--------------------

[](#original-image-files)

The original image files (in SVG and PNG) can be found in the repo's [image folder](https://github.com/mdentinho/elegant-icons-sass/tree/master/images).

###  Health Score

39

—

LowBetter than 86% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity32

Limited adoption so far

Community17

Small or concentrated contributor base

Maturity72

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~50 days

Recently: every ~0 days

Total

18

Last Release

3073d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/28ad3224d8727b622ebd229840eea6b9dbcb83eb0bd609e6ce65b614830ff538?d=identicon)[digitales@heimrich-hannot.de](/maintainers/digitales@heimrich-hannot.de)

---

Top Contributors

[![koertho](https://avatars.githubusercontent.com/u/12064642?v=4)](https://github.com/koertho "koertho (1 commits)")

### Embed Badge

![Health badge](/badges/heimrichhannot-elegant-icons/health.svg)

```
[![Health](https://phpackages.com/badges/heimrichhannot-elegant-icons/health.svg)](https://phpackages.com/packages/heimrichhannot-elegant-icons)
```

###  Alternatives

[codefog/contao-haste

haste extension for Contao Open Source CMS

42650.8k139](/packages/codefog-contao-haste)[madeyourday/contao-rocksolid-custom-elements

Create your own, nestable content elements using a modular system. End the WYSIWYG chaos with your own content elements.

50341.9k12](/packages/madeyourday-contao-rocksolid-custom-elements)[contao/manager-bundle

Provides the Contao Managed Edition

181.3M61](/packages/contao-manager-bundle)[codefog/contao-news_categories

News Categories bundle for Contao Open Source CMS

3183.3k6](/packages/codefog-contao-news-categories)[terminal42/contao-node

Node bundle for Contao Open Source CMS

3172.5k4](/packages/terminal42-contao-node)[terminal42/contao-folderpage

Provides a new page type for Contao that allows you to group pages into folders.

18147.9k9](/packages/terminal42-contao-folderpage)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)