How to Add Custom Social Icons in Hubspot Templates and Pages

Custom social media icons help your Hubspot content match your brand style while still using the built-in social sharing features. This guide shows how to replace default icons with your own graphics using the social module and CSS.

Understanding the Hubspot Social Icons Module

The social module in Hubspot templates lets you quickly add social media icons that link to your profiles. By default, it displays standard icon sets, but you can override those visuals with custom images using CSS.

Key points about the built-in social module:

• Supports popular networks such as Facebook, X/Twitter, LinkedIn, and others.
• Can be added to templates or individual pages.
• Icons are usually rendered as vector-style graphics or font icons.
• You can apply custom styles by targeting the module’s HTML and CSS classes.

The goal is to keep the module’s structure and links, but change how the icons look.

Prerequisites for Custom Hubspot Social Icons

Before modifying icons in Hubspot, prepare the following:

• Design assets: PNG or SVG files for each social network.
• Consistent sizes: For example, 24x24px or 32x32px for all icons.
• Access to Design Manager: Permission to edit templates and theme files.
• Basic CSS knowledge: Understanding of classes, background images, and hover states.

Having a set of matching icons ensures a consistent experience across all Hubspot pages.

Step 1: Add the Social Icons Module in Hubspot

First, insert the social module into your page or template.

Adding to a Hubspot Template

1. In your Hubspot account, go to Marketing > Files and Templates > Design Tools.
2. Open the template or theme layout where you want social icons to appear.
3. In the left sidebar, locate the Social Follow or similar social module.
4. Drag the module into the desired area of your Hubspot template, such as the header or footer.
5. Save and publish the template so changes apply to all associated pages.

Adding Directly to a Hubspot Page

1. Open the page editor from your Hubspot marketing dashboard.
2. Click Edit modules or similar to open the page structure.
3. Add the social module to a section or column on the page.
4. Configure each network by entering your social profile URLs.
5. Update or publish the page.

At this point, the default icons should be visible on your Hubspot page or template.

Step 2: Upload Custom Icon Files in Hubspot

Next, upload your custom icons so they can be referenced in CSS.

1. Navigate to Marketing > Files and Templates > Files.
2. Create a folder for your project, such as /custom-social-icons/.
3. Upload each icon file (for example, facebook.png, twitter.png, linkedin.png).
4. Copy the public file URLs for each icon. You will need these when writing CSS in Hubspot.

Keep icon names and formats consistent. This makes CSS rules easier to manage.

Step 3: Identify Hubspot Social Module Classes

To override the default visuals, you must know which CSS classes Hubspot uses for each social icon.

1. Open the published page or a preview in your browser.
2. Right-click a social icon and select Inspect or Inspect Element.
3. Locate the HTML element representing the icon (often an <i> tag or a link containing icon classes).
4. Note the specific CSS classes for each network, such as .hs-social-facebook, .hs-social-twitter, or similar.

These classes will allow you to target and style icons individually while still leveraging Hubspot’s existing module structure.

Step 4: Write Custom CSS for Hubspot Social Icons

Now you can create CSS rules to swap out the default icons for your custom graphics.

Where to Place CSS in Hubspot

• In your theme stylesheet within Design Tools.
• In a custom CSS file attached to your template.
• Within a page-level stylesheet if needed for a single Hubspot page.

Example CSS for Replacing Icons

The general approach is:

• Hide or override the default icon font or SVG.
• Apply a background image using your custom file URL.
• Set width, height, and background-size.

Example pattern (simplified):

• Target the container or link for the icon.
• Set display: inline-block; with fixed dimensions.
• Use background-image: url('your-file-url');.

Repeat this process for each social network you use in Hubspot. Include hover states if you want color changes on interaction.

Step 5: Test Custom Hubspot Icons on Live Pages

After applying CSS, verify that your new icons appear correctly on all Hubspot content where the social module is used.

1. Refresh the page and clear your browser cache if needed.
2. Confirm that each icon displays the correct graphic.
3. Hover over icons to ensure the cursor, hover color, or opacity work as expected.
4. Click each icon to verify it navigates to the correct profile or page.
5. Check the design on mobile, tablet, and desktop screen sizes.

If something looks misaligned, adjust padding, margin, or background-size in your Hubspot CSS rules.

Best Practices for Custom Icons in Hubspot

To keep your implementation stable and maintainable, follow these guidelines.

Design and Accessibility Tips

• Use high-contrast icons to maintain readability.
• Add descriptive alt text or accessible labels where appropriate.
• Ensure icons remain clear at small sizes for all Hubspot layouts.
• Consider hover effects that support keyboard and screen reader users.

Performance and Maintenance

• Optimize image file sizes to reduce page load times.
• Group icons into a sprite if advanced optimization is needed.
• Document your CSS rules and file locations inside your Hubspot theme.
• Avoid changing class names added by the social module to prevent breaking future updates.

Where to Learn More About Hubspot Social Modules

You can review full technical details and latest interface updates in the official documentation here: Hubspot custom social icons guide.

For broader marketing strategy, implementation help, and optimization around your Hubspot setup, you can also explore resources and services from Consultevo.

Conclusion: Brand-Consistent Social Icons in Hubspot

By combining the built-in social module with custom CSS and image assets, you can keep the convenience of automated links while fully matching your brand design in Hubspot. Upload your icons, target the correct classes, and test thoroughly across devices to maintain a polished, consistent appearance on every page.

Need Help With Hubspot?

If you want expert help building, automating, or scaling your Hubspot , work with ConsultEvo, a team who has a decade of Hubspot experience.

Scale Hubspot

“`