Feather Icons with WordPress

I’m working on a project right now and wanted to try a new icon set. In the past, I’ve exclusively used Dashicons for basic icons and Font Awesome for more robust icon needs.

Our team member Andrew shared a link to Feather Icons because we’re thinking about using it for Paid Memberships Pro (if the licenses allow it).

So here’s a basic gist to enqueue a local copy of feather.min.js code and a hook for wp_footer to call the method that replaces and inserts the icons.

The Code Recipe

Adding This Recipe to Your Site

1. Download and save a copy of feather.min.js to the root folder of a custom plugin. If you aren’t using a custom plugin, you can save this to a child theme folder but you’ll need to just the enqueued file location.
   • Or, load the latest feather.min.js file from a CDN provider. Going this route, you won’t need to keep the file up to date to get the latest icon sets.
2. Add the code in the recipe to the main custom plugin file. Or, update your child theme’s functions.php file with the snippet.
3. Then, use the icons anywhere you want like the example below.

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

Browse the full list of available icons at the Feather Icons website.