【Tips】How to use the latest AWS icon in Draw.io of Visual Studio Code

Created date: 2025/01/04, Update date: 2025/06/17

By using the 「Draw.io Integration」 plugin for Visual Studio Code, you can use Draw.io in your local environment.
Draw.io is a diagramming software developed with HTML5 and JavaScript.
It is useful for creating AWS architecture diagrams, UML flowcharts, network diagrams, and more.
The AWS icons provided by default in Draw.io are often outdated, and the latest icons may not be available.
In this article, we introduce how to use the latest AWS icons in Draw.io within Visual Studio Code.

Table of Contents

Setup Overview
Setup Steps
1. Step 1: Download the AWS icons
2. Step 2: Register the custom library in Visual Studio Code user settings
Reference

Setup Overview

This guide assumes you have the Visual Studio Code extension “Draw.io Integration” installed.
With this extension, you can register XML-format icons as custom libraries.
On the website https://app.diagrams.net/ , you can add icons that aren’t included by default by creating a custom library.
However, the VS Code extension doesn’t let you create custom libraries directly.
To add custom icons in VS Code, you first need to create and download a custom library on the website, then register it in the Draw.io Integration extension.

In this guide, we’ll explain how to download the XML file published at m-radzikowski/diagrams-aws-icons: diagrams.net shape libraries with AWS Architecture Icons and register it in the Draw.io Integration extension.
The process consists of two steps: Step 1 is to download the AWS icons, and Step 2 is to register the custom library in your Visual Studio Code user settings.

Setup Steps

Step 1: Download the AWS icons

First, download the required XML file from m-radzikowski/diagrams-aws-icons: diagrams.net shape libraries with AWS Architecture Icons .
At the time of writing, the latest version is AWS Architecture Icons 20240206.xml .
After downloading, save the XML file to any directory you like. For example, you can create a directory called vscode-drawio in your user directory and save it there.
The path might look like /Users/user01/vscode-drawio/AWS Architecture Icons 20240206.xml .

Step 2: Register the custom library in Visual Studio Code user settings

Next, open Visual Studio Code and press the following keys to open user settings (Windows: Ctrl + , , Mac: Command + , ). Type drawio in the search box and select Drawio: Custom Libraries . Then, click Edit in settings.json .

Add the following setting to your settings.json . You can set entryId and libName to any value you like, and specify the path to the XML file you downloaded for file .

"hediet.vscode-drawio.customLibraries": [
    {
        "entryId": "AWS-20240206", // https://github.com/m-radzikowski/diagrams-aws-icons
        "libName": "AWS-20240206",
        "file": "/Users/user01/vscode-drawio/AWS Architecture Icons 20240206.xml"
    }
]

After saving the settings, restart Visual Studio Code. Once restarted, create and open a Draw.io file (for example, test.drawio ).
Click “Other Shapes” in the left pane.

In the custom library section, check the box for the name you set in libName (for example, AWS-20240206), then click Apply. (In my environment, the library name appeared in black for some reason.)

If AWS-20240206 appears in the left panel, the setup is complete.

Reference

Memo on using illustration and icon materials published by the Digital Agency with the Draw.io plugin for VSCode #VSCode - Qiita
Note: The related materials linked above are written in Japanese.