Icons

Add cloud provider and generic icons to make diagrams instantly recognizable.

Enabling Icons

Declare the icons extension at the top of your file:

@arch
#!ext icons

[nodes]
  lambda:Handler|icon:aws-lambda
  s3:Storage|icon:aws-s3
  dynamo:Data|icon:aws-dynamodb

Rendered diagram

Icon Syntax

id:Label|icon:icon-name

Icon Namespaces

AWS Icons

Prefix: aws-

[nodes]
  # Compute
  ec2:EC2|icon:aws-ec2
  lambda:Lambda|icon:aws-lambda
  ecs:ECS|icon:aws-ecs
  eks:EKS|icon:aws-eks
  fargate:Fargate|icon:aws-aws-fargate

  # Storage
  s3:S3|icon:aws-s3
  ebs:EBS|icon:aws-ebs
  efs:EFS|icon:aws-amazon-efs

  # Database
  rds:RDS|icon:aws-rds
  dynamo:DynamoDB|icon:aws-dynamodb
  elasticache:ElastiCache|icon:aws-amazon-elasticache
  redshift:Redshift|icon:aws-amazon-redshift

  # Networking
  vpc:VPC|icon:aws-amazon-virtual-private-cloud
  alb:ALB|icon:aws-alb
  route53:Route 53|icon:aws-amazon-route-53
  cloudfront:CloudFront|icon:aws-amazon-cloudfront
  apigateway:API Gateway|icon:aws-api-gateway

  # Integration
  sqs:SQS|icon:aws-sqs
  sns:SNS|icon:aws-sns
  eventbridge:EventBridge|icon:aws-amazon-eventbridge
  kinesis:Kinesis|icon:aws-amazon-kinesis
  msk:MSK|icon:aws-amazon-managed-streaming-for-apache-kafka

Rendered diagram

Azure Icons

Prefix: azure-

[nodes]
  # Compute
  vm:VM|icon:azure-10021-icon-service-virtual-machine
  functions:Functions|icon:azure-10029-icon-service-function-apps
  aks:AKS|icon:azure-03543-icon-service-aks-automatic
  appservice:App Service|icon:azure-00046-icon-service-app-service-plans

  # Storage
  blob:Blob Storage|icon:azure-10780-icon-service-blob-block
  files:Files|icon:azure-03549-icon-service-managed-file-shares

  # Database
  sql:SQL Database|icon:azure-02390-icon-service-azure-sql
  cosmos:Cosmos DB|icon:azure-10121-icon-service-azure-cosmos-db
  redis:Redis Cache|icon:azure-10137-icon-service-cache-redis

  # Networking
  vnet:VNet|icon:azure-10061-icon-service-virtual-networks
  appgw:App Gateway|icon:azure-10076-icon-service-application-gateways
  frontdoor:Front Door|icon:azure-10073-icon-service-front-door-and-cdn-profiles

  # Integration
  servicebus:Service Bus|icon:azure-10836-icon-service-azure-service-bus
  eventhubs:Event Hubs|icon:azure-00039-icon-service-event-hubs

Rendered diagram

GCP Icons

Prefix: gcp-

[nodes]
  # Compute
  gce:Compute Engine|icon:gcp-compute-engine
  functions:Cloud Functions|icon:gcp-cloud-functions
  run:Cloud Run|icon:gcp-cloud-run
  gke:GKE|icon:gcp-google-kubernetes-engine

  # Storage
  gcs:Cloud Storage|icon:gcp-cloud-storage
  filestore:Filestore|icon:gcp-filestore

  # Database
  cloudsql:Cloud SQL|icon:gcp-cloud-sql
  spanner:Spanner|icon:gcp-cloud-spanner
  firestore:Firestore|icon:gcp-firestore
  bigtable:Bigtable|icon:gcp-bigtable

  # Integration
  pubsub:Pub/Sub|icon:gcp-pubsub

Rendered diagram

Generic Icons

No prefix needed:

[nodes]
  # Common
  user:User|icon:user
  users:Users|icon:users
  server:Server|icon:server
  database:Database|icon:database
  cloud:Cloud|icon:cloud

  # Development
  github:GitHub|icon:devicon-github
  docker:Docker|icon:devicon-docker
  kubernetes:Kubernetes|icon:devicon-kubernetes

  # Communication
  email:Email|icon:email
  slack:Slack|icon:devicon-slack
  webhook:Webhook|icon:webhook

Rendered diagram

Combining Icons and Shapes

Icons override the default shape rendering:

[nodes]
  # Icon with label
  lambda:Order Processor|icon:aws-lambda

  # Icon with custom color
  db:Primary DB|icon:aws-rds|color:green

Rendered diagram

Example: AWS Architecture

@arch
#!ext icons

[nodes]
  users:Users|icon:users

  [AWS]
    cf:CloudFront|icon:aws-amazon-cloudfront
    apigw:API Gateway|icon:aws-api-gateway

    [VPC]
      alb:ALB|icon:aws-alb

      [Compute]
        lambda1:Auth|icon:aws-lambda
        lambda2:API|icon:aws-lambda
        lambda3:Worker|icon:aws-lambda

      [Data]
        rds:PostgreSQL|icon:aws-rds
        dynamo:Sessions|icon:aws-dynamodb
        redis:Cache|icon:aws-amazon-elasticache

    sqs:Queue|icon:aws-sqs
    s3:Assets|icon:aws-s3

[edges]
  users->cf
  cf->apigw
  apigw->alb
  alb->lambda1
  alb->lambda2
  lambda1->dynamo
  lambda2->rds
  lambda2->redis
  lambda2-->sqs
  sqs-->lambda3
  lambda3->rds
  cf->s3

Rendered diagram

Full Icon Reference

See the complete Icon Library for all 200+ available icons.

Next Steps

• Real-World Examples - Production-ready patterns

• Icon Library Reference - Complete icon list