Icon

Add graphic elements to your page by using the Icon element. Bring icons onto your page by going to the Element drawer. Go to the Icon element, click Hold and drag, and drop it in a suitable place anywhere in the block within your page. To interact with it, select it, and then you can resize it by grabbing the handles and get it to a size that is convenient for your purposes. For more precise control, go to the Options Toolbar, and on the left, you will see the icon Options. Let's switch out the icon, and we have the option between Outlined Versions and glyph versions. You can also filter it here with the categories. I'll put it here on Shopping, and let's look for Cart. Here we have the control for the size with some presets that you can choose from, and then also Custom Control if you want it larger or even smaller. Style it up by adding a background, and we have a fill, outline, and no background. Let's put it on fill, and then we go over to the color options and change the background color and also change the icon color. If we go back to the background, we can change the size of the background and choose between sharp edges for the corners, circle, and of course, again, custom styling where we can change the corners to a suitable option that that suits our needs.

Take note that the icon comes with a hover state. Select, go to the Color Options, and then activate Hover State by selecting this tag here on the left. Now, I can set independent background, borders, shadows, and icon colors for the hover state. I'll set the icon color and then the background. Now, as you hover over it, it will change to the hover state. To work with an outlined version, we go to the Icon options and select Outline. Now, when you go to Colors, you choose your icon color as well as the border. And again, you have hover state options. Duplicate the icon, and it will put it in line next to the other icon. A new setting will appear under the icon options that allows you to add spacing between the icons. Add one more, and to place this anywhere else on the page, simply click Hold and drag it to the area where you want to place it. When in responsive design for tablets and mobiles, you have a few more options to make it a little bit more visually appealing for these devices. I will select the icon, and then from the settings in the options toolbar, you will see we can change the size as well as the background size.

This allows us to style it for something a little bit more suitable that will be better displayed on these devices.