Blog Post
How to Size an Icon in a HubSpot Module – Beginners Guide
Icons play an important part in web design and user experience, offering visual cues and improve the look of your HubSpot pages.
In this guide, we’ll walk you through how to size an icon in HubSpot module with the help of HubSpot icon library and style fields.
We’ll cover everything you need to know about sizing icons, from using HubSpot’s built-in tools to inserting icons from external sources.
How to Size an Icon in a HubSpot Module – Introduction
Icons are small but effective design elements.
They not only break up text but also add clarity and visual appeal to your HubSpot modules.
Incorrect icon sizes can throw off your page layout, affect mobile responsiveness, and detract from your site’s user experience.
By learning how to use HubSpot module style fields, you can ensure that your website looks aesthetics.
Let’s explore how to resize Hubspot Icon SVG and best practices for making icons a part of your design.
How Do HubSpot Modules Work?
A HubSpot module is a building block for adding functionality and content to your website.
It can be customized through various style fields, including size, color, and padding, to make your website stand out.
When adding icons to these modules, HubSpot provides many options:
- Insert icons from the HubSpot icon library
- Upload custom icons (such as HubSpot icon SVG or HubSpot icon PNG)
- Add icons through HubSpot module style fields
- Customize icon sizes through HTML or CSS
How to Size an Icon in HubSpot Module 2024
Insert Icons from HubSpot Icon Library
The HubSpot icon library is a fantastic resource for finding commonly used icons without needing to upload custom files.
These icons are vector-based, making them scalable without losing quality, ensuring that they look sharp on all devices.
How to Insert Icons from HubSpot Icon Library
Open the HubSpot Design Manager and locate the module where you want to insert the icon.
In the module settings, find the “Insert Icon” option.
Browse the HubSpot icon library for the appropriate icon that matches your design requirements.
Once the icon is inserted, go to the HubSpot module style fields to adjust its size.
Adjust Icon Size Using HubSpot Module Style Fields
Once your icon is in place, the next step is adjusting its size.
HubSpot modules offer predefined style fields that allow you to tweak icon properties.
Steps to Resize HubSpot Icon PNG
Open the module where your icon has been inserted.
Navigate to the HubSpot module style fields.
Locate the “Icon Size” field. This allows you to set the width and height of the icon.
Enter the desired dimensions.
HubSpot usually uses pixels (px) as the default unit for size.
Preview the icon size in both desktop and mobile views to ensure it is responsive.
Pro tip: For most standard icons, a size between 24px and 48px works well on desktops.
For mobile, you may need to scale them down slightly to maintain consistency in smaller layouts.
HubSpot Image Sizes
If you prefer to use your own icons instead of the HubSpot icon library, you can upload HubSpot icon SVG or HubSpot icon PNG files.
These file formats are the most commonly used for icons because of their flexibility and scalability.
Steps to Resize SVG Icons
Upload your SVG icon through the HubSpot File Manager or directly in the module.
Once inserted, click the icon and locate the HTML/Advanced Settings section.
You can set the width and height of the SVG icon by adding the following CSS code:
.custom-icon {
width: 32px;
height: 32px;
}
Replace “32px” with your desired size.
SVG icons remain sharp regardless of size, making them perfect for responsive designs.
Steps to Resize PNG Icons
For HubSpot icon PNG files, resizing might affect image quality, so it’s important to upload high-resolution PNGs to begin with.
Upload the PNG file in HubSpot File Manager.
Insert it into your module.
Navigate to HubSpot module style fields to adjust the size.
You can also use custom HTML or CSS to define the size like this:
<img src="path-to-your-icon.png" style="width:40px; height:40px;">
Pro Tip:
PNG icons are raster images, which means resizing them up could result in a blurry or pixelated appearance.
Always use SVGs if possible for scalable, high-quality icons.
Sizing Icons Using HTML and CSS
Sometimes, the built-in style fields may not give you the flexibility you need for fine-tuning your icon sizes.
In such cases, you can turn to HTML or CSS to control the size of icons more precisely.
Steps to Size Icons via HTML
Open the HubSpot Design Manager and select the module containing your icon.
Switch to the HTML view.
You can also add a custom class in your style sheet like:
.icon-class {
font-size: 40px;
}
This method allows you to control size depending on the screen size (for example, adjusting icon sizes for mobile versus desktop).
Best Practices for Icon Sizing in HubSpot
To create the best experience, it’s important to follow some best practices when resizing icons in HubSpot:
Responsive Design
Always preview your website on different screen sizes to make sure your icons look great on both desktop and mobile devices.
Consistency
Keep the size of your icons consistent across your website. This ensures a cohesive look and improves the user experience.
File Size
If you’re uploading custom icons (PNG files), make sure they are optimized to reduce load time.
How to Size an Icon in HubSpot Marketplace Module Group
If you’re using a third-party module from the HubSpot marketplace, icon sizing may vary slightly.
Many marketplace modules come with their own design settings, but they follow the same principles for resizing icons.
Open the marketplace module settings.
Look for the Style or Design tab.
Adjust icon size via built-in fields or apply custom CSS for more control.
How to Size an Icon in HubSpot Module HTML – FAQs
Can you crop an image in HubSpot CRM?
Yes, you can crop images in HubSpot CRM using the built-in image editor. Simply upload your image, click on it, and select the “Edit” option to access cropping tools, allowing you to adjust the dimensions before using it in your content or modules.
How do I edit a favicon in HubSpot free CRM?
To edit a favicon in HubSpot Free CRM, go to Settings > Website > Pages and navigate to the Branding tab.
From there, you can upload or replace your favicon by selecting the appropriate file under the “Site Favicon” section.
How do I add an icon in HubSpot CRM?
To add an icon in HubSpot, you can use the Design Manager to insert icons from the HubSpot icon library or upload custom icons (SVG or PNG) into a module.
Once inserted, you can customize the icon’s size and style using the module’s style fields or custom CSS.
How do I resize an image in HubSpot CRM?
To resize an image in HubSpot CRM, go to the File Manager, select the image, and click the Edit option.
From there, you can adjust the image dimensions by entering new width and height values or use the drag-and-drop tool to resize it.
Relevant Guides
Can I Delete Delivered only HubSpot Email
