Icons

About

Built-in icons integrate with buttons and custom components and inherit color/size by default.

Icon props

Property	Type	Description
size	number	Size in pixels (default 24)
color	string	Color (inherits from parent)
className	string	Additional CSS classes

Example

const IconButtonExample = ({ data, conversationHandler }) => {
  return html`
    <IconButton
      label=${data.buttonLabel}
      Icon=${Icons.ArrowForward}
      onClick=${() => conversationHandler.sendChoice(data.buttonId)}
      type="main"
    />
  `;
};

// Register component when creating touchpoint
const touchpoint = await create({
  config: {
    applicationUrl: "YOUR_APPLICATION_URL",
    headers: { "nlx-api-key": "YOUR_API_KEY" },
    languageCode: "en-US",
  },
  customModalities: {
    IconButtonModality: IconButtonExample,
  },
});

Available icons

Action, Assistant, AssistantOld, Add, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowForward, Attachment, Camera, Check, Close, Copy, Date, Delete, Escalate, Error, FullScreen, Mic, MicOff, Location, Volume, VolumeOff, Translate, OpenInNew, Play, Preview, Reorder, Restart, Settings, Search, Share, Warning, ThumbDown, ThumbUp, Time, Undo, Refresh, Help

Related

• Buttons

• Custom Cards

• Theming