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