Summary

  • Overview
  • Video Lesson
  • Add Icon
  • Search Icons In Different Languages
  • Icon Styles And Presets
  • Change Icon Dialog
  • Icon Upload
  • Icon Size
  • Icon Properties
  • Link To Icons In Shapes

Overview

The Icon is a popular element on a web page and serves as a Text illustration. It helps visitors to understand concepts easier.

icon-element.png

Video Lesson

See Also

More video lessons

Add Icon

Add the Icon Element from the Quick Access -> Icon or press Alt+O.

add-icon.png

Search Icons In Different Languages

Adding the Icon Element, you can search in different languages, including English, German, French, Spanish, Portuguese, and Russian.

search-icon-languages.png

Icon Styles And Presets

You can add the Icon separated by Categories: Flat, Fill, Linear, и Background, and Border.

icon-styles.png

You can also quickly insert the Text with Icon presets and Social Icons.

icon-presets.png

Change Icon Dialog

Open the dialog to change the Icon by clicking on the Icon button in the Context Toolbar. You can use the Icons from the Media Library in the opened dialog.

change-icon-dialog.gif

The Icons in the dialog are presented in four Tabs: All, Linear, Filled and Colored. The All Tab has links to three basic Icon Styles.

style-tabs-change-icon.png

You can also open it by clicking the Change Icon button in the Property Panel.

change-icon-property-panel.png

Icon Upload

Upload your icons by clicking on the Upload button in the Change Icon dialog and selecting an icon from your disk. You can also drop files by dragging icons from the desktop and dropping them on the dashed "Drop Files" area.

icon-upload.png

Icon Properties

Use Property Panel to Edit Icon Element Properties or the Quick Edit Panel above the Icon Element.

Icon Size

You can resize the Icon in its Dimensions by dragging the slider. Enter the precise value in pixels in the property input.

icon-size-property.gif

Icon Color

Change the Icon Color in the Property Panel. You can recolor SVG and PNG Icons added from the Media Library or uploaded from the disk.

icon-recoloring.gif

Icon Resize And Position

Manually resize and move the Icon Element in the Editor by dragging the markers.

icon-resize.gif

You can set the Width, Height, and Margins by entering the values in the Property Panel.

icon-dimensions-position-properties.png

Icon Shape Styles

In the Property Panel, you can pick one of the four Icon Shape Styles: No Shape, Round Filled, Round Bordered, and Square Filled.

icon-styles-properties.png

Icon Shape Fill, Border, And Radius

You can select the No Fill, Solid, or Gradient Fill.

icon-shape-fill.png

Change the Icon Shape Border, its Width, and Radius. You can also switch the Icon Shape to Round.

icon-shape-border.png

Icon Shape Custom Border And Radius

icon-shape-custom-border-radius.png

Icon Shape Shadow

Check the Shadow checkbox to apply a shadow. Adjust the shadow in the Settings tab.

icon-shape-shadow.png

Icon Flip And Rotate

You can change the Icon position along the axis, making it upside down or facing a certain side.

icon-flip-rotate.gif

Icon Transparency

Adjust the Transparency of the Icon Element in the Property Panel.

button-transparency.png

You can go to the Icon Element in the Shape Element of the Add Panel.

icon-link-in-shapes-add-menu.png