Skip to content
Example of tree shaking Font Awesome in a simple webpack app
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

🌳 webpack tree shaking demo

This repository is simple webpack application with a few key dependencies and how tree shaking can impact the overall bundle size:

  • react & react-dom
  • lodash
  • @fortawesome/fontawesome-svg-core
  • @fortawesome/free-solid-svg-icons
  • @fortawesome/react-fontawesome


After cloning this repository, change directories to the example app you'd like to see. For example:

  • cd basic
  • yarn install
  • yarn build
  • (open dist/index.html in a browser)


The basic directory contains the basics of an application with all of these dependencies and renders a simple component. This app does not tree shake the excess Font Awesome icons.


The import-only-used directory updates the basic example to import only the icons used and add them to the Font Awesome library.


The explicit-import directory updates the basic example to explicitly import the icons that are used and doesn't create a Font Awesome library.

See the Font Awesome - Tree Shaking docs for more details around tree shaking Font Awesome.

You can’t perform that action at this time.