DEV Community

loading...

Add custom icons to Font Awesome

astagi profile image Andrea Stagi ・2 min read

In one of my recent projects I used Font Awesome as icon set but I needed to add a new icon not included in the standard Font Awesome's library, the DuckDuckGo logo πŸ¦†

After some research I discovered that Font Awesome allows you to add custom icons in addition to what's offered and in this tutorial I'll show you how to extend Font Awesome in 3 simple steps keeping your code clean.

1) First of all create a folder called myicons and add your icon definition inside a js file (fa-duckduckgo.js in my case)

export const faDuckDuckGo = {
  prefix: "fab",
  iconName: "duckduckgo",
  icon: [
    24,
    24,
    [],
    "e001",
    "M12 0C5.373 0 0 ... .616.484z"
  ]
};
Enter fullscreen mode Exit fullscreen mode

prefix and iconName are respectively the icon group (fab -> Font Awesome brands in this case) and the icon name, so that you can render the icon in this way

<i class="fab fa-duckduckgo"></i>
Enter fullscreen mode Exit fullscreen mode

the icon section contains the SVG viewbox (24, 24 in this case), the unicode point which represents this custom icon (e001) and the single-path SVG.

2) Create an index file myicons/index.js to export your custom icons

export { faDuckDuckGo } from "./fa-duckduckgo";
Enter fullscreen mode Exit fullscreen mode

3) Install fontawesome-svg-core package

yarn add @fortawesome/fontawesome-svg-core
Enter fullscreen mode Exit fullscreen mode

to make your custom icons available in Font Awesome.

import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { faDuckDuckGo } from "./myicons";

library.add(faDuckDuckGo);

dom.watch();
Enter fullscreen mode Exit fullscreen mode

In the code above your custom icons gets imported from the myicons module you created before and then added to Font Awesome's library. dom.watch method watches the DOM for any additional icons being added or modified.

Here you can play with the final demo!

Pssst... if you use TypeScript you need to use some types from fontawesome-svg-core as you can see in this example.

Discussion (8)

pic
Editor guide
Collapse
mnemosdev_52 profile image
mnemos

Nice article!

Collapse
astagi profile image
Collapse
nerdess profile image
Sissi Adamski

nice tutorial, just on thing is a bit unclear to me. what is the purpose of "the unicode point which represents this custom icon (e001)" - thx!

Collapse
astagi profile image
Andrea Stagi Author

Hi Sissi, it represents the Unicode value for the icon and e001 is a higher number than the highest Unicode used in FontAwesome. If you have more than one icon and Unicode value is relevant for you, then you have to assign a different Unicode value for each icon (e001, e002 ...).

Collapse
lsrael22t profile image
Israel Robles

This is a very useful article, thanks.

Collapse
astagi profile image
Andrea Stagi Author

Thank you 😊

Collapse
iain_munro_a6fce1b5994096 profile image
Iain Munro

I was hoping that this would be a good article, but it lacks one thing and it is critical, is how do you now make it work. How do you connect the files we just made ?

80% of the work done - what was the point ?

Collapse
astagi profile image
Andrea Stagi Author

Hi Iain, have you tried the example attached? c63px.csb.app/