Icon Fields - How to target with CSS?

Occasional Contributor

Hi There,


I've been trying to get a selectable icon field to work within my module based off this blog post:



I'm able to get the icon to show up using this snippet:

{% icon
	name="{{ module.icon_field.name }}"
	style="{{ module.icon_field.type }}"
	unicode="{{ module.icon_field.unicode }}"

However I'm not able to figure out how I should target this with css as my attempts haven't seemed to work.  Any ideas?

3 Replies 3

Hi @JoshCM

thanks for the article. Didn't knew about that.

I've did it like this:

- create a new module for the icon; here's my code:


<div class="row">
<div class="container">
<div class="span12">
{% icon name="{{ module.icon_field.name }}" style="{{ module.icon_field.type }}" unicode="{{ module.icon_field.unicode }}" %}
</div> </div> </div>

- select any icon in the widget settings


- save it with a name which you can find quickly

- open a page with flex columns(not nessesary but 'more user-friendly')

- add the module you've just created to the flex column

- click on preview

- enable the browser inspector (for Chrome, Firefox, Opera and Edge it's "STRG+Shift+i"/"CMD+Shift+i")

- click on the selector/inspector icon("arrow"/top-left of the inspector window)

- hover the icon with your mouse; it should look something like this:

hubspot icon.JPG

- the yellow highlighted section on the left is the icon class



- you can add it to your CSS file


- also you can add 


.hs_cos_wrapper_type_icon svg{}

to the CSS and style the SVG




If tried to change the icon color but wasn't successful. I could add a background-color and different size options but noch the color.



a "better" alternative would be a complete custom icon module with one of those icon databases

- fontawesome 4.7(old but very popular)

- fontawesome 5.x(new, different source code, not compitabel with 4.7)

- Google Material Icons(never used them)

- Bootstrap2 Glyphicons(should be build in in HubSpot)


a possible module(fontawesome 4.7; other icon fonts should look similiar) could look like this:


<div class="row">
<div class="container">
<div class="span12">
<i class="fa fa-{{ widget.icon }}"></i>


just add a simple text widget(not rich-text) to the module and call it "icon".


If you haven't "installed" a icon font on your page, you'll need to add it. Simply paste the font-libary link to the <head>-tag of your website/Hub.

For fontawesome 4.7 it's:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


After you've placed it in the desired place of the page you can go to the fontawesome 4.7 cheatsheat and type in any name without the first "fa-"


For example:

you'll find 


as the first icon in the cheatsheet. To use it as an icon with the module you'll have to simply type in


in the text-field of the module. 



hope that helps





check Did my post help answer your query? Help the Community by marking it as a solution
Occasional Contributor

Hi Anton,


Thanks for all this information.  It's extremely helpful.  I was thinking about the 2nd method you mentioned as well, but thought it might be easier to have the icon picker for non-code savvy members of the team.  I think I might go that route and have the cheat sheet link in the help description for that field.


Thanks for all your help and info on this!

Occasional Contributor

I was able to solve this problem by using a span style and fill attribute.


<span style="fill: red;">{% icon name="{{ module.icon.name }}" set="fontawesome-5" style="solid" format="svg" width="64" height="64" %}</span>

Additionally I will replace "red" with a color picker snippet to look like this.

  <span style="fill: {{ module.icon_color.color }};">{% icon name="{{ module.icon.name }}" set="fontawesome-5" style="solid" format="svg" width="64" height="64" %}</span>

Feel free to ask any questions.  There may be a better way, this is what worked for me.