Decorative Icon – Code

Common Examples

Pass a Carto icon through icon. DecorativeIcon clones it to enforce the 24px size and inherited color so every framed icon stays uniform.

<DecorativeIcon icon={<IconMic />} origin="ai" />

origin selects the source treatment: "user" uses a white surface, "system" uses a light-blue surface, and "ai" uses the AI gradient.

DecorativeIcon is visual decoration. Do not rely on it as the accessible name of an interactive control; label the control itself.

The DecorativeIcon accepts the following props.

IconElement

required

Carto icon to frame. The component owns its size and color.

string

Class merged onto the surface.

"user" | "system" | "ai"

default:"ai"

Origin treatment applied to the surface and icon.