Icon

This article describes how to configure the Icon component and details each of its properties.

The Icon component allows you to display one of a set of icons in your project and dynamically color it.

Select Icon from the Media category of the component library. Move the mouse cursor over the canvas and click to add an image to your project.

Icon Properties

The Icon properties consist of three property drawers, a GENERAL drawer, a STYLING drawer, and a DYNAMIC VISIBILITY drawer. This guide will not describe the dynamic visibility properties as these are generic to each visible component, a separate guide and tutorial on dynamic visibility can be found here.

---

GENERAL

• Search icons – enter a search term into this box and press return to see a selection of related images, click on one of the icons to display it in your project

• Block mouse events – Checking this option will stop mouse interactions with components covered by the Icon component, e.g. a slider component sitting on a layer beneath the icon would not function. A partially covered component may still have some functionality. The option is checked by default.

---

STYLING

• Color / Opacity – these set the color and opacity of the lines comprising the icon. The remainder of the icon (i.e. its background) is always transparent

• Stroke – this specifies the width of the lines of the icon, the value can be set either with the slider or by typing a number into the text box, valid values range from 0.5 to 2.0