Feather Icon - Tutorial

This tutorial covers Feather icon library with examples.

Feather is an beautiful opensource icon library for web and mobile applications. It provides svg to integrate into an design and development of apps. It is easy to customize the size ,color and animations. It provides icon asset kit to use in web and desktops applications.


This provides many ways integrate into your applications

  • CDN
  • npm library
  • download

with CDN,

You can use one the link from below in your legacy html pages or javascript web applications

<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

feather-icons npm library

You can integrate into any javascript application using npm install command feather-icons is an npm library

npm install feather-icons --save

Download feather js file into your application

This approach is download from cdn and copies to your application assets or javascript or any name you want

Please refer that path of the feather javascirpt file path in your application

once feather javascript is configured, You can use the icon in your application

Like a fontawesome icons, you can use i tag to include an icon

    <i data-feather="archive">Delete</i>
You can add icon  name to data-feather attribute