Diagrams.net: adding icons like Font Awesome, Twemoji and friends

illustration: diagrams-draw.io-add-font-awesome-flat-color.en

Diagrams.net is a pretty neat and powerfull app used to create diagrams and flowcharts.

You can use it online without installation or get it on Linux, Mac and Windows with an Electron app .

Here is how to import additionnal icons to your Librairies, and pick them directly from the sidebar.

Let’s take the Font Awesome icons for example (see below for more icon sets)

illustration: diagrams-draw.io-add-font-awesome-open-library

  • in the bottom-right corner, select “All files”:

illustration: diagrams-draw.io-add-font-awesome-all-files

  • double-click on the color set you want to use. Note that I didn’t find a way to modify icon color after that step.

That’s it! You can now pick any icon from the sidebar:

illustration: diagrams-draw.io-add-font-awesome-sidebar

More icons please!

Unfortunately Diagrams.net does not support importation of Font files. But several icon sets have already been packaged:


illustration: diagrams-draw.io-add-font-awesome-twemoji

Download: Github.
Check out the Twemoji website for more info.

Google Material Design Icons

illustration: diagrams-draw.io-add-font-awesome-material

Download: Github

And many more!

illustration: diagrams-draw.io-add-font-awesome-flat-color.en

Download: Github

illustration: diagrams-draw.io-add-font-awesome-psnc

Download: Github

See also this repository for more icons

Going further

with Diagrams you can also

Update: You can also invite someone to a Diagrams.net instance with a preselected icon set:

You appreciate Diagrams.net?

Donations are now possible and will help the project to grow and stay healthy:

All donations will be passed to the projects that extend us and that we’re dependent on. Helping these projects become sustainable is very important to the project sustainability.

The developpers' ethic also appears in the post about leaving the .io domain name extension.