Image

Image displays icons or any other image asset. It’s used in place of ImageLabel and ImageButton engine components.

How to Use

Image takes an Image property that is either an image path from the Icons Reference or a Roblox asset ID.

In normal cases, you can replace ImageLabel and ImageButton with Image directly. Note that some properties have been put into tables to improve structure and compatibility with style tokens.

Image also supports state updates with the onStateChanged callback, which gives updates on hover, press, select, and more.

⚠️

Warning

Performance Notice

Do not declare the onStateChanged callback inline.

For functional components, wrap it in useCallback and minimize dependencies. In class components, declare it in the Init function. Use bindings wherever possible to reduce re-renders.


local Neuron = require(Packages.Neuron)
local Image = Neuron.Image
...
 
local onStateChanged = React.useCallback(function(state)
    print("Image state changed", state)
end, {})
 
return React.createElement(Image, {
    Image = "ar-cube-3",
    onStateChanged = onStateChanged,
    tag = "padding-small grow size-280",
})