Icon Packs

Register icon packs to use custom icons in diagrams. The example site configures two packs — logos (via url) and iconoir (via loader):

astro.config.mjs

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

    // 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()),
    },
  ],
})

The integration never serializes function bodies to the client. A loader exists only to extract its fetch(...) URL — if none is found, the pack is skipped with a warning.

Architecture Diagram with Icons

Reference icons as pack:icon-name inside diagram nodes. This page is rendered with the logos pack, so the icons below come from Iconify Logos.

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

Three Registration Forms

iconPacks: [
  // url: preferred. A JSON endpoint fetched 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. Only its fetch(...) URL is extracted.
  { name: 'iconoir', loader: () => fetch('https://unpkg.com/@iconify-json/iconoir@1/icons.json').then(r => r.json()) },
]

See the Icon Packs reference for details, including how icons data is embedded as a data: URL.