Articles on: Site editing
This article is also available in:

Icons settings

Icons help draw attention to key elements, visually complement the text, and make the website interface more understandable. With Weblium, you can add icons using built-in services or upload your own.


In this article, you will learn how to add icons and customize their background, color, and size.


Contents:


Adding an Icon element


You can add this element to an existing filled or empty column in one of your blocks. To do this, click on the add new element icon and select the Icon element from the list of available elements:

Tip: You can find this element in the Media tab when adding an element. The Icon element is also found as part of other elements, such as Icon List or Back to Top. In such elements, icon settings will be configured in the same way as in the steps described in the following sections.


Important: This element is currently unavailable for the Flex block. Instead, you can use the Image element in this block.


Adding an icon


  1. To change the icon, click on it and select Change icon from the context menu:

Tip: You can also change the icon via the element settings by clicking on the gear icon in the context menu.


  1. In the new window, you can select a suitable icon from the integrated services:

Note: Since the platforms are international, we recommend entering keywords in different languages, including English.


  1. For Phosphor and Material services, you can additionally set the desired weight and activate the fill by clicking on the filter icon:

Note: Activating the fill may change the weight of the icons.


  1. If you want to upload your own icon, go to the My icons tab. Click on the Upload button, then select the desired file from your device:

Important: Custom icons can only be uploaded in .svg format. The recommended size is up to 10 KB. The maximum size is 10 MB.


Note: .svg is a vector format that allows you to scale images without losing quality. However, some .svg files may contain raster images (e.g., .png or .jpg) inside, which may cause the system to reject the file and display an error during upload.


Customizing icons


Once you have added an icon to a block, you can customize its appearance — change its size, background, and color.


  1. To open the element settings, click on the icon and press the gear icon in the context menu:

  1. In the General tab, you can change the icon itself, select its size from three available options, and specify the desired color:

Important: certain icons may have built-in styles that cannot always be changed with the editor tools — you may see a different color on the published site, even though everything is displayed correctly in the editor. In this case, if using the desired color is critical, it is worth choosing a different icon.


Tip: You can go to the color settings without opening the element settings. To do this, simply click on the icon, and you will see the color icon in the context menu.


  1. In this tab, you can also pin the element so that it remains on the screen while viewing the site:

Note: You can learn more about pinning elements in our article. Please note that this feature is not available in all blocks.


  1. Go to the Background tab to customize the icon background — Color, Image, or leave the icon without a background:

  1. In the Action tab, you can choose what will happen when the icon is clicked — for example, you can redirect visitors to a specific page, open a pop-up window, etc.:

  1. Don't forget to publish your site for the changes to appear on it.


Updated on: 01/15/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!