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
- Click the icon to call out its controls. On the panel, you will see the alignment options with the current one highlighted in grey.
- 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 settings.
- In the Icon settings, you can either scroll down and see all the icons in our extended icon gallery, or use the search if you know what kind of icon you’re looking for.
- Click Save to submit.
Repeat these steps with all other icons on the page if desired. Click Publish to make changes live.
Note: Your changes will be saved automatically every two minutes and also when you navigate to edit another page.
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.
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.
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.
In the Colors tab of the Website design menu, you see your color palette. The Secondary color of the palette (the one right in the middle) is the color of your icons. You can either pick another palette or customize this one and change the Secondary color in Settings.
Read more about creating custom color palettes in our dedicated tutorial.
We hope this guide helped you. If you have any questions left, please contact our Support Team.
Ready to use your new knowledge? – Edit your site!