Font Awesome Icons

Adding an icon

There are two ways to add icons to your Mermaid Chart diagrams:

• Referencing the icon code in the Mermaid syntax.
• Using the visual editor's icon picker.

Icon code

To use a Font Awesome icon in your Mermaid Chart diagram, you can reference it by its code. The code for each icon is in the format icon "fa:icon_code", where icon_code is the specific code for the Font Awesome icon you want to use.

For example, to use the "Address Book" icon, you would write: icon "fa:address-book".

flowchart
    n1["example"]
    n1{ icon: "fa:address-book"}

Visual editor

If you're using the visual editor, you can select the icon option from the toolbar. Click on the default icon to bring up the icon picker, where you can search for and select Font Awesome icons.

Icons List

Mermaid currently supports 164 Font Awesome icons. View the full list below.