Icons

FlowDrop uses Iconify for all icons throughout the editor — node icons, category icons, status indicators, and toolbar actions.

How it works

Icons are rendered via @iconify/svelte, which is listed as an optional peer dependency. When installed, the Iconify component fetches icons on demand from the Iconify API, giving you access to 200,000+ icons from 150+ open-source sets with zero bundling overhead.

Install it alongside FlowDrop:

npm install @iconify/svelte

Icon format

All icon fields in FlowDrop use the Iconify string format:

set:icon-name

For example:

'mdi:brain'; // Material Design Icons
'heroicons:sparkles'; // Heroicons
'lucide:bot'; // Lucide
'ph:brain'; // Phosphor Icons
'tabler:api'; // Tabler Icons

You can browse and search all available icon sets at icon-sets.iconify.design.

Where icons are used

Icons appear in several places within FlowDrop:

Context	Field	Example
Node definition	`icon`	`'mdi:text'`
Category definition	`icon`	`'mdi:import'`
Status indicators	(internal)	`'mdi:check-circle'`
Toolbar & UI actions	(internal)	`'mdi:content-save'`

Node icons

Set the icon field on a node definition:

const myNode = {
  id: 'text_input',
  name: 'Text Input',
  icon: 'mdi:text' // Any Iconify icon
  // ...
};

FlowDrop resolves icons with a fallback chain:

The node’s own icon field
The category’s icon
Default fallback: mdi:cube

Category icons

Set the icon field on a category definition:

const myCategory = {
  id: 'inputs',
  name: 'Inputs',
  icon: 'mdi:import',
  color: '#22c55e'
};

Built-in default icons

FlowDrop includes a set of built-in icon constants used across the editor UI. These are not required for your own nodes — they document what the editor uses internally.

UI action icons

Key	Icon	Usage
`ADD`	`mdi:plus`	Add buttons
`REMOVE`	`mdi:minus`	Remove buttons
`EDIT`	`mdi:pencil`	Edit actions
`SAVE`	`mdi:content-save`	Save workflow
`EXPORT`	`mdi:download`	Export actions
`IMPORT`	`mdi:upload`	Import actions
`SEARCH`	`mdi:magnify`	Search fields
`CLOSE`	`mdi:close`	Close buttons
`SETTINGS`	`mdi:cog`	Settings panel

Status icons

Status	Icon
Idle	`mdi:circle-outline`
Pending	`mdi:clock-outline`
Running	`mdi:loading`
Completed	`mdi:check-circle`
Failed	`mdi:alert-circle`
Cancelled	`mdi:cancel`
Skipped	`mdi:skip-next`

Built-in category icons

When you define categories, you can use any icon you like. For reference, these are the icons FlowDrop uses for common category IDs:

Category ID	Icon
`triggers`	`mdi:lightning-bolt`
`inputs`	`mdi:arrow-down-circle`
`outputs`	`mdi:arrow-up-circle`
`prompts`	`mdi:message-text`
`models`	`mdi:robot`
`processing`	`mdi:cog`
`logic`	`mdi:source-branch`
`data`	`mdi:database`
`tools`	`mdi:wrench`
`ai`	`mdi:shimmer`
`agents`	`mdi:account-cog`
`memories`	`mdi:brain`
`interrupts`	`mdi:hand-back-left`

Icon validation

FlowDrop validates icon strings against the format set:icon-name (lowercase letters and hyphens). Invalid icons fall back to mdi:cube.

'mdi:brain'; // ✓ valid
'heroicons:bolt'; // ✓ valid
'Brain'; // ✗ invalid — falls back to mdi:cube

Popular icon sets

Here are some commonly used icon sets that work well with FlowDrop:

Set	Prefix	Icons	Browse
Material Design Icons	`mdi:`	7,000+	Browse
Heroicons	`heroicons:`	300+	Browse
Lucide	`lucide:`	1,500+	Browse
Phosphor	`ph:`	7,000+	Browse
Tabler Icons	`tabler:`	5,000+	Browse
Carbon	`carbon:`	2,000+	Browse

The full catalog is at icon-sets.iconify.design.