FeatherIcons

💡

Design is serious business, and when it comes to adding icons to animate your website, the options are usually limited to not-so-awesome fonts. In this case, there's a very cool and lightweight alternative available, known as FeatherIcons.

It also provides one click downloadable SVG's which is convenient.

Check out this documentation to learn how to implement FeatherIcons in your project. I'll provide an example using npm for React.

Get Started !

1.Install package for feather icons-

npm install feather-icons Or
npm install feather-icons --save

Include script for feather.js or feather.min.js-

<script src="path/to/dist/feather.js"></script>

OR, You can directly attach CDN-

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

Use Icons as follows-

<i data-feather="circle"></i>
//data feather is name of the icon simply, 
//you can check names on website feathericons.com

Call feather.replace() Method-

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

If this approach didn't worked , I'll tell you a better one which has worked for me. There can be issues with above mentioned one , so if one occurs for you, you can consider this approach-

Other Options-

Install package (Mentioned above)
Create a file and add following code in it-

Call feather.replace() Method-

 import React,{useEffect} from "react";
 import feather from 'feather-icons';

 const FeatherIcon = ({ icon }) => {
     useEffect(() => {
         feather.replace();
     }, []);

     return <i data-feather={icon}></i>;
 };
 export default FeatherIcon;

Navigate to the page you want to use the icons and import the above file as mentioned-

import FeatherIcon from "./FeatherIcons.jsx";
// use featherIcons as below
<span class="container">
<FeatherIcon icon='eye' />
</span>

This approach will work 100%.

Thanks for the Reading..!

FeatherIcons: Lighten Your Load with This Sleek FontAwesome Alternative!

Other Options-