How to use the Icon element


In this article, we’ll go over the Icon element and how to use the element in GemPages.


What is the Icon element?

The Icon element is one of GemPages’ Base elements which is multi-purpose and flexible in functionalities. You can place the element anywhere on the page and even link it to scroll to an anchor link.

Add the Icon element onto your page

Step 1: From the GemPages Dashboard, open your selected page and enter the Editor via the “Edit” button.

Step 2: From the left sidebar, drag & drop the Icon element from the left sidebar onto your preferred spot on the page.

The element’s configurations will be available on the left sidebar. We’ll go over these parameters in the next sections.


Configure the Settings tab



This section will display your currently selected icon, hit “Choose Icon…” to browse the icon library. After selecting an icon, hit "Save" to complete the action and exit the library.



Change the color of the icon using the provided color palette or enter a hex/RGB color code.



Adjust the icon size in pixels using the slider or the mini box.



Align the icon in relation to its position in the section in 3 positions: Left, Centered, or Right.




The Link section allows you to link the icon to another page. It could be your own pages, a URL to any other website, or even a section of the current page.



Pick link

Hit this button to send visitors to a destination page. The link picker window will appear for you to select the link to add. Two options at this point: Enter the link to the Custom URL field or choose from the tabs below.

Pages, Collections, Products, and Articles: internal links to other pages of your store.
Scroll to: this option allows you to leap to a specific section of the current page. For more information, see this article about anchor links.


Here's an example of using the Scroll to feature in action:


Email: Visitors can send emails to your address with the subject and body pre-filled.
Phone: Shows your visitors your phone number and the option to call.

Keep in mind that custom URLs should include “https://” in order to function properly. For instance, the URL to GemPages official website should be “” instead of “


The Open Link In drop-down lets you choose between opening the linked URL in a new browser tab or stay on the current tab. 

Unless you use the anchor link function to scroll down, it’s best to open the URL in a New Tab.



Extra Class

Coding is second nature to you and you wish to customize the Icon element even further? Feel free to set a class name in this field and refer to it later in the CSS file.



Configure the Design tab

Don’t forget to fine-tune the element’s look and feel using the Design tab before hitting “Save” and “Publish” to bring your icon to the live page!


Check out more elements here. Should you need any further assistance, our GemPages Support Team is always here for you.

You can reach us at any time via email or live chat.


Was this helpful?