# Icons with the wrong icon\_set

**URL:** <https://community.hubspot.com/t/icons-with-the-wrong-icon-set/138511>\
**Category:** CMS Development\
**Created:** [August 25, 2025, 8:37am UTC](https://community.hubspot.com/t/icons-with-the-wrong-icon-set/138511 "2025-08-25T08:37:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![albertsg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/albertsg/32/99473_2.png) [@albertsg](https://community.hubspot.com/u/albertsg)\
**Post date:** [August 25, 2025, 8:37am UTC](https://community.hubspot.com/t/icons-with-the-wrong-icon-set/138511/1 "2025-08-25T08:37:32Z")

</div>

Hello Community! 👋  
I’m building a module that includes an icon field and despite having _ **fontawesome-6.4.2** _ as the default icon\_set, when I select certain icons I get the following error in the DOM (using ?hsDebug=true):  
_TemplateError{severity=FATAL, reason=SYNTAX\_ERROR, item=OTHER, message=‘Error in `/my-theme/modules/navigation.module/module.html` on line 42: InterpretException: Can’t find icon ‘arrow up right dots’ in set ‘ **fontawesome-5.0.10** ’’, fieldName=‘null’, lineno=10, startPosition=1, scopeDepth=5, category=UNKNOWN, categoryErrors=null}_

So I clearly see it’s trying to find the icon in the wrong icon\_set, what I don’t understand is why the icon set is not correct 🤔  
This is the code used to display the icon:

{% icon

name=“{{module.tab\_icon.name}}”,

style=“{{module.tag\_icon.type}}”,

unicode=“{{module.tag\_icon.unicode}}”,

icon\_set=“{{module.tab\_icon.icon\_set}}”,

width=“20”,

height=“20”

%}

When I print the {{_module.tab\_icon.icon\_set_ value alone}}, it shows the correct icon\_set, so I’m not sure why it’s selecting a different icon\_set when loading the icon.  
Has anyone encountered a similar issue? It feels like just a simple thing yet it’s driving me crazy 😑  
Thank you!

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [August 25, 2025, 9:43am UTC](https://community.hubspot.com/t/icons-with-the-wrong-icon-set/138511/2 "2025-08-25T09:43:13Z")

</div>

@albertsg it looks like you have a typo in both your style and unicode values. “tag” instead of “tab”

* * *

**Barry Grennan**

[Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity)

[Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/contact?utm_source=HubSpotCommunity) | [LinkedIn](https://www.linkedin.com/in/barrygrennan)

---

<div class="post-metadata">

**Author:** ![albertsg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/albertsg/32/99473_2.png) [@albertsg](https://community.hubspot.com/u/albertsg)\
**Post date:** [August 25, 2025, 9:54am UTC](https://community.hubspot.com/t/icons-with-the-wrong-icon-set/138511/3 "2025-08-25T09:54:00Z")

</div>

OMG, thank you @BarryGrennan! Of course it had to be a typo, how come I didn’t see it! 😂  
Thanks for the attention to the detail!

---

<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:** [August 25, 2025, 10:00am UTC](https://community.hubspot.com/t/icons-with-the-wrong-icon-set/138511/4 "2025-08-25T10:00:20Z")

</div>

Hey @albertsg,

Just tested it and it and can’t reproduce it…

 ![153966iF60AF06A9779CAC9.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/7/072df8a6a61a3d0674725cc807e8b63b2ec05a05.png)

This is my test module html setup

```lia-code-sample
{# only for testing purposes #}
{{module.icon_field}}
{% if is_in_previewer %}
<style>
 .icon svg{
	width:24px;
 }
</style>
{% endif %}

{# the actual icon #}
<div class="icon">
 {% icon
	name="{{ module.icon_field.name }}"
	style="{{ module.icon_field.type }}"
	unicode="{{ module.icon_field.unicode }}"
	icon_set="{{ module.icon_field.icon_set }}"
 %}
</div>

```

And the output / preview

![153967i1266EA18AFC82447.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/c/cf44a99dda1e674806b6e4886c1dcac437797abe.png)

Personally, I’m using a custom setup when using FA icons as I’m using FA pro in all of my projects.

The setup is quite simple

fa-macro.html

```lia-code-sample
{% macro fa_icon (weight, fa_name) %}
 <i class="{{weight}} fa-{{ fa_name|cut('fa-') }} custom-icon></i>
{% endmacro %}

```

in the modules

```lia-code-sample
{% from 'PATH/TO/MACRO' import fa_icon %}

...
{% set icon_weight = module.style.icon.icon_weight %}
{% set icon = module.icon_name %}

...

{{ fa_icon(icon_weight, icon) }}

```

the icon\_weight is a choice field with values like far, fal, fas… basically all available [FA styles](https://docs.fontawesome.com/web/dig-deeper/styles)

The icon name is a text field so the user can just copy/paste the icon name into it

Way more control and easier to use.

best,

Anton

---

<div class="post-metadata">

**Author:** ![albertsg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/albertsg/32/99473_2.png) [@albertsg](https://community.hubspot.com/u/albertsg)\
**Post date:** [August 26, 2025, 7:22am UTC](https://community.hubspot.com/t/icons-with-the-wrong-icon-set/138511/5 "2025-08-26T07:22:00Z")

</div>

This is great, thanks for sharing @Anton! Really appreciate it 🙂