Add own icon to icon library?

[PRehn]

Is it possible to add a new icon, that I have designed myself, to be used as an icon in HubSpot? I have a set of icons I want to use instead of those available via Font Awesome.

[Anton · Accepted solution]

Hey @PRehn, 

yes it's possible to integrate a custom icon library. For instance I'm using Phosphor Icons on my GraphiSpot.

It's a bit code related, but depending on the desired result quite very simple to implement.

First you have to decide what icon library you'd like to use.

If it's an icon library that provides you some sort of code-snippet(like FontAwesomePro) to get it to work, you can put this code-snippet either in the base.html(might have a different name) of your theme or in the Page header settings, which you find here: Settings(gear icon top right) -> Content -> Pages -> HTML Header.

Once done, you can clone the desired module (or create a new one) add a text("Icon name";not rich-text) field to it, paste following code and you're done.

{% set custom_icon_name = module.icon_name|cut("fa-") %}
...
<i class="fa-regular fa-{{ custom_icon_name }}"></i>

Everytime you want to use an icon from FontAwesomePro, you'll need to simply put in the name of it and it works. You can even go further and use a choice field("Icon name selector") for "most used" icons or if you want to provide not all icons. To do so, create a choice field and put the icon name as value in it. 

The code will look very similar:

<i class="fa-regular fa-{{ module.icon_name_selector }}"></i>

You can create a mix of those two options like by adding a second choice field("Icon select") with "custom" and "selector" values and write the code like this:

{% if module.icon_select == "custom" %}
   {% set custom_icon_name = module.custom_icon_name|cut("fa-") %}
{% elif module.icon_select == "selector" %}
   {% set custom_icon_name = module.custom_icon_selector %}
{% endif %}
...

<i class="fa-regular fa-{{ custom_icon_name }}"></i>

There are endless options here 😁

If your icon library is providing you fonts(like Phosphor Icons do), it's a bit more on the coding side of things, but quite easy. To implement, you can upload them to the theme folder so your structure looks like

- theme
- - css
- - - theme.css
- - - main.css
- - - icons
- - - - iconfont.css
- - fonts
- - - iconfont.ttf
- - - iconfont.otf
- - - ...
...

In your theme.css just add a so-called @font-face rule at the top which looks like this:

@font-face { 
        font-family: "Phosphor-Light";
        src:
            url("{{ get_asset_url('./../fonts/phosphor-light/Phosphor-Light.woff2') }}") format("woff2"),
            url("{{ get_asset_url('./../fonts/phosphor-light/Phosphor-Light.woff') }}") format("woff"),
            url("{{ get_asset_url('./../fonts/phosphor-light/Phosphor-Light.ttf') }}") format("truetype"),
            url("{{ get_asset_url('./../fonts/phosphor-light/Phosphor-Light.svg') }}") format("svg");
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }

simply replace the name and paths to your use-case.

Also there should be a CSS provided by the icon library. You should include it in the main.css like this:

{% include "./icons/iconfont.css" %}

To use them, it's the same as the first option(text/choice/mix)

Other options:

- Image upload. Yes, you can use the image field for uploading icons as SVGs. 

- Choice field. Something that many people don't know: You can place the whole SVG code as a value of a choice field 😉 <- this might be the best option for your situation

Happy to chat, if you have further questions. 

best, 

Anton

[Anton · Accepted solution]

Hey @PRehn, 

yes it's possible to integrate a custom icon library. For instance I'm using Phosphor Icons on my GraphiSpot.

It's a bit code related, but depending on the desired result quite very simple to implement.

First you have to decide what icon library you'd like to use.

If it's an icon library that provides you some sort of code-snippet(like FontAwesomePro) to get it to work, you can put this code-snippet either in the base.html(might have a different name) of your theme or in the Page header settings, which you find here: Settings(gear icon top right) -> Content -> Pages -> HTML Header.

Once done, you can clone the desired module (or create a new one) add a text("Icon name";not rich-text) field to it, paste following code and you're done.

{% set custom_icon_name = module.icon_name|cut("fa-") %}
...
<i class="fa-regular fa-{{ custom_icon_name }}"></i>

Everytime you want to use an icon from FontAwesomePro, you'll need to simply put in the name of it and it works. You can even go further and use a choice field("Icon name selector") for "most used" icons or if you want to provide not all icons. To do so, create a choice field and put the icon name as value in it. 

The code will look very similar:

<i class="fa-regular fa-{{ module.icon_name_selector }}"></i>

You can create a mix of those two options like by adding a second choice field("Icon select") with "custom" and "selector" values and write the code like this:

{% if module.icon_select == "custom" %}
   {% set custom_icon_name = module.custom_icon_name|cut("fa-") %}
{% elif module.icon_select == "selector" %}
   {% set custom_icon_name = module.custom_icon_selector %}
{% endif %}
...

<i class="fa-regular fa-{{ custom_icon_name }}"></i>

There are endless options here 😁

If your icon library is providing you fonts(like Phosphor Icons do), it's a bit more on the coding side of things, but quite easy. To implement, you can upload them to the theme folder so your structure looks like

- theme
- - css
- - - theme.css
- - - main.css
- - - icons
- - - - iconfont.css
- - fonts
- - - iconfont.ttf
- - - iconfont.otf
- - - ...
...

In your theme.css just add a so-called @font-face rule at the top which looks like this:

@font-face { 
        font-family: "Phosphor-Light";
        src:
            url("{{ get_asset_url('./../fonts/phosphor-light/Phosphor-Light.woff2') }}") format("woff2"),
            url("{{ get_asset_url('./../fonts/phosphor-light/Phosphor-Light.woff') }}") format("woff"),
            url("{{ get_asset_url('./../fonts/phosphor-light/Phosphor-Light.ttf') }}") format("truetype"),
            url("{{ get_asset_url('./../fonts/phosphor-light/Phosphor-Light.svg') }}") format("svg");
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }

simply replace the name and paths to your use-case.

Also there should be a CSS provided by the icon library. You should include it in the main.css like this:

{% include "./icons/iconfont.css" %}

To use them, it's the same as the first option(text/choice/mix)

Other options:

- Image upload. Yes, you can use the image field for uploading icons as SVGs. 

- Choice field. Something that many people don't know: You can place the whole SVG code as a value of a choice field 😉 <- this might be the best option for your situation

Happy to chat, if you have further questions. 

best, 

Anton

[PRehn]

It's just that in some modules, there is only the possibility to add icons and when choosing icons I only get to the FA library. Do you know a way to tweak this?

[Crystal_Hopper · Accepted solution]

I found a few other threads that might help also. It does look like, as @Anton said, there's some coding that needs to happen:

Solved: HubSpot Community - Add icons to Font Awesome's HubSpot default library? - HubSpot Community

Solved: HubSpot Community - implement font-awesome pro icon - HubSpot Community

[Crystal_Hopper]

Hi @PRehn. Sorry, I have not seen a way to manipulate the Icon library. It's directly tied to Font Awesome. 

That being said, you can make an icon folder in File Manager and use the Image insert function to add whatever graphics you have uploaded to Hubspot. This is what I do when I'm using custom icons.