Mermaid’s architecture-beta diagram type supports over 200,000 icons from iconify.design, including official service icons for AWS and Google Cloud. Here is how to use them natively.

AWS Serverless Pipeline

This example shows a real-world serverless data pipeline using official AWS service icons from the logos pack.

architecture-beta
    group vpc(logos:aws-vpc)[AWS VPC]
    group storage(logos:aws)[Data Tier] in vpc

    service cloudfront(logos:aws-cloudfront)[CloudFront]
    service s3(logos:aws-s3)[S3 Bucket]
    service lambda(logos:aws-lambda)[Lambda] in vpc
    service rds(logos:aws-rds)[RDS Instance] in storage

    cloudfront:B -- T:s3
    s3:R -- L:lambda
    lambda:B -- T:rds

Google Cloud Data Pipeline

The group header uses the colored logos:google-cloud-platform icon. Individual GCP service icons (BigQuery, Pub/Sub, etc.) are not in the logos pack, so those use si (Simple Icons) which renders in monochrome — but they remain clearly identifiable.

architecture-beta
    group gcp(logos:google-cloud-platform)[Google Cloud Platform]
    group analytics(si:googlebigquery)[Analytics] in gcp

    service pubsub(si:googlepubsub)[PubSub] in gcp
    service storage(si:googlecloudstorage)[Cloud Storage] in gcp
    service dataflow(si:googledataflow)[Dataflow] in gcp
    service bq(si:googlebigquery)[BigQuery] in analytics
    service composer(si:googlecloudcomposer)[Cloud Composer] in gcp

    pubsub:R -- L:dataflow
    dataflow:B -- T:storage
    storage:R -- L:bq
    composer:B -- T:dataflow

How it works

The diagrams use the architecture-beta syntax, which allows you to specify an icon source using the pack:icon format.

Registering Icon Packs

To enable these icons, you need to register the icon packs in your astro.config.mjs:

mermaid({
  mermaidConfig: {
    securityLevel: 'loose',
  },
  iconPacks: [
    {
      name: 'logos',
      loader: () => fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
    },
    {
      name: 'si',
      loader: () => fetch('https://unpkg.com/@iconify-json/simple-icons/icons.json').then((res) => res.json()),
    },
  ],
})

Useful Icons for Architects

AWS (Logos Pack)

• logos:aws-s3 — Amazon S3
• logos:aws-rds — Amazon RDS
• logos:aws-lambda — AWS Lambda
• logos:aws-glue — AWS Glue
• logos:aws-redshift — Amazon Redshift

Google Cloud (Simple Icons Pack)

• si:googlecloud — Google Cloud
• si:googlecloudstorage — Cloud Storage
• si:googlebigquery — BigQuery
• si:googlepubsub — Pub/Sub
• si:googledataflow — Dataflow

You can browse the full list of icons at icones.js.org.