Getting started with icons
Learn how to use built-in icons in classic apps.
You're viewing documentation for classic apps, which use Retool's original app editor. The AI app builder is the recommended way to build apps and where Retool focuses new development.
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:
| Set | Description |
|---|---|
| Line | Lightly weighted icons with no color fill. |
| Bold | Heavily 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.