# Custom icon fonts

**URL:** <https://community.hubspot.com/t/custom-icon-fonts/48883>\
**Category:** CMS Development\
**Created:** [December 21, 2021, 10:05pm UTC](https://community.hubspot.com/t/custom-icon-fonts/48883 "2021-12-21T22:05:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![PDeT](https://avatars.discourse-cdn.com/v4/letter/p/f08c70/32.png) [@PDeT](https://community.hubspot.com/u/PDeT)\
**Post date:** [December 21, 2021, 10:05pm UTC](https://community.hubspot.com/t/custom-icon-fonts/48883/1 "2021-12-21T22:05:05Z")

</div>

Hi,

I noticed that I could create an icon field to allow content editors to choose from a font awesome icon. This is great, and I also noticed that you could choose between 2 font awesome versions.

One of our clients has their own custom icon font. Would it be possible for us to configure the icon field to use the custom icon font in stead of the provided font awesome? If so, how could this be acomplished?

Thanks

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [December 22, 2021, 8:27am UTC](https://community.hubspot.com/t/custom-icon-fonts/48883/2 "2021-12-22T08:27:48Z")

</div>

Hi @PDeT ,  
If you want to use custom font awesome then you have to add their CSS file or CDN in your theme base file or in the module. and you can use the text field to add the icon class.

Hope this helps!  
If we were able to answer your query, kindly help the community by marking it as a solution.  
Thanks and Regards.

---

<div class="post-metadata">

**Author:** ![PDeT](https://avatars.discourse-cdn.com/v4/letter/p/f08c70/32.png) [@PDeT](https://community.hubspot.com/u/PDeT)\
**Post date:** [December 22, 2021, 8:30am UTC](https://community.hubspot.com/t/custom-icon-fonts/48883/3 "2021-12-22T08:30:48Z")

</div>

Hi, that certainly counts as a workaround, but the issue with this is that the editor needs to know the icon text, whereas with an icon field they can browse the available icons. But if there is currently no other way, I’ll do with the workaround thx!

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [January 6, 2022, 12:30pm UTC](https://community.hubspot.com/t/custom-icon-fonts/48883/4 "2022-01-06T12:30:27Z")

</div>

Hi @PDeT,

you can’t configure default modules.

But creating a custom module for custom icons is quite simple.

The only things you’d need are:

- text field(not rich-text) or a dropdown(If you’d like to limit the module to certain icons). I’ll call it “icon name”
- a bit of HTML

The default layout of the module should be:

`<i class="fal fa-{{ module.icon_name }}"></i>`

That’s it 😀

If you’re going the text-field way the user will need to put the icon name without “fa-” into the field like  
heart, house…

Of course you can add a ton of options here like

- changing the “icon weight”
- changing the sizes
- and what ever you’d like to do

for the icon weight:

My personal favorite is to create a select option with the names and the associated values.

E.g:

**Name / Value**

Thin / fal

Regular / far

Solid / fas

Duo / fad

If you’d like to use something completly different like material icons this is the way to go

best,

Anton

---

<div class="post-metadata">

**Author:** ![fdido](https://avatars.discourse-cdn.com/v4/letter/f/ba9def/32.png) [@fdido](https://community.hubspot.com/u/fdido)\
**Post date:** [April 16, 2022, 4:50am UTC](https://community.hubspot.com/t/custom-icon-fonts/48883/5 "2022-04-16T04:50:38Z")

</div>

dude said “simple” lol