User Guide

System Architecture Icon Packs

System Architecture styles (AWS/Azure/Google Cloud) load icons from local manifests under public/icon-packs/.

Back to System Architecture Guide →Create Diagram →
1) What is an icon pack?

An icon pack is just a folder of SVG/PNG files in public/ plus a manifest.json that maps node kinds (or custom keys) to icon file paths.

/icon-packs/aws/manifest.json
/icon-packs/azure/manifest.json
/icon-packs/gcp/manifest.json
2) Manifest format (example)

Manifests map a key to an icon URL (served from public/) and an optional alt label.

{
  "version": 1,
  "provider": "aws",
  "nodes": {
    "api_gateway": { "src": "/icon-packs/aws/icons/api-gateway.svg", "alt": "Amazon API Gateway" },
    "lambda": { "src": "/icon-packs/aws/icons/lambda.svg", "alt": "AWS Lambda" }
  }
}
See detailed per-provider notes:AWS READMEAzure READMEGoogle Cloud README
3) Which keys can you map?

The most common mapping keys are the app's System Architecture node kinds (examples: api_gateway, service, sql_db, event_bus).

You can also use any custom key and then set it per-node via Properties → Icon Key (stored on the node as meta.iconKey).

4) How to add your own AWS/Azure/GCP icons
  1. Copy SVG/PNG files into public/icon-packs/<provider>/icons/.
  2. Add/update entries in public/icon-packs/<provider>/manifest.json so the src points to your new file.
  3. In the editor, select Style (left stencil sidebar). If you changed icons while the dev server is running, hard-refresh the page.
  4. Optional: set per-node Icon Key in the Properties panel to choose a more specific icon than the default node kind mapping.

Note: the current Google Cloud pack in this repo uses category icons by default. To get service-specific icons, add the service icons and update the manifest mappings.

Troubleshooting
  • If vendor icons don't show up, verify the manifest exists under public/icon-packs/<provider>/manifest.json and the src paths start with /icon-packs/ (not public/).
  • If an icon 404s, confirm the filename/casing matches exactly (Windows vs Linux can differ in production).
  • If you changed a manifest and nothing updates, hard-refresh to bypass cached assets.