# 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:** 1\
**Showing post:** 4

<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

---

_[View the full topic](https://community.hubspot.com/t/custom-icon-fonts/48883)._