FamFamFam Silk icon pack, as individual icons or as a CSS spritesheet
Silk icon pack, as available on famfamfam website.
All credits for these icons go to their original author: Mark James (email@example.com)
The aim of this project is to make this icon pack available through various package managers, such as:
All icons are supplied in PNG format.
You can insert the icons directly into your HTML with a common IMG tag:
<img alt="Delete" src="dist/png/key_delete.png" width="16" height="16">
In addition to the icons by themselves, this project also ships a CSS spritesheet for the icon-pack. This spritesheet allows to load the entire icon-pack in just 1 image, and thus reduce HTTP calls.
This is what it actually looks:
All the positioning of the icons inside this alone image is made through CSS, which allows you to just add block-type tags with the proper class and get the same result:
<div class="famfamfam-silk key_delete"></div>
Just remember to add the CSS stylesheet to the HEAD of your HTML page!
npm install famfamfam-silk
bower install famfamfam-silk
composer require legacy-icons/famfamfam-silk
We use Gulp to build the project, so if you want to re-build or customize this project, you'll need Gulp.
After gulp is installed, and your CLI is pointed to your work directory, first install the dependencies:
with NPM 2.x.x
with NPM 3.x.x (resolve dependencies for
node-spritesheet before this module's ones)
npm install grunt grunt-contrib-coffee grunt-contrib-clean
then be sure that you have ImageMagick installed for building spritesheet.
then, you can run the
gulp build task to build the project:
First, it takes PNG files from the
src folder, and pastes them to the
Then it creates a spritesheet from the PNG images located in the
src folder, and thus creates the
sprite folder in
If, for example you just want
monitor_edit icons in a spritesheet, you just have to fork this project, point your CLI to the working directory,
src directory, except
monitor_edit icons in PNG format, and then run the
gulp build task.
You'll get the proper spritesheet and copies of the icons directly in the