The world around us isn't constructed of words, but instead things. Hence, a pictorial style, as icons, should help computer software to be more comprehensible. Giving a good user experience should make our users reward us with more likes in the app store. 

There are several icon libraries that can be used in a website. The Bootstrap team has a curated list at http://getbootstrap.com/docs/4.1/extend/icons/. For this project, we'll use Feather Icons (https://feathericons.com/) and its conveniently available npm package, https://www.npmjs.com/package/feather-icons.

In package.json, add this to the dependencies:

"feather-icons": ">=4.5.x"

Then run npm install to download the new package. You can then inspect the downloaded package and see that ./node_modules/feather-icons/dist/feather.js contains browser-side code, making it easy to use the icons.

We make that directory available by mounting it in app.js, just as we did for Bootstrap and jQuery libraries. Add this code to app.js:

app.use('/assets/vendor/feather-icons', express.static(
   path.join(__dirname, 'node_modules', 'feather-icons', 'dist'))); 

Going by the documentation, we must put this at the bottom of views/layout.hbs to enable feather-icons support:

<script src="/assets/vendor/feather-icons/feather.js"></script>
<script>
  feather.replace();
</script>

To use one of the icons, use a data-feather attribute specifying one of the icon names, like so:

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

What's important is the data-feather attribute, which the Feather Icons library uses to identify the SVG file to use. The Feather Icons library completely replaces the element where it found the data-feather attribute. Therefore, if you want the icon to be a clickable link, it's necessary to wrap the icon definition with an <a> tag, rather than adding data-feather to the <a> tag. The next section shows an example.