How to create an icon element

How to create an icon element

Reactive allows you to place icons to your content. 

To create an icon, navigate to the Pages section from the sidebar menu of your admin panel under Website.
  • Create a new page or edit an existing one. You can refer to our documentation about How to create a Page for more information.
  • From the Content tab select the container and column you would like to place the icon. 
  • Click the Add element button.
  • Select Icon from the library.  

Section Details

Select your favorite. Click an icon to select. 

Icon size. This setting allows you to set the size of the icon in pixels. 

Icon color. This setting allows you to customize the color of your icon. 


Alignment. This setting allows you to choose how to align your icon. Choose between left, right, center or justify. Justify setting extends the lines so that each line has equal width. 


Margin & Padding
Margin. This setting allows you to control the space around the icon's border by changing the top, bottom, left and right values. 
Padding. This setting allows you to control the space between the content and borders of the icon by changing the top, bottom, left and right values. 

Border style . This property sets the line style for all four sides of the icon's border. Choose between none, solid, dotted, double or dashed option.  
Border radius top left and right. This setting allows you to set the border radius in the top left and right corner of the icon. 
Border radius bottom left and right. This setting allows you to set the border radius in the bottom left and right corner of the icon. 
These values can be set as a percentage or a specific size in pixels. 
Border width. This property allows you to set the width of your icon's border. It can be set as a specific size in pixels. 
Border color. This setting allows you to set the color of your icon's border and create the look you want. 

Link . In this section you can add a hyperlink to your icon. 
Link target. Set how the link opens. Choose between "Open link in same tab" for the same window or "Open link in new tab" for a new tab. 

Once you have created your icon click the "Apply" button at the bottom right of your screen. 

    • Related Articles

    • How to create a product element

      Reactive allows you to add products into your content. You have full control over which products display, and how they are presented. To create a product element, navigate to the Pages section from the sidebar menu of your admin panel under Website. ...

    • How to Use the Icon Element to Add Icons to Your Page Content

      Icons are a simple yet powerful way to enhance your page design. They can quickly communicate meaning, serve as visual alternatives to text, and even act as intuitive button replacements. How to Add an Icon To add an icon, drag the Icon Element from ...

    • Create scrolling sections with the Slider Element

      The Slider Element is a powerful tool for creating scrolling sections of content on your pages. Each slide is its own container, so you can add and customize elements freely. A common use is building image slideshows to showcase products. Slides per ...

    • How to create a button element

      To create a new button element, navigate to the Pages section from the sidebar menu of your admin panel under Website. Create a new page or edit an existing one. You can refer to our documentation about How to create a Page for more information. From ...

    • How to create product attributes

      Product attributes define the characteristics of your products assigned to a specific category and enabling you to uniquely describe them. To create product attributes visit the admin panel and click on Products from the E-shop menu. Then select your ...