Impact

Flexible and Fast Iconography

We use a lot of iconography. Clean icons convey meaning simply and quickly. However, using icons simply and quickly can be challenging. We built Collecticons to make using icons easier and less time consuming in our web development process.

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. This project utilizes modern web development approaches and encourages collaborative asset creation.

The processor was built together with the library 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 that we could plug right into our development process.

“Collecticons saves us time and makes our development process more efficient.”

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.

Innovation

A Better way to Manage Icons

The Collecticons Library allows us to easily manage and reuse icons. Some of the icons were built on top of already existing libraries, but most we made in house. The Collecticons Processor can be used with the Collecticon Icon library to generate a webfont (eot, woff, ttf) and style files (css, sass).

This evergrowing set of icons are available for free under the The MIT License and the Creative Commons Attribution License 4.0. If you'd like to contribute an icon see our guidelines. If you find a bug and/or have a nice idea about a feature for the Collecticons Processor feel free to open an issue or submit your own solution.