SVG Icon
Icon is an element like an Image. It is used to add images on a page. However, unlike the Image element supports only SVG format, that is vector images.
Icons are usually used to add small graphical elements to a website that visually represent information and allow the user to better navigate the interface. These can be, for example, arrows, shopping cart images, social media icons.
To add an Icon to a page:
- Add an Icon element on the Canvas that is drag it from the Elements panel or simply click on its name.
- Upload an image that is double click on an Icon on the Canvas and in the Image search window that opens, click on the Upload button or select an already uploaded image from the list.
In the search window, you will find only SVG format. You can also search an image by name. The maximum size of an uploaded image is 64 MB.
You can apply various settings to an Icon on the Settings tab in the right panel:
General
- Icon preview
- Src attribute with a link to the image and its size in kilobytes
- Replace icon button that opens the image search window
Extra styles
Object fit determines how the Icon element reacts to the height and width of the loaded image:
- Fill - scales the vector image so that it is fully displayed inside the Icon element.
- Original - sets the original width and height of the image, can be clipped and displayed partially.
You can style an Icon using the Styles tab in the right panel. You can apply the following styles to an Icon:
- Change the Icon size in the Size section
- Change the Icon background in the Background section
- Create a frame around an Icon in the Border section