Icon Packs

Register icon packs to use custom icons in diagrams. Three forms work:

iconPacks: [
  // url: preferred. A JSON endpoint, fetched in the browser at runtime.
  { name: 'logos', url: 'https://unpkg.com/@iconify-json/logos@1/icons.json' },

  // icons: pass icon data directly, e.g. an imported JSON file.
  { name: 'my-icons', icons: myIcons },

  // loader: legacy. The integration inspects the function source for a
  // fetch('...') URL. Prefer `url` or `icons` instead.
  { name: 'iconoir', loader: () => fetch('https://unpkg.com/@iconify-json/iconoir@1/icons.json').then(res => res.json()) },
]

How each form is handled

• url — passed through unchanged. The client fetches the JSON endpoint at runtime and registers it under the pack name.
• icons — embedded as a data:application/json,... URL so the same fetch-based loader works without serializing the object into the page.
• loader — the integration never serializes function bodies to the client. It only inspects the function source for a fetch('...') URL. If no URL turns up, the pack is skipped with a warning.

Use url or icons for reliable results.

Referencing icons in diagrams

Reference an icon as pack:icon-name inside diagram nodes. The example below uses the logos pack from Iconify Logos:

```mermaid
architecture-beta
  group api(logos:aws-lambda)[API]

  service db(logos:postgresql)[Database] in api
  service disk1(logos:aws-s3)[Storage] in api
  service disk2(logos:cloudflare)[CDN] in api
  service server(logos:docker)[Server] in api

  db:L -- R:server
  disk1:T -- B:server
  disk2:T -- B:db
```

See a live version on the Icon Packs page.

Privacy

Icon packs that use the url form do fetch from a URL you provide, but that’s your choice, not a default behavior. The icons form embeds the data directly — no network request at all.