PHPackages                             atelierspierrot/gentleface-sprites - 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. [Utility & Helpers](/categories/utility)
4. /
5. atelierspierrot/gentleface-sprites

AbandonedArchivedLibrary-assets[Utility & Helpers](/categories/utility)

atelierspierrot/gentleface-sprites
==================================

The UNOFFICIAL sprites of the Free Wireframe Toolbar Icons for GUI designers by Gentleface (http://www.gentleface.com/free\_icon\_set.html)

v1.0.1(12y ago)1951CC-BY-NC-3.0CSS

Since Jul 1Pushed 12y ago1 watchersCompare

[ Source](https://github.com/atelierspierrot/gentleface-sprites)[ Packagist](https://packagist.org/packages/atelierspierrot/gentleface-sprites)[ Docs](http://github.com/atelierspierrot/gentleface-sprites)[ RSS](/packages/atelierspierrot-gentleface-sprites/feed)WikiDiscussions master Synced 4w ago

READMEChangelogDependenciesVersions (6)Used By (1)

Gentleface CSS Sprites
======================

[](#gentleface-css-sprites)

The **UNOFFICIAL** sprites of the *Free Wireframe Toolbar Icons for GUI designers*by [Gentleface UI / UX design](http://www.gentleface.com).

**!! - This work is unofficial and is not liable for Gentleface,** but was developed and is available for public download and use with their agreement in the conditions explained below.

Overview
--------

[](#overview)

This package proposes some CSS sprites constructed on the [Gentleface custom toolbar icons](http://www.gentleface.com/free_icon_set.html). The original set of icons is proposed under [Creative Commons "Attribution - Non Commercial" license](http://creativecommons.org/licenses/by-nc/3.0/), free of use for **NON COMMERCIAL** usage as long as you attach image credits to "[Gentleface UI / UX design](http://www.gentleface.com)". See the bottom of this page for more infos about protection licenses.

To learn more about "CSS sprites" conception, see the [Sprite (computer graphics) wikipedia's page](http://en.wikipedia.org/wiki/Sprite_%28computer_graphics%29#Sprites_by_CSS).

As the original icons set, the sprites proposed icons in black and white, 16x16, 24x24, 32x32 and 48x48 pixels.

Usage
-----

[](#usage)

### Installation

[](#installation)

This package is a "standalone" CSS framework. To use it, you just need to get its sources from GitHub and include the `src/` content of the package in your project assets.

If you are a [Bower](http://bower.io/) user, the package is registered so you can write in your `bower.json`:

```
"dependencies": {
    ...
    "atelierspierrot/gentleface-sprites": "dev-master"
}

```

If you are a [Composer](http://getcomposer.org/) user, the package is referenced to Packagist so you can write in your `composer.json`:

```
"require": {
    ...
    "atelierspierrot/gentleface-sprites": "dev-master"
}

```

The package has a `library-assets` type to allow handling by the [Assets Manager](http://github.com/atelierspierrot/assets-manager) Composer's extension. If you plan to use the manager, you can use the `assets-install` branch of the package, which has the AssetsManager in its requirements (to be sure it will be loaded before the sprite and be able to move it in the project assets).

### HTML usage

[](#html-usage)

Once the package is included in your project, you can start to use the sprites framework.

To do so, you first need to include the CSS definitions:

```

```

Then you can start writing some Gentleface icons spans using the framework explained below.

A demonstration page is available in the global package (that requires a PHP server) in `demo/` ; it shows in particular the list of available icons and their names.

### CSS Framework

[](#css-framework)

The package defines some **CSS sprites** classes to render some icons easily and with least of work.

The CSS framework to use the sprites is based on three central classes:

- the first one to choose the icons size: `gentleface-XX` with `XX` in 16, 24, 32 or 48,
- the second one to choose the icons color: `black` or `white`,
- the last one to choose the icon itself, which is the name of the icon.

For instance, to render a black, 24 by 24 pixels image of the "balance" icon, you will write:

```

```

As the sprites are not defined with restrictive CSS rules, you may encounter rendering problems (such as margins or paddings defined globally in your document) that can be avoid adding a `reset` class to your icons:

```

```

A simple `gentleface` class is designed as a shortcut that defaults to the black icons in size 16x16. For instance, the followings are equivalent:

```

```

Finally, some classes can be used to define common effects on icons:

- an "hover" effect on links containing icons using a `hover-COLOR` class on the icon, which means that the icon will be switched to the concerned `COLOR` (black or white) when the mouse is over the link (`hover` event) or when it's focused (`focus` event),
- an "active" effect on DOM elements containing icons using a `active-COLOR` class on the icon, which means that when the container will have the class `active` (a menu item for instance), the icon will be switched to the concerned `COLOR`.

Examples:

```

```

Credits
-------

[](#credits)

As mentioned above, the original set of icons is made by [Gentleface](http://www.gentleface.com/)and proposed under [Creative Commons Attribution-Non Commercial](http://creativecommons.org/licenses/by-nc/3.0/)license. You are free to use it in personal (non-commercial) works but you must always add a link to [www.gentleface.com](http://www.gentleface.com) in a prominent place (e.g. the page footer), including the CC-BY-NC license and the reference to [www.gentleface.com](http://www.gentleface.com) on every page using the icons.

To use these icons (and this package by extension) on commercial websites, applications (including web applications) and services, you can by a [Royalty Free license](http://www.gentleface.com/royalty_free_license.txt) on [Gentleface.com](http://www.gentleface.com/free_icon_set.html). This licensed version includes EPS and SWF vector files.

The sprites were generated with the help of [website-performance.org](http://spritegen.website-performance.org/)and are CSS3 valid.

The minified version of the CSS file of the package was processed with the [YUI Compressor](http://refresh-sf.com/yui/).

The PNG sprites are optimized using [Smush.it (TM)](http://www.smushit.com/ysmush.it/).

###  Health Score

30

—

LowBetter than 62% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity67

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 ~103 days

Total

2

Last Release

4644d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/295156?v=4)[JustCrazy](/maintainers/picas)[@PICAS](https://github.com/PICAS)

---

Top Contributors

[![e-picas](https://avatars.githubusercontent.com/u/1021199?v=4)](https://github.com/e-picas "e-picas (23 commits)")

---

Tags

iconsspritegentleface

### Embed Badge

![Health badge](/badges/atelierspierrot-gentleface-sprites/health.svg)

```
[![Health](https://phpackages.com/badges/atelierspierrot-gentleface-sprites/health.svg)](https://phpackages.com/packages/atelierspierrot-gentleface-sprites)
```

###  Alternatives

[twbs/bootstrap-icons

Official open source SVG icon library for Bootstrap

8.0k2.2M76](/packages/twbs-bootstrap-icons)[simple-icons/simple-icons

SVG icons for popular brands

25.2k210.1k4](/packages/simple-icons-simple-icons)[driftyco/ionicons

The premium icon font for Ionic Framework.

18.1k89.2k8](/packages/driftyco-ionicons)[mervick/material-design-icons

Google Material Design Icons For Using With Bootstrap

9893.5k7](/packages/mervick-material-design-icons)[codewithdennis/filament-lucide-icons

A Filament plugin that integrates Lucide icons, allowing you to use them seamlessly across Filament forms, tables, actions, and more.

4746.1k5](/packages/codewithdennis-filament-lucide-icons)[oscarotero/inline-svg

PHP library to embed svg in the html

1933.8k1](/packages/oscarotero-inline-svg)

PHPackages © 2026

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