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 component properties consist of LAYOUT & POSITIONING, GENERAL, STYLING, and DYNAMIC VISIBILITY sections.

This guide will describe all sections besides the Layout & Positioning and Dynamic Visiblity sections, as these are generic to each component. A separate guide and tutorial for each can be found by clicking the links above.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this Set Property Values article for more information on using the different methods.

---

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