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
- Open the Elements Panel on the left.
- Find the Icon Element and drag it onto your page.
- 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.
- Gebruik de 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.
- Gebruik 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.
- Gebruik Aangepaste styling to control corner roundness.
4. Adding Hover Effects
- Selecteer de icon and go to Color Options.
- Click on the Hover State Toggle.
- Customize the hover background color, icon color, border, and shadow.
- Now, when a visitor hovers over the icon, it will change colors or styles dynamically.
5. Aligning & Spacing Icons
- Duplicaat an icon to place multiple icons in line with each other.
- Gebruik de Spacing Setting naar 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.