Dieter Petereit September 6th, 2017

Feather Icons: 240 Modern Free Pictograms

Feather Icons is a set of 240 symbols that are suitable for almost any project, due to their very clean design. Another reason for that is that they're being distributed for free, under the liberal MIT license.

"Feather Icons" is a project of the Californian frontend developer Cole Bemis, who has already released a couple of other projects via Github, but only gained some attention with Feather.

Feather Icons Are Based on SVG

At the core, the symbols of the feather pack are SVG files, allowing you to adjust their colors, or scale them with the proper tools. The easiest way to integrate the symbols into your website is using a combination of SVG, JavaScript and HTML5 data attributes.

First, integrate the compressed JavaScript file feather.min.js, or the uncompressed version feather.js into your HTML document. Now, call up the desired icon as a data attribute for your element. That can look like this:

<i data-feather="circle"></i>

This way, handling remains straightforward and comprehensible for you. Now, the JavaScript makes sure that the SVG markup corresponding to the data attribute is called and executed. To do that, a replace command needs to be put to the end of the document:

<script>
 feather.replace()
</script>

Parameters on the replace command allow you to influence the display of the respective pictograms. For instance, you could define the line width using:

<script>
 feather.replace({ class: 'stroke-width': 1 })
</script>

At runtime, the parameters for the replace command are built into the SVG string. However, it is not possible to limit the options to individual icons.

Feather Icons Are Usable With Node As Well

Feather can not only be used using client-side JavaScript but also via Node. Here, usage is a little bit more complicated. A sprite for the core-conventional users is in the works.

The Feather Icons are not the best thing since canned beer, and they are not without alternatives either. However, in any case, they are a useful expansion of the toolbox of any web designer. Enjoy.

By the way: If you want to experiment a bit first, this Codepen is a good choice to do that.

Photo credit: StockSnap / Pixabay

Dieter Petereit

Dieter Petereit is a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called web design and has carried on ever since. Two decades ago he started writing for several online publications, some well, some lesser known. You can meet him over on Google+.

Leave a Reply

Your email address will not be published. Required fields are marked *