4. Icon

Making your website visually appealing and user-friendly is integral to grabbing the attention of visitors and ensuring a pleasant browsing experience. One effective way of doing this is by using graphic elements, such as the icon element.

Adding the Icon Element

You can easily add icons to your webpage. All you need to do is navigate to the element drawer, select the icon element, click hold, drag, and drop it to any suitable location within a block on your page.

Interacting with the Icon

Once the icon is placed, you can interact with it by selecting it and resizing it to fit your requirements. Grab the handles to alter the icon's dimensions manually or for precise control, navigate to the options toolbar.

Styling the Icon

Under the icon options in the toolbar, you can switch out the icon with your choice of outlined or filled versions. There's also a filter available for easy category search. Once you have chosen an icon, you can modify its size through presets or custom controls. To make the icon more visually engaging, you can add a background (filled, outlined, or none) and change the icon and background colors. You can also adjust the background size and choose the shape of the corners.

Creating a Hover State

Icons also come with a hover state which activates when the cursor is positioned over it. This state allows independent background, borders, shadows, and icon colors, providing a dynamic interactive experience for the user.

Working with Outlined Icons and Duplicating Icons

Outlined icons have their unique charm, and these can also be colored to match your design. Just like filled icons, they have hover state options. Icons can be duplicated easily, allowing you to maintain a consistent design across your webpage. Once duplicated, a new setting appears, enabling you to adjust the spacing between the icons.

Responsive Design for Tablets and Mobiles

When working with Responsive Design for tablets and mobiles, you get additional options to enhance the visual appeal of your icons on smaller devices. You can adjust the icon's size and background size to suit the device's display better.

Remember, the key to an effective website is a balance between aesthetic appeal and functionality. Use these icon features to enhance your user's experience and make your website stand out.