Social Icons

Follow Me

There is a default Follow Me module in HubSpot that directs users away from your site to your respective social media pages. Learn more about this module and how to add icons here.

We styled the icons in the Follow Me module, so by default they look like this:

Act2.1 Follow Me module

You can add the social-icons class to your Follow Me module to apply your theme styles:

Act2.1 Follow Me module with Social Icons class

Act2.1 Follow Me module - social-icons class

If placed inside a White Content wrapper, the icons are white in color, automatically:

Act2.1 Follow Me module with Social Icons class inside White Content wrapper

There are a few additional classes that you can add along social-icons to change styles:

Act2.1 Follow Me module with social-icons and theme classes

CSS Class Sample (with the default colors)
social-icons theme Act2.1 Follow Me module with social-icons and theme classes
social-icons dark Act2.1 Follow Me module with social-icons and dark classes
social-icons white Act2.1 Follow Me module with social-icons and white classes
social-icons full theme Act2.1 Follow Me module with social-icons, full and theme classes
social-icons full dark Act2.1 Follow Me module with social-icons, full and dark classes
social-icons full white Act2.1 Follow Me module with social-icons, full and white classes

Custom Module

You may probably find some limitations with the default Follow Me module. You cannot reorder icons by default or list different icons for different instances of the module. That's why we created our own customized module, named Act21 Social Icons, where you can add as many icons as you want, reorder, even add custom icons with custom colors:

Act21 Social Icons Custom Module

Act21 Social Icons - Add Icons

Act21 Social Icons - Slack icons

Act21 Social Icons - Custom Icon

The styling is the same as before — by default the icons look like this:

Act2.1 Follow Me module

And you can apply the same classes we've shown on the Follow Me module above to change styles and make the icons more consistent with your theme, but this time you can add the classes in the module itself, where we included a Custom class field. This is great on Flexible Columns, where you cannot add CSS classes by default.

Act21 Social Icons - Custom Class field

You can still add the classes using the default CSS class field:

Act21 Social Icons module - CSS Class

Here are all the available options:

CSS Class Sample (with the default colors)
social-icons theme Act2.1 Follow Me module with social-icons and theme classes
social-icons dark Act2.1 Follow Me module with social-icons and dark classes
social-icons white Act2.1 Follow Me module with social-icons and white classes
social-icons full theme Act2.1 Follow Me module with social-icons, full and theme classes
social-icons full dark Act2.1 Follow Me module with social-icons, full and dark classes
social-icons full white Act2.1 Follow Me module with social-icons, full and white classes
Important note: All classes above will override your icon custom colors.
Using Act2 with the old Design Manager? Read this documentation.