Skip to content
Dotweb
Log in

Categories

Editing icons

Add icons to your pages and customize their alignment, size, and color.

On this page

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

Here are some reasons to 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 help you draw attention to specific page elements with relevant images.
  • Consistent appearance: your icons display 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:

  • Headline block
  • About us block
  • Columns block
  • Pricing block
  • Schedule block
  • Why Choose Us block
  • Custom block

Customizing the icon

The customization options for an icon include:

  • Changing the alignment
  • 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.

    The icon control panel showing the alignment options

  2. Click the alignment option you like and click anywhere on the field to apply the changes.

Changing the icon

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

    The Replace icon button in the icon control panel

  2. In the Icon settings, scroll down to see all the icons in our extended icon gallery, or use the search if you know what kind of icon you’re looking for.

    The Icon settings gallery with a search field

  3. Click Save to submit.

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

Automatic saving

Your changes are 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.

Dragging the bottom-right control to resize an icon

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.

Resizing a set of social media icons together

Changing icon color

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

The Design option on the Website Builder Topbar

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.

Domain search

Prices exclude VAT, which is added at checkout.

Cookie settings

Choose what Dotweb may store in your browser. You can change your choice at any time under Cookie settings at the bottom of every page. Read more in our privacy policy.

Necessary

Always on

These keep the site working and remember the choices you make on it, such as language and currency. They don’t track you, so they’re always on.

NamePurposeDurationProvider
currencyCookieRemembers the currency prices are shown in.Session, or 1 year once you choose oneDotweb
localeCookieRemembers the language you chose.1 yearDotweb
consentCookieStores this choice.6 monthsDotweb
upm-brand-config:*Local storageCaches the domain search’s settings.Until clearedOur billing partner
upm_guest_sessionCookieSet by our checkout to keep your basket and checkout session.Up to 1 dayOur billing partner

Analytics

Analytics shows us which pages and features are used, so we can improve the site. We also record what you search for in the knowledge base and the domain search, to improve the site and our help articles. Sessions may also be recorded to see where pages are hard to use, with everything you type into forms and the text of your searches masked in the recording. Our analytics partner stores the data in the EU and anonymizes IP addresses. Nothing is set or sent unless you switch this on.

NamePurposeDurationProvider
ph_*Cookie, local storage and session storageAn anonymous ID and session, so we can see which pages and features are used.Up to 1 yearOur analytics partner (EU)