Use icons

Icons add visual meaning to nodes — useful for making complex diagrams scannable at a glance without adding more text.

Add an icon to a node

Mermaid supports Font Awesome icons inline in node labels. Use the fa: prefix followed by the icon name:

flowchart LR A(["fa:fa-user User"]) B(["fa:fa-server Server"]) C(["fa:fa-database Database"]) A --> B --> C

Icons render inline with the node label. The node shape is set by the brackets — use ([ for rounded rectangles, which tend to look best with icons.

Find the right icon

Font Awesome icon names follow the pattern fa-[name]. A few common ones:

Icon	Name	Good for
User	fa:fa-user	People, actors, end users
Server	fa:fa-server	Backend systems
Database	fa:fa-database	Data stores
Cloud	fa:fa-cloud	Cloud services
Lock	fa:fa-lock	Auth, security
Check	fa:fa-check	Approvals, completions
Envelope	fa:fa-envelope	Email, notifications
Cog	fa:fa-cog	Settings, configuration
Code	fa:fa-code	Code, API
File	fa:fa-file	Documents

Full icon library: Font Awesome icons →

The Mermaid icon registry also supports additional icon sets. Browse available icons in the editor under Icons in the left panel, or see the icon registry reference →

Icon-only nodes

To show an icon without a label, leave the label text empty:

A(["fa:fa-user"])

Add icons in the Visual Editor

In the Visual Editor, click the icon in the center toolbar. Search for an icon and click to place it on the canvas. After placing, set the icon size, background shape, background color, icon color, and label from the icon toolbar.

Common questions

The icon isn’t rendering. Check that the icon name is correct and prefixed with fa:. Icon names are case-sensitive and must match exactly. If you’re not sure of the name, use the icon panel in the editor to search.
The icon and label aren’t aligned. This is usually a node shape issue — rounded rectangles ([ work best for icon + label combinations. If alignment still looks off, try removing the label and using a tooltip or separate label node instead.

What’s next?

Apply colors and styles to icon nodes | Create custom styles →
Export your diagram with icons intact | Export your diagram →
Share a diagram with stakeholders | Share your diagram →