How to Use Icons on Your Website

Icons are powerful visual elements that help enhance readability and navigation. They can be used to represent actions, categories, or features in a visually engaging way.

1. Adding an Icon to Your Page

1. Open the Elements Panel on the left.
2. Find the Icon Element and drag it onto your page.
3. Drop it where you see a thick gray line in your block.

2. Customizing the Icon

Resizing the Icon

• Click on the icon to select it.
• Drag the resize handles to adjust the size manually.
• Use the Size Controls in the options toolbar for precise adjustments.

Changing the Icon

• Select the icon and click on Icon Options in the toolbar.
• Choose between Outline or Glyph versions.
• Use Category Filters (e.g., Shopping, Arrows, Social) to find a relevant icon.
• Select the desired icon to replace the default one.

3. Styling the Icon

Background & Borders

• Background Fill: Choose between Filled, Outlined, or No Background.
• Background Color: Set a custom background color for contrast.
• Icon Color: Adjust the color of the icon independently from the background.
• Border & Corners:Set sharp edges, rounded corners, or a circle shape.
• Use Custom Styling to control corner roundness.

4. Adding Hover Effects

1. Select the icon and go to Color Options.
2. Click on the Hover State Toggle.
3. Customize the hover background color, icon color, border, and shadow.
4. Now, when a visitor hovers over the icon, it will change colors or styles dynamically.

5. Aligning & Spacing Icons

• Duplicate an icon to place multiple icons in line with each other.
• Use the Spacing Setting to adjust gaps between multiple icons.
• Drag & Drop icons anywhere on the page to rearrange them.

6. Making Icons Responsive

For Tablet & Mobile Views

• Adjust icon size to fit smaller screens.
• Modify the background size separately for better visibility.
• Check hover effects to ensure they work well on touchscreens.

Why Use Icons?

Enhances readability – Icons provide quick visual references.

Improves navigation – Great for menus, CTAs, and feature highlights.

Fully customizable – Modify size, colors, borders, and effects.

Responsive design – Optimizes layout for different screen sizes.

By strategically placing icons on your website, you can improve user experience and make content more visually appealing.