Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V25 released on August 18th 2022 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-img_mm_faq
FAQs

Have questions?
We have answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Other questions?
CONTACT US / LIVE CHAT

LIVE Chat 7CT AM – 7CT PM – Get in touch here

POWER Mini Icon Module

How to configure the Mini Icon module for POWER Pro theme in HubSpot

icon-module-mini-icon

MINI ICON

Mini but mighty, this icon module gives you the flexibility to add an icon to create your own section layouts.

mini-icon-example-layout

Page Speed Impact

LOW

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.

MEDIUM

Can cause an increase in page load speed based on file type/size of the image when using the "Image" setting.

TIPS

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).

FAQ

What is the difference between a Mini Icon and HubSpot Icon?

The Mini Icon module allows for more styling options including the ability to change the icon color, replace it with an image, add background color, and more.

The HubSpot Icon module only allows you to choose the icon from the library, there is no option for image icons.

Module Options

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.

Configurations

Circle Mini Icon

mini-icon-circle

Icon > Icon

Rocket icon from Icon Library

Style > Icon Style

Circle

Style > Color Scheme

Primary

Square Mini Icon

mini-icon-square

Icon > Icon

Rocket icon from Icon Library

Style > Icon Style

Square

Style > Color Scheme

Primary

Mini Icon - No Background

mini-icon-no-background

Icon > Icon

Rocket icon from Icon Library

Style > Icon Style

No Background

Style > Color Scheme

Light

Style > Icon Color

Custom (to match Primary)

Image Icon

mini-icon-custom-image

Icon > Icon Image

Custom Rocket added as SVG

3D Image Icon

mini-icon-3d-image

Icon > Icon Image

Custom Image added as WebP

DESIGN SOMETHING COOL WITH THIS POWER MODULE?

Share it with us!

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.