Collecticons is an ever growing compendium of crisp icons for responsive web apps. Collecticons includes a processing script to generate an icon font for use with your CSS or SASS.

Icons matter

We use a lot of iconography. Clean icons convey meaning simply and quickly. Clean icons help us to build an intuitive interface to search satellite imagery and to tell a clear story that some oil is dirtier than others.

There are several ways to include icons in a project. We find the icon font approach most suitable to our process, simply because icon fonts are great:

• They are ridiculously lightweight;

• Only one single font file is needed instead of multiple images, requiring just one HTTP request;

• The icons can be scaled to any size, and easily styled using CSS;

• By using PUA code points for the glyphs, you prevent screen readers from reading these characters and thus addressing accessibility issues.

A better way to manage icons

We built Collecticons to improve our own development process. Previously we used IcoMoon to create a webfont but any small change to an icon required that we manually generate the font all over again. Over a project with many careful iterations to the icon set, this time adds up. So we built our own tools for icon management hat we could plug right into our development process.

The Collecticons Library allows us to easily manage and reuse icons. Some of the icons were built on top of libraries. Most we made in house. With the Collecticons Processor, we generate the font and sass files automatically when we do our site build.

Collecticons saves us time, makes our development process more efficient, and lets us borrow from tested icon conventions. We hope it does the same for you. We look forward to seeing you involved in the project, which is licensed under the open source MIT License.