The Technology catalogue holds full-colour icons for the infrastructure services that show up on system-architecture diagrams: AWS S3, Lambda, EC2, Azure Functions, Kubernetes, PostgreSQL and many more. They are deliberately separate from the regular icons, because they are coloured filled marks rather than the single-weight line art the Icons catalogue holds. An orange Lambda is only recognisable orange, so technology icons keep their fixed brand colours rather than tinting to your theme.
What's in the set
The set covers a curated selection of common services across five providers:
- AWS: S3, EC2, Lambda, RDS, DynamoDB, API Gateway, CloudFront, Route 53, VPC, SQS, SNS, ECS, EKS, CloudWatch, IAM, Lake Formation and MSK.
- Azure: Virtual Machine, Blob Storage, App Service, Functions, SQL Database, Cosmos DB, AKS, Virtual Network, Load Balancer, Service Bus, Key Vault and Monitor.
- Cloudflare: Workers, Pages, R2, D1, KV, Durable Objects, Queues, Zero Trust, CDN, DNS, WAF, Workers AI, Images and Stream.
- Firebase: Firestore, Realtime Database, Authentication, Cloud Functions, Hosting, Cloud Storage and Cloud Messaging.
- Generic: Kubernetes, Docker, PostgreSQL, MySQL, Redis, MongoDB, Cassandra, Kafka, RabbitMQ, Elasticsearch, Nginx, GraphQL, Node.js, React, GitHub, GitLab, Terraform, Prometheus, Vercel and Supabase.
Each icon is a brand-coloured rounded tile with a white line-art symbol, the AWS resource-icon visual language, applied uniformly across all five providers for a cohesive look. The symbols are drawn for livedesign rather than copied from the vendors' logos.
Adding one
The palette strip has no Tech category: the strip's categories are made for pages. The editor's search panel (⌘K or Ctrl+K) still adds any technology icon by name.
Open the search panel and type the service's name, or what it is: "database" turns up PostgreSQL, MySQL and the rest.
Pick the icon under Add to canvas, then click the page to drop it there, or drag to draw it at the size you want.
A few long names have a shorter caption (Virtual Machine shows as VM, Load Balancer as Load Bal.), but the full name is always used for search and for the placed element's label.
Working with them on the canvas
- A technology icon is the same kind of element the regular Icons category produces, so there's no new element type to learn.
- It arrives labelled with the service's name, in a band below the icon: the architecture-diagram convention of icon on top, caption beneath. Double-click to change it to something specific, such as
Orders DB. - The mark itself stays a fixed size, so it never warps however you resize the element; resizing only changes the room around it and the caption. To make the mark bigger or smaller, right-click it and pick Small, Medium, Large or Huge in its Icon section.
- A technology icon is always a standalone element: unlike a line-art icon, it never folds inside a shape as an inline icon, and dragging an existing one over a shape leaves it standalone.
Was this article helpful?