Architecture Icon Packs

ArchRepo includes five built-in icon packs — covering AWS, Azure, Microsoft 365, common open-source technologies, and generic architecture concepts. You can use these icons in both architecture-beta and flowchart diagrams to represent services and components without any extra setup.

Syntax

The syntax for referencing icons differs between diagram types.

architecture-beta

Declare a service or group with the icon reference inside parentheses:

architecture-beta
    service id(packname-iconname)[Label]
    group id(packname-iconname)[Group Label]

The icon reference follows the pattern packname-iconname — for example aws-lambda, azure-sql, or arch-user.

flowchart

Use the expanded node syntax with @{ } to attach an icon to a node:

flowchart LR
    id@{ icon: "packname-iconname", label: "Label", form: "square" }

• icon — the icon reference in the format "packname-iconname" (quoted string)
• label — the text displayed beneath the icon
• form — shape of the node; "square" works well for icon nodes

Example Diagrams

Cloud Integration

This diagram shows an end-user calling an Azure API Management gateway, which routes requests to an AWS S3 bucket and an Azure SQL database. A Lambda function handles backend processing inside the AWS region.

architecture-beta
    group aws_region(arch-cloud)[AWS Region]
    group azure_tenant(azure-logo)[Azure Tenant]
    service fn(aws-lambda)[Lambda] in aws_region
    service s3(aws-s3)[S3] in aws_region
    service apim(azure-api-management)[API Management] in azure_tenant
    service db(azure-sql)[SQL Database] in azure_tenant
    service usr(arch-user)[End User]
    usr:R --> L:apim
    apim:R --> L:s3
    apim:B --> T:db

Technology Stack

This diagram shows a client calling through an Nginx gateway to a REST API, which publishes events to Kafka and persists data to MongoDB.

architecture-beta
    service gw(tech-nginx)[Nginx Gateway]
    service api(arch-api)[REST API]
    service broker(tech-kafka)[Kafka]
    service db(tech-mongodb)[MongoDB]
    service client(arch-user)[Client]
    client:R --> L:gw
    gw:R --> L:api
    api:R --> L:broker
    api:B --> T:db

Flowchart with Icons

This diagram uses the flowchart type with icon pack nodes to show a user authenticating through an API gateway backed by an identity provider.

flowchart LR
  user@{ icon: "arch-user-circle", label: "Person", form: "square" }
  browser@{ icon: "tech-web-browser", label: "Web Browser", form: "square" }
  api@{ icon: "azure-api-management", label: "Azure API Management", form: "square" }
  idp@{ icon: "azure-active-directory", label: "Microsoft Entra ID", form: "square" }

  user -->|Interacts| browser
  browser -->|API Request| api
  api -->|Authenticate / Authorise| idp
  idp -->|Token Response| api
  api -->|API Response| browser

Available Icons

AWS (20 icons)

Amazon Web Services infrastructure and managed services.

Reference syntax: (aws-iconname) — for example (aws-s3)

aws-s3

aws-lambda

aws-ec2

aws-rds

aws-api-gateway

aws-cloudfront

aws-sqs

aws-sns

aws-dynamodb

aws-eks

aws-ecs

aws-cognito

aws-iam

aws-cloudwatch

aws-vpc

aws-elasticache

aws-route53

aws-elb

aws-kinesis

aws-glue

Azure (24 icons)

Microsoft Azure cloud platform services.

Reference syntax: (azure-iconname) — for example (azure-active-directory)

azure-active-directory

azure-app-service

azure-functions

azure-blob-storage

azure-sql

azure-cosmos-db

azure-service-bus

azure-event-hubs

azure-api-management

azure-kubernetes

azure-key-vault

azure-virtual-network

azure-data-lake

azure-postgresql

azure-data-factory

azure-databricks

azure-devops

azure-monitor

azure-security-center

azure-network-watcher

azure-load-balancer

azure-container-registry

azure-pipelines

azure-logo

Microsoft 365 (5 icons)

Microsoft 365 productivity applications.

Reference syntax: (ms-iconname) — for example (ms-word)

ms-word

ms-excel

ms-sharepoint

ms-powerapps

ms-powerbi

Technology (11 icons)

Common open-source and SaaS technology platforms.

Reference syntax: (tech-iconname) — for example (tech-mongodb)

tech-mongodb

tech-kafka

tech-rabbitmq

tech-nginx

tech-postgresql

tech-json

tech-web-browser

tech-pdf-branded

tech-databricks

tech-snowflake

tech-salesforce

Generic Architecture (25 icons)

Platform-neutral concepts: users, devices, data formats, and system components.

Reference syntax: (arch-iconname) — for example (arch-laptop)

arch-laptop

arch-desktop

arch-mobile

arch-tablet

arch-user

arch-manager

arch-support

arch-certificate

arch-security

arch-server-network

arch-csv

arch-xml

arch-web

arch-pdf

arch-message-queue

arch-data-stream

arch-credentials

arch-certificate-file

arch-user-circle

arch-users

arch-email

arch-cloud

arch-database

arch-settings

arch-api

Tips

• Use arch-* icons for platform-neutral concepts — users, servers, APIs, queues, and data stores — so the diagram stays readable regardless of which cloud or technology is involved.
• Mix packs freely. A single diagram can use aws-*, azure-*, and arch-* icons side by side.
• Mermaid also includes a small set of built-in icons (cloud, server, database, disk, internet) that work without a pack prefix, for quick sketches.