Icon Sets

Mermaid Studio lets you use icons from popular icon libraries in your diagrams. With access to 200,000+ icons through Iconify, you can add visual clarity to architecture diagrams, flowcharts, and more.

Default Icon Sets

Mermaid Studio includes these icon sets out of the box:

Icon Set	Prefix	Description
Font Awesome Brands	fab	Brand logos (GitHub, Twitter, etc.)
Font Awesome Regular	far	Regular weight icons
Font Awesome Solid	fas	Solid weight icons
Font Awesome	fa	Alias for regular icons (provided to support older diagrams authored using older versions of Font Awesome)
Logos	logos	Programming language and technology logos
AWS Architecture	aws	Amazon Web Services service icons
Azure Architecture	azure	Microsoft Azure service icons
Google Cloud Platform	gcp	Google Cloud Platform service icons

Icon Support by Diagram Type

Different diagram types have different levels of icon support:

Diagram Type	Support	Example
Architecture	Any icon set	logos:kubernetes, aws:s3-bucket
Flowchart	Any icon set (icon shape); Font Awesome (inline)	logos:docker, fa:fa-user
Class Diagram	Font Awesome only	fas:fa-database

In Flowchart diagrams, the icon shape (node@{ "shape": "icon", "icon": "logos:aws" }) renders icons from any Iconify set. The older inline syntax (fa:fa-name inside a node label) is limited to Font Awesome — this is a constraint in the upstream Mermaid.js library, not Mermaid Studio. Where the inline format is used, the pattern is <prefix>:fa-<icon-name>, e.g., fas:fa-camera.

Mindmap diagrams only support legacy font-based icons (::icon()), which require an external font stylesheet to render. Mermaid Studio does not support these because they are a legacy Mermaid feature that does not work in exported diagrams (PNG/SVG).

Using Icons in Diagrams

Architecture Diagrams

Architecture diagrams have full icon support:

Flowcharts

Flowcharts support icons in two ways:

• Icon shape — use any Iconify icon set via the generalized shape syntax: node@{ "shape": "icon", "icon": "logos:docker" }.
• Inline icons — embed a Font Awesome icon inside a regular node label with <prefix>:fa-<icon-name>, e.g., fas:fa-camera. Only Font Awesome is supported inline.

Finding Icons

Icon Picker

Press Command + Shift + I CommandShiftI Control + Shift + I CtrlShiftI to open the Icon Picker popup.

1. Type to search icons by name.

2. Use the dropdown to filter by icon set.

3. Press Return Return Enter Enter or Command + C CommandC Control + C CtrlC to copy the icon reference to your clipboard.

4. Paste it into your diagram.

The picker supports the standard reference format: <prefix>:<icon-name>, e.g., far:camera. The pasted value will may need to be manually adjusted to match the format of the diagram type (e.g., adding fa- for Flowcharts).

Mermaid Studio Tool Window

For a persistent icon browser, open the Mermaid Studio tool window from View > Tool Windows > Mermaid Studio and select the Icons tab.

The tool window provides:

• Search and filtering across all enabled icon sets
• Detail panel with larger preview and copy button

Code Completion

In Architecture diagrams, press Command + Space CommandSpace Control + Space CtrlSpace inside the parentheses to trigger icon completion:

Completions show an icon preview alongside the icon name. When the icon text does not match any known icon, a weak warning is shown.

Custom Icon Sets

This feature requires a paid license (Core or Studio). Compare editions →

Downloading, importing, and managing custom icon sets requires a paid license. The bundled icon sets listed above are available on all editions.

Downloading from Iconify

Mermaid Studio integrates with Iconify, providing access to 200+ icon sets.

1. Open Settings ( Command + Comma Command, Control + Alt + S CtrlAltS ) and navigate to Tools > Mermaid Studio > Icon Sets.

   

2. Click the + button to open the Add Icon Sets dialog.

   

3. Search for icon sets by name or category.

4. Select an icon set and click the preview button in the toolbar to preview its icons.

   

5. Check the icon sets you want to download.

   

6. Click Import Selected.

Downloaded icon sets appear in the table and are immediately available in your diagrams.

Managing Icon Sets

The Icon Sets settings table shows:

Column	Description
Enabled	Toggle to enable/disable an icon set
Name	Display name of the icon set
Prefix	The prefix used in diagrams (editable for custom sets)
Version	Version from the icon set metadata
Source	Origin: Default, Web (downloaded), or User (imported)

Custom Prefixes

Double-click the Prefix cell to change an icon set’s prefix. Each enabled icon set must have a unique prefix.

Importing Local Icon Sets

Click Import from File to import a local JSON file in Iconify format.

Removing Icon Sets

Select an icon set and click - to remove it. Default icon sets cannot be removed.

Custom Repositories

For enterprise environments or custom icon collections, you can add custom repositories.

Click Manage Repositories in the Add Icon Sets dialog to configure additional sources.

Custom repositories must follow the Iconify JSON format:

• Index URL: URL to the collections.json file listing available icon sets
• Base URL: Base URL for downloading individual icon set JSON files

Troubleshooting

Icons Not Appearing in Flowcharts

• The icon shape supports any Iconify icon set. If an icon isn’t rendering in an icon shape, check the icon name and ensure the icon set is enabled.
• Inline icons in regular node labels only support Font Awesome. Non-Font Awesome prefixes (like logos:, mdi:) won’t render inline due to a Mermaid.js limitation. Use the Font Awesome format: <prefix>:fa-<icon-name>, e.g., fas:fa-camera.

Icons Not Appearing in Mindmaps

• Mindmap icons use a legacy font-based mechanism that requires an external font stylesheet. Mermaid Studio does not support these because they don’t work in exported diagrams (PNG/SVG).

Unresolved Icon Warning

If an icon reference shows a warning, check that:

• The icon set is enabled in settings
• The icon name is spelled correctly
• Use code completion to find the correct name (where supported)