POWER Mini Icon Module
How to configure the Mini Icon module for POWER Pro theme in HubSpot
Adding the Mini Icon to your pages will not have a significant impact on page speed when using the "Icon" setting.
Low impact for "Image" setting when properly sized and compressed.
Can cause an increase in page load speed based on file type/size of the image when using the "Image" setting.
Vector images (SVG) help keep file sizes to a minimum and are best for icons.
Convert images to WebP where possible to meet criteria to serve images in next-gen format.
To reduce image file sizes without losing quality, use TinyPNG to compress your images (JPG, PNG, WebP).
What is the difference between a Mini Icon and HubSpot Icon?
The POWER Mini Icon module has more styling options and flexibility built-in.
Icon > Icon
Choose an Icon from the Icon Library.
Icon > Icon Image
Upload a custom image to use as an Icon. You can also add/modify the Alt Text for your image.
Layout > Icon Type
Choice of Icon or Image, must match the Icon setting to work properly.
For Icons from the Icon Library, set to Icon.
For custom images, set to Image.
Layout > Alignment
Specify the alignment of the icon within the section and/or column. Choices are Left (default), Center, and Right.
Layout > Margin Top, Margin Bottom, Margin Right, Margin Left
Individual settings for margin can be set in pixels, the default is 0px. Refer to Settings that apply to all Mini Modules for more details about using margin and padding to style a section and/or column.
Style > Icon Style
Choice of Circle (default), Square, or No Background. Only works for icons from the icon library, not custom images.
Style > Color Scheme
Choice of Light, Dark, or Primary.
Primary uses the primary color as defined in your theme settings.
Tip: If you change the background color for the module, the definition of Light Color scheme is a light background with dark text and Dark Color scheme is a dark background with light text.
Style > Background Color
Ability to define a custom background color using a Hex code or the Color Picker tool.
If you are using a custom background, Color Scheme must be set to Light or Dark, this option will not override Primary.
Style > Icon Size
Ability to set the size of the icon from 0 - 100 pixels.
Tip: It is generally not recommended to set this lower than 16 px to ensure the icon remains legible.
Style > Icon Color
Ability to define a custom icon color using a Hex code or the Color Picker tool. Can be used in combination with any Icon Style or Background Color.
Style > Padding Top/Bottom and Padding Left/Right
Ability to define padding in pixels equally to the top and bottom and/or left and right of the icon.
Animation
Checkbox to turn on/off Animate on Scroll. Turning off here will only apply to this module, to turn animation off globally refer to Theme Options for Animations.
Ability to change the Animation Type and Delay for the Icon.
Icon > Icon
Rocket icon from Icon Library
Style > Icon Style
Circle
Style > Color Scheme
Primary
Icon > Icon
Rocket icon from Icon Library
Style > Icon Style
Square
Style > Color Scheme
Primary
Icon > Icon
Rocket icon from Icon Library
Style > Icon Style
No Background
Style > Color Scheme
Light
Style > Icon Color
Custom (to match Primary)
Icon > Icon Image
Custom Rocket added as SVG
Icon > Icon Image
Custom Image added as WebP
DESIGN SOMETHING COOL WITH THIS POWER MODULE?
Share it with us!- MODULE OVERVIEW
- SEC Accordion
- SEC Breadcrumbs
- Coming Soon
- SEC CTA
- SEC Form
- SEC Images
- SEC Map
- SEC Post Preview
- SEC Simple Listing
- SEC Stats Counter
- SEC Steps
- SEC Timeline
- Sticky Sub-Menu
- SUB Accordion
- SUB Stats Counter
- SUB Steps
- Mini CTA
- Mini Icon
- Mini Tag
- Previous Next Navigation
- Page Settings
- HS Heading
- HS Divider
- HS Rich Text
- Back to Module Library