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.

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