Skip to main content

Getting started with icons

Learn how to use built-in icons in Retool apps.

Retool includes over 3,000 icons to use in web and mobile app components that support them. You can use icons in numerous places, such as:

  • The Icon web component.
  • The Icon mobile component.
  • Prefix and suffix icons for input components, such as Text Input and Button.
  • Table columns configured with the Icon format.

There are two icon sets available:

SetDescription
LineLightly weighted icons with no color fill.
BoldHeavily weighted icons with color fill.

Any component properties of IconKey type support using icons.

Select an icon​

You can browse and select icons using the icon picker in the Inspector. Click on a setting, such as prefix or suffix icon, to display the icon picker.

Dynamically set icons​

You can dynamically set icon values to conditionally display different icons. Click the fx button next to the icon setting to set the value dynamically.

Component properties that support icons, such as prefix icon, use IconKey values: string values that correspond to icons. You can also write JavaScript within {{ }} to perform custom logic when setting an icon. Enter /icon to select an icon within the setting field.

For example, you can conditionally display either the Interface User Block or Interface User Check icon depending on whether a selected user is enabled.

{
  {
    table1.selectedRow.enabled
      ? "/icon:bold/interface-user-block"
      : "/icon:bold/interface-user-check";
  }
}

Icon reference​

Use the following Retool app to browse all available icons. Select an icon to display a preview and optionally copy the IconKey value to the clipboard.

Demo