lucideicons
Reactive icon

LucideIcons

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 17 November 2025
 by 
0.0
 (0 ratings)
lucideicons

LucideIcons

Documentation
1.0.0

1. Add the Component to Your Module

  1. Install the Lucide Icons from Forge.

  2. In Service Studio, open your application.

  3. Add the module LucideIcon as a dependency.

  4. Publish.


2. Place the Icon Block

  1. Open the screen where you want to show an icon.

  2. Drag the Lucide_Icon block into your UI.

  3. Set the required input:

Inputs

InputDescription
IconNameName of the Lucide icon (e.g., "camera", "download", "menu"). Must match the names from lucide.dev.
SizePixel size of the icon. Defaults to the app's base font size for natural alignment with text.
ColorCSS color value. If empty, it inherits the text color via CurrentColor.
StrokeWidthThickness of the icon outline. Default: 0.
ExtendedClass
Optional CSS classes for spacing, cursor, hover behavior, etc.

3. Choosing the Icon Name

Visit https://lucide.dev/icons
Pick any icon and copy its name (e.g., "bell", "user""arrow-right").
Use this value in the IconName input.


4. Using Custom Size or Color

Examples:

Set a custom size

Size = 32

Set a custom color

Color = "#006442"

Make the icon inherit theme color

Just leave Color empty — it automatically picks the parent element’s color.


5. Script Handling (Already Managed)

The Lucide script is loaded automatically by the component.
You do not need to add any JS manually unless you’re customizing behavior.


6. Demo Module

Install the Demo app to see:

  • Example icons

  • Size and color variations

This provides a ready-to-copy reference for your screens.