Online Store

Editing icons

Icons are an essential part of delivering information. Icons help improve the visual appearance of the page and help your visitors easily digest information. 

Here are some reasons why you should add icons to your page: 

  • Better user experience: Your visitors focus not only on the text but also on the visual design of a website.
  • Visual aid: Icons can help you draw attention to specific page elements with relevant images.
  • Consistent appearance: You can rest assured that your icons will be displayed just the way you want them across all devices without losing quality.

Blocks with icons

You can choose a block that contains icons from the Block library:

Customizing the icon 

The customization options for the icon include the following: 

  • Alignment changing  
  • Changing the icon
  • Customizing the size of the icon
  • Changing the icon’s color

Let’s explore these options in detail.

Changing icon alignment

  1. Click the icon to call out its controls. On the panel, you will see the alignment options with the current one highlighted in grey.

    Editing-icons-1.png
  2. Click the alignment option you like and click anywhere on the field to apply the changes. 

Changing the icon

Click the icon to call out its controls. On the panel, click Replace icon to open the Icon libraries.

Editing-icons-2.png

There are two tabs in the Icon libraries: Premium and Free. 

The free library of more than 3000 static icons is available for all our users. Here, you can either scroll down and see all the icons or use the search if you know what kind of icon you’re looking for.

B2C - Editing icons new - 1.png

After finding the perfect icon, click it and then click Save.

 

B2C - Editing icons new - 2.png

Repeat these steps with all other icons on the page if desired. Click Publish to make changes live.

Note: Additionally, our Silver and Gold subscribers can use 1.2 million icons, including static and animated options for any style. Read more about the Premium icon library and how to use it. 

Customizing the size of the icon

To change the size of your icon, click it and drag the bottom-right control to adjust its size. 

Editing-icons-4.png

You can save time resizing all the icons in a row by holding the Shift button on your keyboard. 

This feature also works for the social media icons set.

Icon-resizing-1.png

Changing icon color

The overall website color palette determines the color of the icon. To change it, click the Design on the Topbar of the Sitebuilder.

Editing-icons-5.png

In the Colors tab of the Website design menu, you see your color palette. You can either pick another palette or customize this one to change the icon color on your site. 

Read more about creating custom color palettes in our dedicated tutorial.

We hope this guide has helped you. If you have any questions left, please contact our Support Team

Ready to use your new knowledge? – Edit your site!

Was this article helpful?
1 out of 1 found this helpful