Developer Docs

Touchpoint components

Icons

About

Touchpoint provides built-in icons that integrate with buttons and custom components. Each icon maintains consistent styling and accessibility features.

Icon Properties

Each icon accepts these properties:

PropertyTypeDescription
sizenumberIcon size in pixels (default: 24)
colorstringIcon color (inherits from parent)
classNamestringAdditional CSS classes

Import and Basic Usage

You can import the Icons from touchpoint once the package has been installed or made available in your project.

The following examples use the Icons available from Touchpoint to construct an IconButton.

Example

Example IconButton using the Icons from Touchpoint

1import { useTouchpointContext, IconButton, Icons } from "@nlxai/touchpoint-ui";
2const IconButtonExample = ({ data, conversationHandler }) => {
3  return (
4    <IconButton
5      label={data.buttonLabel}
6      Icon={Icons.ArrowForward}
7      onClick={() => conversationHandler.sendChoice(data.buttonId)}
8      type="main"
9    />
10  );
11};

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
Next
Touchpoint components: DateInput