Mermaid Chart Icons
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.
Image
Icons List
Mermaid currently supports 164 Font Awesome icons. View the full list below.
| Icon | Icon Name | Icon Code |
|---|---|---|
| Address Book | icon: "fa:address-book" | |
| Address Card | icon: "fa:address-card" | |
| Bell | icon: "fa:bell" | |
| Bell Slash | icon: "fa:bell-slash" | |
| Bookmark | icon: "fa:bookmark" | |
| Building | icon: "fa:building" | |
| Calendar | icon: "fa:calendar" | |
| Calendar Check | icon: "fa:calendar-check" | |
| Calendar Days | icon: "fa:calendar-days" | |
| Calendar Minus | icon: "fa:calendar-minus" | |
| Calendar Plus | icon: "fa:calendar-plus" | |
| Calendar Xmark | icon: "fa:calendar-xmark" | |
| Chart Bar | icon: "fa:chart-bar" | |
| Chess Bishop | icon: "fa:chess-bishop" | |
| Chess King | icon: "fa:chess-king" | |
| Chess Knight | icon: "fa:chess-knight" | |
| Chess Pawn | icon: "fa:chess-pawn" | |
| Chess Queen | icon: "fa:chess-queen" | |
| Chess Rook | icon: "fa:chess-rook" | |
| Circle | icon: "fa:circle" | |
| Circle Check | icon: "fa:circle-check" | |
| Circle Dot | icon: "fa:circle-dot" | |
| Circle Down | icon: "fa:circle-down" | |
| Circle Left | icon: "fa:circle-left" | |
| Circle Pause | icon: "fa:circle-pause" | |
| Circle Play | icon: "fa:circle-play" | |
| Circle Question | icon: "fa:circle-question" | |
| Circle Right | icon: "fa:circle-right" | |
| Circle Stop | icon: "fa:circle-stop" | |
| Circle Up | icon: "fa:circle-up" | |
| Circle User | icon: "fa:circle-user" | |
| Circle Xmark | icon: "fa:circle-xmark" | |
| Clipboard | icon: "fa:clipboard" | |
| Clock | icon: "fa:clock" | |
| Clone | icon: "fa:clone" | |
| Closed Captioning | icon: "fa:closed-captioning" | |
| Comment | icon: "fa:comment" | |
| Comment Dots | icon: "fa:comment-dots" | |
| Comments | icon: "fa:comments" | |
| Compass | icon: "fa:compass" | |
| Copy | icon: "fa:copy" | |
| Copyright | icon: "fa:copyright" | |
| Credit Card | icon: "fa:credit-card" | |
| Envelope | icon: "fa:envelope" | |
| Envelope Open | icon: "fa:envelope-open" | |
| Eye | icon: "fa:eye" | |
| Eye Slash | icon: "fa:eye-slash" | |
| Face Angry | icon: "fa:face-angry" | |
| Face Dizzy | icon: "fa:face-dizzy" | |
| Face Flushed | icon: "fa:face-flushed" | |
| Face Frown | icon: "fa:face-frown" | |
| Face Frown Open | icon: "fa:face-frown-open" | |
| Face Grimace | icon: "fa:face-grimace" | |
| Face Grin | icon: "fa:face-grin" | |
| Face Grin Beam | icon: "fa:face-grin-beam" | |
| Face Grin Beam Sweat | icon: "fa:face-grin-beam-sweat" | |
| Face Grin Hearts | icon: "fa:face-grin-hearts" | |
| Face Grin Squint | icon: "fa:face-grin-squint" | |
| Face Grin Squint Tears | icon: "fa:face-grin-squint-tears" | |
| Face Grin Stars | icon: "fa:face-grin-stars" | |
| Face Grin Tears | icon: "fa:face-grin-tears" | |
| Face Grin Tongue | icon: "fa:face-grin-tongue" | |
| Face Grin Tongue Squint | icon: "fa:face-grin-tongue-squint" | |
| Face Grin Tongue Wink | icon: "fa:face-grin-tongue-wink" | |
| Face Grin Wide | icon: "fa:face-grin-wide" | |
| Face Grin Wink | icon: "fa:face-grin-wink" | |
| Face Kiss | icon: "fa:face-kiss" | |
| Face Kiss Beam | icon: "fa:face-kiss-beam" | |
| Face Kiss Wink Heart | icon: "fa:face-kiss-wink-heart" | |
| Face Laugh | icon: "fa:face-laugh" | |
| Face Laugh Beam | icon: "fa:face-laugh-beam" | |
| Face Laugh Squint | icon: "fa:face-laugh-squint" | |
| Face Laugh Wink | icon: "fa:face-laugh-wink" | |
| Face Meh | icon: "fa:face-meh" | |
| Face Meh Blank | icon: "fa:face-meh-blank" | |
| Face Rolling Eyes | icon: "fa:face-rolling-eyes" | |
| Face Sad Cry | icon: "fa:face-sad-cry" | |
| Face Sad Tear | icon: "fa:face-sad-tear" | |
| Face Smile | icon: "fa:face-smile" | |
| Face Smile Beam | icon: "fa:face-smile-beam" | |
| Face Smile Wink | icon: "fa:face-smile-wink" | |
| Face Surprise | icon: "fa:face-surprise" | |
| Face Tired | icon: "fa:face-tired" | |
| File | icon: "fa:file" | |
| File Audio | icon: "fa:file-audio" | |
| File Code | icon: "fa:file-code" | |
| File Excel | icon: "fa:file-excel" | |
| File Image | icon: "fa:file-image" | |
| File Lines | icon: "fa:file-lines" | |
| File Pdf | icon: "fa:file-pdf" | |
| File Powerpoint | icon: "fa:file-powerpoint" | |
| File Video | icon: "fa:file-video" | |
| File Word | icon: "fa:file-word" | |
| File Zipper | icon: "fa:file-zipper" | |
| Flag | icon: "fa:flag" | |
| Floppy Disk | icon: "fa:floppy-disk" | |
| Folder | icon: "fa:folder" | |
| Folder Closed | icon: "fa:folder-closed" | |
| Folder Open | icon: "fa:folder-open" | |
| Font Awesome | icon: "fa:font-awesome" | |
| Futbol | icon: "fa:futbol" | |
| Gem | icon: "fa:gem" | |
| Hand | icon: "fa:hand" | |
| Hand Back Fist | icon: "fa:hand-back-fist" | |
| Hand Lizard | icon: "fa:hand-lizard" | |
| Hand Peace | icon: "fa:hand-peace" | |
| Hand Point Down | icon: "fa:hand-point-down" | |
| Hand Point Left | icon: "fa:hand-point-left" | |
| Hand Point Right | icon: "fa:hand-point-right" | |
| Hand Point Up | icon: "fa:hand-point-up" | |
| Hand Pointer | icon: "fa:hand-pointer" | |
| Hand Scissors | icon: "fa:hand-scissors" | |
| Hand Spock | icon: "fa:hand-spock" | |
| Handshake | icon: "fa:handshake" | |
| Hard Drive | icon: "fa:hard-drive" | |
| Heart | icon: "fa:heart" | |
| Hospital | icon: "fa:hospital" | |
| Hourglass | icon: "fa:hourglass" | |
| Hourglass Half | icon: "fa:hourglass-half" | |
| Id Badge | icon: "fa:id-badge" | |
| Id Card | icon: "fa:id-card" | |
| Image | icon: "fa:image" | |
| Images | icon: "fa:images" | |
| Keyboard | icon: "fa:keyboard" | |
| Lemon | icon: "fa:lemon" | |
| Life Ring | icon: "fa:life-ring" | |
| Lightbulb | icon: "fa:lightbulb" | |
| Map | icon: "fa:map" | |
| Message | icon: "fa:message" | |
| Money Bill 1 | icon: "fa:money-bill-1" | |
| Moon | icon: "fa:moon" | |
| Newspaper | icon: "fa:newspaper" | |
| Notdef | icon: "fa:notdef" | |
| Note Sticky | icon: "fa:note-sticky" | |
| Object Group | icon: "fa:object-group" | |
| Object Ungroup | icon: "fa:object-ungroup" | |
| Paper Plane | icon: "fa:paper-plane" | |
| Paste | icon: "fa:paste" | |
| Pen To Square | icon: "fa:pen-to-square" | |
| Rectangle List | icon: "fa:rectangle-list" | |
| Rectangle Xmark | icon: "fa:rectangle-xmark" | |
| Registered | icon: "fa:registered" | |
| Share From Square | icon: "fa:share-from-square" | |
| Snowflake | icon: "fa:snowflake" | |
| Square | icon: "fa:square" | |
| Square Caret Down | icon: "fa:square-caret-down" | |
| Square Caret Left | icon: "fa:square-caret-left" | |
| Square Caret Right | icon: "fa:square-caret-right" | |
| Square Caret Up | icon: "fa:square-caret-up" | |
| Square Check | icon: "fa:square-check" | |
| Square Full | icon: "fa:square-full" | |
| Square Minus | icon: "fa:square-minus" | |
| Square Plus | icon: "fa:square-plus" | |
| Star | icon: "fa:star" | |
| Star Half | icon: "fa:star-half" | |
| Star Half Stroke | icon: "fa:star-half-stroke" | |
| Sun | icon: "fa:sun" | |
| Thumbs Down | icon: "fa:thumbs-down" | |
| Thumbs Up | icon: "fa:thumbs-up" | |
| Trash Can | icon: "fa:trash-can" | |
| User | icon: "fa:user" | |
| Window Maximize | icon: "fa:window-maximize" | |
| Window Minimize | icon: "fa:window-minimize" | |
| Window Restore | icon: "fa:window-restore" |
© Mermaid Chart 2026